トップへ戻るボタン、デザイン変更


JIMDOカスタマイズ

テクニック

No.01 第一回!


画像販売ドットコムでは、HP制作サービスの中でJIMDOを利用した制作を行っています。jimdoというのは誰でも簡単にHPを作成出来るwebツールです。

いくら誰でも簡単に作れるとは言っても、カッコいい最高のHPを制作するにはやっぱり多少カスタマイズが必要なんです。という事で、JIMDOカスタマイズテクニックという新たな試みチャレンジします!

今回は、第一回です。第一回は、長いページ等にあると便利な「トップへ戻るボタン」のカスタマイズ。

「トップへ戻るボタン」なんですが特にプランに関係なく利用可能です。設定は表示を有効,無効に出来るほか左右どちらに配置するか設定出来ます。

ですが、色や大きさ,デザイン等は簡単に変更出来ないんです。そこで、今回は変更できる裏技をご紹介します。



↓通常の「トップへ戻るボタン」は、下記の赤色の四角で囲まれた部分なんですがこれを大きくする裏技(カスタマイズ方法)を紹介するわけです。

以下のCSSを「設定>ヘッダー部分を編集」で貼り付けて下さい。

<style>

.cc-FloatingButtonBarContainer li a span{

width:42px;

height:42px;

}

</style>

↓下記がカスタマイズ後の「トップへ戻るボタン」です。結構イメージ変わるのでは?

あと、一応このカスタマイズテクニックの記事、このページですね。

ご紹介したCSSしっかり適用されてるんです。

右下です。

CSSの追加方法(ヘッダー部分を編集)

jimdoにログインして編集画面の際に右に管理メニューがあります。管理メニューの設定からヘッダー部分を編集という項目をクリックしてそこにさきほどのCSSを貼り付けます。

詳しいやり方は?

以下の公式ヘルプを見れば分かります。

--

http://jp-help.jimdo.com/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8/%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E9%83%A8%E5%88%86%E3%82%92%E7%B7%A8%E9%9B%86/

--

それにしても、長いですね。URL、、、

次回のカスタマイズテクニックでは、しっかり画像で解説出来るよう準備しますのでもう少し待ってください!


当記事を無断転載した場合法的措置を講ずる場合もあります。


JIMDO HP制作 カスタマイズテクニック編集チーム

次回も、便利なテクニック紹介しますのでみて下さい~