[STINGER6]pagetopボタン(ページトップへ戻る)のデザインをカスタマイズ
2016/05/15
WordPressのテーマSTINGER6で、pagetop(ページトップ)ボタンのデザインの変更方法と、ボタンをクリックした際のスクロール速度をカスタマイズする方法をまとめました。
WordPressにまだ慣れていない人や、カスタマイズ方法がわからない方は、参考にして下さい。
Contents
スポンサーリンク
まずはバックアップを取る
まずはバックアップを取りましょう。
今回ソースコードに手を加えるファイルは、
wordpressインストールフォルダ > wp-content > themes > stinger6
このディレクトリ直下にあるfooter.php, style.cssの2点です。
WordPressが開かなくなってしまった場合は、ここでバックアップを取ったファイルをアップロードしなおしましょう。
STINGER6デフォルトのpagetopボタンとこの記事で行う変更点
STINGER6をインストールしたばかりのデフォルトのpagetopボタンは、以下の画像の赤枠で囲った部分です。
この記事の目的は、pagetopボタンの存在をほどよく目立たせることです。
そのために行うデザインの変更は、以下の通りです。
- pagetopボタンであることを示すため、”PAGE TOP”という文字を表示する
- 矢印を目立たせるため、をにする
- 文字が見やすくなるように、背景色を濃くする
- このままでは矢印と文字がくっつきすぎているので、矢印と文字の間隔をあける
footer.phpファイルの修正で上2つをクリアし、style.cssの修正で下2つをクリアします。
pagetopボタンのデザインを変更する
footer.phpを調整することで、以下の2つの目的を達成します。
- pagetopボタンであることを示すため、”PAGE TOP”という文字を表示する
- 矢印を目立たせるため、をにする
footer.php(変更前)
|
1 2 3 |
<!-- ページトップへ戻る --> <div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div> <!-- ページトップへ戻る 終わり --> |
footer.php(変更後)
|
1 2 3 |
<!-- ページトップへ戻る --> <div id="page-top"><a href="#wrapper" class="fa fa-arrow-up">PAGE TOP</a></div> <!-- ページトップへ戻る 終わり --> |
解説
“PAGE TOP”という文字はただ追加しただけです。
ここで、がに変わった理由ですが、STINGER6ではFont-AwesomeというWebフォントのアイコンがデフォルトで導入されています。
もともと表示されていたもFont-Awesomeを使って表示していたので、を表示するためのクラス名に変更しました。
ここまででデザインはこう変わった
ここまででpagetopボタンは以下の画像のようになりました。
style.cssの調整
style.cssの調整によって、以下の2つの目的を達成します。
- 文字が見やすくなるように、背景色を濃くする
- このままでは矢印と文字がくっつきすぎているので、矢印と文字の間隔をあける
style.css(変更前)
|
1 2 3 4 5 6 7 8 9 10 |
#page-top a { background: #665e53; text-decoration: none; color: #fff; padding: 10px; text-align: center; display: block; -moz-opacity: 0.3; opacity: 0.3; } |
style.css(変更後)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#page-top a { background: #665e53; text-decoration: none; color: #fff; padding: 10px; text-align: center; display: block; -moz-opacity: 0.6; /* 0.3 -> 0.6に変更 */ opacity: 0.6; /* 0.3 -> 0.6に変更 */ } #page-top .fa-arrow-up:before { margin-right: 5px; /* 矢印と文字の間のマージン */ } |
解説
まず、”PAGE TOP”という文字が背景色に埋もれてしまっているので、透明度を指定するopacityプロパティを0.3から0.6に調整しました。
値の設定は好みですが、0が完全な透明で、1が完全な不透明です。
そして、と”PAGE TOP”の間隔を空けるため、の右側にマージンが入るようにしました。
もし矢印として以外のアイコンを使用している場合、ここで指定するクラス名はそのアイコンごとに異なるのでご注意下さい。
ここまででデザインはこう変わった
ここまででpagetopボタンは以下の画像のようになりました。
終わりに
プログラミングの経験があまりない人にとっては、ソースコードを追ってWordPressをカスタマイズしていくのは大変ですよね。
この記事が少しでもそのような人たちの役に立てば幸いです。