賢威8のページトップへ戻るボタンのカスタマイズ方法｜中級者向けカスタマイズ

賢威8の「ページトップへ戻る」ボタン

このままでも十分良いとは思うのですが、中には

• ボタンの色を変えたい
• ボタンの形を変えたい
• ボタンの表示位置を変えたい

という方もいるかと思います。

ということで今回は、そんな方々に向けて、賢威8の「ページトップへ戻る」ボタンの様々なカスタマイズ方法を解説したいと思います。

この記事を参考に、ぜひオリジナルの「ページトップへ戻る」ボタンを作ってみてください。

賢威8をカスタマイズするときの注意点

賢威8をカスタマイズする時は、必ず子テーマを使いましょう。

親テーマをカスタマイズしても、テーマをバージョンアップすると、カスタマイズした内容が全て消えてしまいます。

しかし、子テーマを使えば、テーマをバージョンアップしてもカスタマイズした内容がそのまま保持されるので、安心してサイトをカスタマイズすることができます。

賢威8の子テーマの使い方

カスタマイズしたい箇所のコードを、子テーマの「base.css」に追加しましょう。

カスタマイズしたい箇所のコードを、子テーマの「base.css」に追加

賢威8「ページトップへ戻る」ボタンのカスタマイズ一覧

アイコンの色を変える

アイコンの色を変える

アイコンを太くする

アイコンを太くする

ボタンの表示位置を調整する

デフォルトでは、ボタンは下記のように画面の右下にぴったりくっ付いています。

デフォルトのボタンの表示位置

このボタンの位置を、次のように調整することができます。

ボタンの表示位置を調整した場合

ボタンを丸くする

ボタンを丸くする

ボタンの背景色を変える

ボタンの背景色を変える

ボタンに影を付ける

ボタンに影を付ける

まとめ

今回は、賢威8 の「ページトップへ戻る」ボタンのカスタマイズ方法を解説しました。

賢威8のユーザーはたくさんいますが、「ページトップへ戻る」ボタンをカスタマイズしている人はあまりいません。

細かい部分にはなりますが、このボタンのデザインを変えるだけでも、十分オリジナリティを出すことができるので、ぜひ試してみてください。