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

同じカテゴリーの記事

• 

  Jimdoの文字フォントにGoogleフォントを追加する方法

  Jimdoの日本語フォントをもっと自由に変えたい場合は、商用利用も無料なGoogleフォントを読み込むのが早道です。 コードを直接追加するのは一見面倒そうに見えますが、間違ったら全部消せばいいだけなので、まずは手を動かし… [続きを読む]

• 

  Jimdoの特定ページをWordPressへリダイレクトする方法-Javascript

  Jimdoで作っていたサイトの「特定ページのみ」を、WordPressサイトのページへリダイレクトする方法を試してみました。 今回やりたいこととしては、Jimdoの特定ページを表示したら、WordPressサイトの別ペー… [続きを読む]

• 

  Jimdoの文字フォントを簡単に変更する方法【Windows限定】

  Jimdoでホームページのリニューアルをしていたら、お客さんからフォントを「和風テイスト」にしたいとのご希望がありました。 JimdoProは日本語のフォント数がまだまだ少ないので、Googleフォントでも読み込もうかと… [続きを読む]

• 

  Jimdoで見出しの大きさ変更カスタマイズ【PC・スマホ切り替え】

  Jimdoの見出しブロックは「大・中・小」の３種類がありますが、もうちょっとフォントのサイズを変えたい、スマホ表示での大きさを変えたい場合はちょっと設定を変える必要があります。 作業は難しくないので、興味がある人はぜひ挑… [続きを読む]

最新の投稿

---

---

---

---

---

このサイトはさくらのレンタルサーバを使用しています。