創作ポスト

創作物の力で元気になろう。すてきな創作物を知りたい人、自分で創作物を作っている人に向けて、手紙を書くように記事を届けます。

[STINGER6]pagetopボタン(ページトップへ戻る)のデザインをカスタマイズ

      2016/05/15

WordPressのテーマSTINGER6で、pagetop(ページトップ)ボタンのデザインの変更方法と、ボタンをクリックした際のスクロール速度をカスタマイズする方法をまとめました。
WordPressにまだ慣れていない人や、カスタマイズ方法がわからない方は、参考にして下さい。

スポンサーリンク

まずはバックアップを取る

まずはバックアップを取りましょう。
今回ソースコードに手を加えるファイルは、
 wordpressインストールフォルダ > wp-content > themes > stinger6
このディレクトリ直下にあるfooter.php, style.cssの2点です。

WordPressが開かなくなってしまった場合は、ここでバックアップを取ったファイルをアップロードしなおしましょう。

STINGER6デフォルトのpagetopボタンとこの記事で行う変更点

STINGER6をインストールしたばかりのデフォルトのpagetopボタンは、以下の画像の赤枠で囲った部分です。
20160123-01

この記事の目的は、pagetopボタンの存在をほどよく目立たせることです。
そのために行うデザインの変更は、以下の通りです。

  • pagetopボタンであることを示すため、”PAGE TOP”という文字を表示する
  • 矢印を目立たせるため、にする
  • 文字が見やすくなるように、背景色を濃くする
  • このままでは矢印と文字がくっつきすぎているので、矢印と文字の間隔をあける

footer.phpファイルの修正で上2つをクリアし、style.cssの修正で下2つをクリアします。

pagetopボタンのデザインを変更する

footer.phpを調整することで、以下の2つの目的を達成します。

  • pagetopボタンであることを示すため、”PAGE TOP”という文字を表示する
  • 矢印を目立たせるため、にする

footer.phpの調整

footer.php(変更前)

footer.php(変更後)

解説
“PAGE TOP”という文字はただ追加しただけです。
ここで、に変わった理由ですが、STINGER6ではFont-AwesomeというWebフォントのアイコンがデフォルトで導入されています。
もともと表示されていたもFont-Awesomeを使って表示していたので、を表示するためのクラス名に変更しました。

ここまででデザインはこう変わった
ここまででpagetopボタンは以下の画像のようになりました。
20160123-02

style.cssの調整

style.cssの調整によって、以下の2つの目的を達成します。

  • 文字が見やすくなるように、背景色を濃くする
  • このままでは矢印と文字がくっつきすぎているので、矢印と文字の間隔をあける

style.css(変更前)

style.css(変更後)

解説
まず、”PAGE TOP”という文字が背景色に埋もれてしまっているので、透明度を指定するopacityプロパティを0.3から0.6に調整しました。
値の設定は好みですが、0が完全な透明で、1が完全な不透明です。
そして、と”PAGE TOP”の間隔を空けるため、の右側にマージンが入るようにしました。
もし矢印として以外のアイコンを使用している場合、ここで指定するクラス名はそのアイコンごとに異なるのでご注意下さい。

ここまででデザインはこう変わった
ここまででpagetopボタンは以下の画像のようになりました。
20160123-03

終わりに

プログラミングの経験があまりない人にとっては、ソースコードを追ってWordPressをカスタマイズしていくのは大変ですよね。
この記事が少しでもそのような人たちの役に立てば幸いです。

 - Webサイト運営, WordPress ,

PAGE TOP