Jimdoでトップへ戻るボタンのカスタマイズ方法
Jimdoでページの下へスクロールすると、表示される「トップへ戻る」ボタンですが、WEBサイトによってはデザインが合わないこともあるので、ボタンの色を変えたり大きさを変える方法を解説します。
コードを追加してデザインをカスタマイズ
Jimdo管理画面「基本設定」→「ヘッダー編集」からコードを追加してカスタマイズしていきます。
ホームページ全体のところへコードを貼り付けます。
ボタンを青色に変更
上記の赤い枠の中に、下記のコードを丸ごと貼り付けます。
ここでは背景カラーをブルーに変更しています。
- <style type="text/css">
- /*<![CDATA[*/
- /*ページトップへ戻るボタン*/
- .cc-FloatingButtonBarContainer li a {
- background: #000080; /*背景カラーをブルーに変更*/
- }
-
- /*]]>*/
- </style>
実際のボタン表示はこちら。青く変わりました！
他の色が良い場合は、#以下の色番号を変更すればOKです。
WEB色見本などを参考にしてみると良いでしょう。
ボタンの大きさを変更
次はボタンのサイズを大きくしてみます。下記のコードをコピペしてください。
- <style type="text/css">
- /*<![CDATA[*/
- /*ページトップへ戻るボタン*/
- .cc-FloatingButtonBarContainer li a {
- padding: 10px; /*ボタンに余白を作って大きくする*/
- }
-
- /*]]>*/
- </style>
実際の表示。ボタンが大きくなりました。
ボタンを丸くする
次はボタンを丸くしてみましょう。下記のコードをコピペしてください。
- <style type="text/css">
- /*<![CDATA[*/
- /*ページトップへ戻るボタン*/
- .cc-FloatingButtonBarContainer li a {
- border-radius: 50%; /*ボタンを丸くする*/
- }
-
- /*]]>*/
- </style>
実際の表示。ボタンが丸くなりました。
まとめ
色を変えてサイズも変える、といった場合はカッコ内{}に上記のタグを並べて記載すればOKです。
ややこしそうなボタンデザインの変更ですが、コードを追記するだけでカスタマイズは簡単なので、ぜひお試しください。
Jimdoおすすめ参考書
Jimdoのカスタマイズについての参考書です。
 | ジンドゥークリエイター 仕事の現場で使える! カスタマイズとデザイン教科書 (Webデザイナー養成講座) 新品価格 |
[公開日] 2019年8月8日 / [最終更新日] 2022年5月16日 / カテゴリー：Jimdo
同じカテゴリーの記事
-
Jimdoで見出しの大きさ変更カスタマイズ【PC・スマホ切り替え】Jimdoの見出しブロックは「大・中・小」の３種類がありますが、もうちょっとフォントのサイズを変えたい、スマホ表示での大 [続きを読む]
-
Jimdoの文字フォントを簡単に変更する方法【Windows限定】Jimdoでホームページのリニューアルをしていたら、お客さんからフォントを「和風テイスト」にしたいとのご希望がありました [続きを読む]
-
Jimdoの文字フォントにGoogleフォントを追加する方法Jimdoの日本語フォントをもっと自由に変えたい場合は、商用利用も無料なGoogleフォントを読み込むのが早道です。 コ [続きを読む]
-
JimdoとWordPressの違いを比較！SEOに強いのはどっち？ホームページ制作サービスのJimdo（ジンドゥー）とWordPress（ワードプレス）どちらがSEOに強いのかを検証して [続きを読む]
最新の投稿
2022年09月26日
2022年09月21日
2022年09月02日
2022年08月30日
2022年08月10日
カテゴリー
アーカイブ
