クリックするとページの先頭にスーッと移動してくれるトップへ戻るボタン。
STINGER PLUS+のデフォルトでは、こんなデザインになってます。オリジナルテーマカスタマイザーを使用すれば色を変更できますが、もう少しアレンジしたい。
そこで、トップへ戻るボタンのデザインを変更し、マウスホバー時に色が変わるようにカスタマイズしました。
2種類用意しているので、お好きな方をコピペでどうぞ♪
カスタマイズでこんな風に変化する
デフォルトからの変更点は、このような感じです。
- 位置を調整
- 矢印アイコンを変更
- 色、形、大きさを変更
- マウスホバー時に色が変化するように変更
すでに画面右下にはカスタマイズ後のトップへ戻るボタンが設置されています。現在、当ブログではデザイン-2を適用中です。
デザイン-1
デザイン-2
スタイルシート（style.css）にコードを追記
WordPress管理画面で「外観」⇒「テーマの編集」⇒子テーマ「style.css」の編集画面へ。
次の「デザイン-1」もしくは「デザイン-2」のコードを追記してください。
デザイン-1
/* トップへ戻る */
#page-top {
bottom: 15px; /* 下からの位置 */
right: 15px; /* 右からの位置 */
font-size: 40px; /* アイコンの大きさ */
}
#page-top a {
padding: 5px; /* アイコン周りの余白 */
background: #808080; /* 背景色 */
width: 40px; /* ボタンの幅 */
height: 40px; /* ボタンの高さ */
line-height: 40px; /* アイコンの高さ */
border-radius: 50%; /* ボタンを角丸に */
transition: 0.8s; /* 色の変化に要する時間 */
}
#page-top a:hover {
background: #228b22; /* マウスホバー時の背景色 */
opacity: 0.8; /* マウスホバー時の透明度 */
}
.fa-angle-up:before {
content: "\f139"; /* アイコンの種類 */
}上記のコードを追記することで、「デザイン-1」のトップへ戻るボタンが適用されます。
デザイン-2
/* トップへ戻る */
#page-top {
bottom: 15px; /* 下からの位置 */
right: 15px; /* 右からの位置 */
font-size: 40px; /* アイコンの大きさ */
}
#page-top a {
padding: 5px; /* アイコン周りの余白 */
border: 2px solid #fff; /* 枠線 */
background: #808080; /* 背景色 */
box-shadow: 0px 0px 0px 3px #808080; /* 枠線外側の影 */
width: 30px; /* ボタンの幅 */
height: 30px; /* ボタンの高さ */
line-height: 26px; /* アイコンの高さ */
border-radius: 50%; /* ボタンを角丸に */
transition: 0.6s; /* 色の変化に要する時間 */
}
#page-top a:hover {
background: #228b22; /* マウスホバー時の背景色 */
box-shadow: 0px 0px 0px 2px #228b22; /* マウスホバー時の枠線外側の影 */
opacity: 0.8; /* マウスホバー時の透明度 */
}
.fa-angle-up:before {
content: "\f106"; /* アイコンの種類 */
}上記のコードを追記することで、「デザイン-2」のトップへ戻るボタンが適用されます。
ボタンの位置はデフォルトだと画面右端に引っ付いて、下側のみ余白があったので、バランスよく調整しました。
透明度はデフォルトが0.6だったので、マウスホバー時に透明度が下がるように0.8に設定しています。
全体的な大きさは、大きすぎると邪魔になると思うので、こんなものかな、と。
transition: 0.8s; /* 色の変化に要する時間 */
このコードがあると、マウスホバー時に0.8秒かけて色が変化します。「デザイン-1」では0.8秒、「デザイン-2」では0.6秒に設定してあります。私はゆっくり変化する方が好みだったので記述していますが、必要なければ削除することでサッと色が変わります。
アイコンは、Font Awesomeのアイコン種類を変更しました。変更したい場合は、Unicodeを置き換えるだけです。使い方は以下の記事にも書いてあるので、参考にしてください。
各項目、好みに合わせて適宜変更してみてください。
まとめ
あると便利なトップへ戻るボタン。
大きなカスタマイズではないけれど、大事なブログの一部分を自分好みに変更してみました。
目立ちすぎると邪魔だし、小さすぎると押しにくい。パソコン閲覧時とスマホ閲覧時でも、最適の大きさは異なるのかもしれません。この辺も考えないといけませんね。
ご自分のサイトに合わせて、いろいろと試してみてください。