WordPressのテーマであるSTINGER8(スティンガー8)のカスタマイズをします。
※ちなみにこのサイトのテーマは現在STINGER8ではありません。
画面をスクロールした際に、
一番上にすぐに戻ることができる「トップへ戻る」ボタン。
ユーザビリティーを向上させる一つの機能ですね。
STINGER8はデフォルトでも「トップへ戻る」はあります。
しかし個人的に色が薄くて非常に分かりにくい印象です。
そこで今回はトップへ戻るボタンの色を変えたいと思います。
作業内容は以下の通りです。
手順
１．STINGER8の子テーマを準備する
２．「style.css」を編集する
※すでに子テーマを使っている方は読み飛ばしてOKです。
子テーマはなくてもいいですが、バックアップの面や今後のアップデートを考えると子テーマでの編集をおすすめします。
STINGER8はホームページからテーマ本体だけでなく子テーマもダウンロードできるのでそちらを使うのをおすすめします。
子テーマをダウンロードおよびインストールしたら、
WordPressの「外観」→「テーマ」にてSTINGER8の子テーマを有効化しておきます。
デフォルトの子テーマには「style.css」がすでに入っているのでこれをそのまま使います。
WordPress画面で、
「外観」→「テーマの編集」にて「style.css」を開きましょう。
全体を見るとこのような感じです。
/*
Theme Name: STINGER8 Child
Template: stinger8
Version: 20161115
*/
@import url('../stinger8/style.css');
/*media Queries タブレットサイズ（960px以下）
----------------------------------------------------*/
@media only screen and (max-width: 960x) {
/*-- ここまで --*/
}
/*media Queries タブレットサイズ（600px以上）
----------------------------------------------------*/
@media only screen and (min-width: 600px) {
/*-- ここまで --*/
}
/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {
/*-- ここまで --*/
}STINGER8は画面サイズごとに異なる設定ができます。
しかし今回はすべての端末に共通して「トップへ戻る」ボタンの色を変えたいです。
そのため上記コードの赤字の部分のすぐ下に書き足していきます。
書き足すのは、
#page-top a {background: #c0c0c0;}というコード。
「#c0c0c0」というデフォルトより濃い灰色を入れてみました。
ここは個人の好みのカラーを入れてみてください。
実際に書き足すとこのような感じです。
/*
Theme Name: STINGER8 Child
Template: stinger8
Version: 20161115
*/
@import url('../stinger8/style.css');
/*-- トップへ戻るボタンの色 --*/
#page-top a {background: #c0c0c0;}
/*media Queries タブレットサイズ（960px以下）
----------------------------------------------------*/コメントは個人的にあとから再度いじる際にわかりやすいように入れました。
動作的にはコメントはなくてもOKです。
【引用・参考サイト】
・『ネットワーク・ベース』（STINGER8でフッター部をカスタマイズする）2017年6月25日検索
・『ニナタブ』（STINGER8 カスタマイズ – トップへ戻るボタンを装飾してみる。）2017年6月25日検索