賢威8の「トップへ戻る」ボタンのカスタマイズ方法

賢威8の「トップへ戻る」ボタンのカスタマイズ方法

賢威8では、デフォルトで以下のような「トップへ戻る」ボタンが表示されるようになっています。

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

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

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

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

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

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

賢者
自分だけの「トップへ戻る」ボタンを作成してみましょう!


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

賢威8をカスタマイズする時は、必ず子テーマを使いましょう。
親テーマをカスタマイズしても、テーマをバージョンアップすると、カスタマイズした内容が全て消えてしまいます。

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

賢者
安心してサイトをカスタマイズできますね!
 
 

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

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

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

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

 
 

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

アイコンの色を変える

アイコンの色を変える

アイコンの色を変える

 
 

アイコンを太くする

アイコンを太くする

アイコンを太くする

 
 

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

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

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

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

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

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

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

 
 

ボタンを丸くする

ボタンを丸くする

ボタンを丸くする

 
 

ボタンの背景色を変える

ボタンの背景色を変える

ボタンの背景色を変える

 
 

ボタンに影を付ける

ボタンに影を付ける

ボタンに影を付ける

 
 


まとめ

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

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

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

スポンサーリンク