Life Jam

専門知識ゼロの初心者がWordPressに挑戦中

WordPress

【STINGER PLUS+】トップへ戻るボタンのデザインを変更してみた

2017/01/08

クリックするとページの先頭にスーッと移動してくれるトップへ戻るボタン。

STINGER PLUS+トップへ戻る(デフォルト)

STINGER PLUS+のデフォルトでは、こんなデザインになってます。オリジナルテーマカスタマイザーを使用すれば色を変更できますが、もう少しアレンジしたい。

そこで、トップへ戻るボタンのデザインを変更し、マウスホバー時に色が変わるようにカスタマイズしました。

2種類用意しているので、お好きな方をコピペでどうぞ♪

スポンサーリンク

カスタマイズでこんな風に変化する

デフォルトからの変更点は、このような感じです。

  • 位置を調整
  • 矢印アイコンを変更
  • 色、形、大きさを変更
  • マウスホバー時に色が変化するように変更

すでに画面右下にはカスタマイズ後のトップへ戻るボタンが設置されています。現在、当ブログではデザイン-2を適用中です。

デザイン-1

STINGER PLUS+トップへ戻る(変更後)

デザイン-2

スタイルシート(style.css)にコードを追記

WordPress管理画面で「外観」⇒「テーマの編集」⇒子テーマ「style.css」の編集画面へ。

次の「デザイン-1」もしくは「デザイン-2」のコードを追記してください。

デザイン-1

上記のコードを追記することで、「デザイン-1」のトップへ戻るボタンが適用されます。

デザイン-2

上記のコードを追記することで、「デザイン-2」のトップへ戻るボタンが適用されます。

 

ボタンの位置はデフォルトだと画面右端に引っ付いて、下側のみ余白があったので、バランスよく調整しました。

透明度はデフォルトが0.6だったので、マウスホバー時に透明度が下がるように0.8に設定しています。

全体的な大きさは、大きすぎると邪魔になると思うので、こんなものかな、と。

このコードがあると、マウスホバー時に0.8秒かけて色が変化します。「デザイン-1」では0.8秒、「デザイン-2」では0.6秒に設定してあります。私はゆっくり変化する方が好みだったので記述していますが、必要なければ削除することでサッと色が変わります。

アイコンは、Font Awesomeのアイコン種類を変更しました。変更したい場合は、Unicodeを置き換えるだけです。使い方は以下の記事にも書いてあるので、参考にしてください。

各項目、好みに合わせて適宜変更してみてください。

まとめ

あると便利なトップへ戻るボタン。

大きなカスタマイズではないけれど、大事なブログの一部分を自分好みに変更してみました。

目立ちすぎると邪魔だし、小さすぎると押しにくい。パソコン閲覧時とスマホ閲覧時でも、最適の大きさは異なるのかもしれません。この辺も考えないといけませんね。

ご自分のサイトに合わせて、いろいろと試してみてください。

-WordPress

スポンサーリンク