どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
記事の途中からでもワンクリックでページのトップに移動してくれる、そんな便利なボタンが「トップへ戻るボタン」です。
ワードプレス(WordPress)の無料テンプレート「STINGER8」にも、このトップへ戻るボタンが実装されていることをご存知でしょうか。
私はSTINGER8を使用してから数日間はないものだと思っていたのですが、もしかしてと画面の右下にカーソルを合わせると、なんとボタンが存在しました！
ただ、色がもの凄く薄すぎてこれではユーザーの方も気がつかないので、せっかくのトップへ戻るボタンなのに意味がなくなってしまいます。
そこでもっとわかりやすく装飾して、デザインをカスタマイズしていこうと思います。
「STINGER8」デフォルトのトップへ戻るボタン
「STINGER8」で採用されているデフォルトの「トップへ戻る」ボタンは以下のようなデザインになっています。
かろうじて薄らとマークが見えるレベルなので、このままではユーザーの方にしっかり「トップへ戻る」ボタンがあることを認識してもらえない可能性があります。
そこでボタンの背景色を変えるだけでもかなり判別できるようになるので、機能として有効に使用できるようカスタマイズしていきます。
スタイルシート(style.css)を編集する
「STINGER8」のスタイルシート(style.css)にコードを追加してデザインを変更していきますが、親テーマではなく子テーマ内に追記していくことをオススメしています。
親テーマでコードを編集していく場合、テーマをアップデートすると編集内容が上書きされてしまうリスクがあるので、編集の際は十分注意しましょう。
style.cssの編集はワードプレス管理画面メニューの「外観」⇒「テーマの編集」の順に進めて下さい。
ボタンの背景色をカスタマイズする
まずは「トップへ戻る」ボタンの背景色だけを変更してみたいと思います。
スタイルシート(style.css)の一番下に以下のコードを追加して『ファイルを更新』をクリックします。
/*-- トップへ戻るボタン --*/
#page-top a {
background: #008b8b; /*背景色*/
}
「#008b8b」の色コードの部分をお好みの色に変更して調整できます。
詳しい色コードが知りたい方は、「原色大辞典」のサイトが参考になるかと思います。
上記のコードに変更するとデフォルトの時よりも、はっきりとボタンが認識できるようになりました。
ボタンの大きさ・配置・形などをカスタマイズする
ボタンの配色だけでなく、もっと大きくしたり四角い形を丸くしたり細かく編集したい方は、以下のコードをstyle.cssに追加します。
/*-- トップへ戻るボタン --*/
#page-top {
bottom: 20px;/*下側の配置*/
right: 20px;/*右側の配置*/
font-size: 50px;/*アイコンサイズ*/
}
#page-top a {
padding: 5px;/*アイコン内の余白*/
background: #008b8b;/*背景色 */
width: 50px;/*横幅*/
height: 50px;/*高さ*/
line-height: 45px;/*アイコンの配置*/
border-radius: 50%;/*角の丸み*/
}
サイドバーコンテンツと「トップへ戻る」ボタンが被らないように、ブログごとに上手く調整して下さい。
前のデザインよりも一層ボタンらしくなったので、これでも十分機能してくれそうですね。
ボタンのカーソルホバー時に変化を加える
ボタンにカーソルがホバーした時に色を変化させたい場合は、以下のcssコードを追記していきます。
#page-top a:hover {
background: #4169e1;/*ホバー時の背景色*/
opacity: 0.8;/*ホバー時の透明度*/
}
カーソルホバー時に色の変化をつけることで、ボタンの選択にアクション要素をプラスすることができます。
色の変化を今よりももっとゆっくりにしたい時は、「#page-top a {}」内に以下のコードを追加して下さい。
transition: 0.7s;/*色が変化する秒数*/
「transition」のコードを追加すると設定した秒数で色が変化していきます。
ここでは「0.7秒」に設定していますがもっとゆっくり変化させたい、もっと早く変化させたい場合はお好みで調整しましょう。
どのように表示させるかは好みによって違うので、気に入ったものを使用するといいかと思います。
新しいアイコンデザインに変更する
デフォルトのアイコン画像から新しいものに変更するなら、「Font Awesome」のボタンアイコンがシンプルで使いやすい印象です。
Font Awesomeの画像を使用するには「トップへ戻る」ボタン用の画像を選択後、以下の赤枠で囲った部分の英字と数字をコピーしておきます。
「STINGER8」style.cssの編集画面に戻って以下のコードを追記します。
.fa-angle-up:before {
content: "\f102";/*アイコン画像*/
}
「f102」の部分が画像コードになるので好きなものに変更してお使い下さい。
上記のように簡単にボタンアイコンのデザインをカスタマイズすることも可能です。
「トップへ戻る」ボタンのカスタマイズまとめ
今回ご紹介した方法で「STINGER8」のトップへ戻るボタンを有効にカスタマイズすることができました。
デフォルト状態で若干わかりにくいまま使用するより、使いやすく装飾してデザインを変更するだけでブログの印象もかわるのではないでしょうか。
ちょっとした変化かもしれませんが、細かいところにも目が行き届いている、そんなブログを目指している方は少しでもアレンジしてカスタマイズに挑戦していきましょう。
