Jimdoでトップへ戻るボタンのカスタマイズ方法

トップへ戻るボタンをカスタマイズ

Jimdoでページの下へスクロールすると、表示される「トップへ戻る」ボタンですが、WEBサイトによってはデザインが合わないこともあるので、ボタンの色を変えたり大きさを変える方法を解説します。

コードを追加してデザインをカスタマイズ

Jimdo管理画面「基本設定」→「ヘッダー編集」からコードを追加してカスタマイズしていきます。

ホームページ全体のところへコードを貼り付けます。

ボタンを青色に変更

上記の赤い枠の中に、下記のコードを丸ごと貼り付けます。
ここでは背景カラーをブルーに変更しています。

  1. <style type="text/css">
  2. /*<![CDATA[*/
  4. /*ページトップへ戻るボタン*/
  5. .cc-FloatingButtonBarContainer li a {
  6. background: #000080; /*背景カラーをブルーに変更*/
  7. }
  8.     
  9. /*]]>*/
  10. </style>

実際のボタン表示はこちら。青く変わりました！

ボタンが青色に変化

他の色が良い場合は、#以下の色番号を変更すればOKです。
WEB色見本などを参考にしてみると良いでしょう。

ボタンの大きさを変更

次はボタンのサイズを大きくしてみます。下記のコードをコピペしてください。

  1. <style type="text/css">
  2. /*<![CDATA[*/
  4. /*ページトップへ戻るボタン*/
  5. .cc-FloatingButtonBarContainer li a {
  6.  padding: 10px; /*ボタンに余白を作って大きくする*/
  7. }
  8.     
  9. /*]]>*/
  10. </style>

実際の表示。ボタンが大きくなりました。

ボタンが拡大

ボタンを丸くする

次はボタンを丸くしてみましょう。下記のコードをコピペしてください。

  1. <style type="text/css">
  2. /*<![CDATA[*/
  4. /*ページトップへ戻るボタン*/
  5. .cc-FloatingButtonBarContainer li a {
  6.  border-radius: 50%; /*ボタンを丸くする*/
  7. }
  8.     
  9. /*]]>*/
  10. </style>

実際の表示。ボタンが丸くなりました。

ボタンが丸になりました

まとめ

色を変えてサイズも変える、といった場合はカッコ内{}に上記のタグを並べて記載すればOKです。
ややこしそうなボタンデザインの変更ですが、コードを追記するだけでカスタマイズは簡単なので、ぜひお試しください。

[公開日] 2019年8月8日　/　[最終更新日] 2019年8月8日　カテゴリー：Jimdo

｜トップ｜

この記事を書いた人
ポポデザイン

ポポデザイン
西宮市在住のWEBデザイナー・クリエイター。 ホームページの制作からディレクション、イラスト、SEOなど制作からユーザーのサポートまで幅広く、初心者のかたも分かりやすい対応を心がけております。(プロフィール)
Facebook｜Twitter｜Instagram

同じカテゴリーの記事

最新の投稿

ホームページを簡単に多言語化！
WordPressを多言語化する簡単プラグイン！GTranslateの使い方
2020年03月25日
「この接続ではプライバシーが保護されません」の対処法【さくらサーバーSSL】
2020年03月03日
百花繚乱プロジェクト LPページを制作しました
2020年02月25日
おたからや阪急西北駅前店様 ホームページを制作しました
2020年02月18日
Snapupでバックアップ
WordPressサイトの定期バックアップが簡単に取れる！さくらのレンタルサーバー「Snapup」
2020年02月03日

  • カテゴリー

  • アーカイブ

    • HTML無料テンプレートダウンロードサイト