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

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

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

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

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

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

ボタンを青色に変更

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

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

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

ボタンが青色に変化

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

ボタンの大きさを変更

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

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

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

ボタンが拡大

ボタンを丸くする

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

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

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

ボタンが丸になりました

まとめ

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

Jimdoおすすめ参考書

Jimdoのカスタマイズについての参考書です。

ジンドゥークリエイター 仕事の現場で使える! カスタマイズとデザイン教科書 (Webデザイナー養成講座)

新品価格
¥3,608から
(2022/5/16 15:09時点)

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


トップ

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

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

同じカテゴリーの記事