つい先日、無料WordPressテーマ:Stinger7の正式版が公開されましたね。
細かいところはあまり見れていませんけど、管理画面からできるカスタマイズが増えた上に Page Speed Insights のスコアもかなり上がったようです。
今後更に Stingerユーザーが増えそうですね。
今回の記事では、そんな無料WordPressテーマ:Stinger7の「トップに戻る」ボタンをカスタマイズする方法を紹介したいと思います。
カスタマイズと言っても色々あると思いますが、ここでは
- トップに戻るボタンの色を変更
- ボタンの大きさを変更
- ボタンを丸くする
- 矢印を大きくする
- ボタンの位置を変更
という5つのカスタマイズをご紹介します。
目次
カスタマイズ前
↓ 画面の右下(ブラウザの右端から0px、下端から20pxの位置)に表示されている状態
カスタマイズ後
カスタマイズ 1
↓ トップに戻るボタンの色を黒(#333)に変更
カスタマイズ 2
↓ ボタンの大きさを変更
カスタマイズ 3
↓ ボタンを丸くする
カスタマイズ 4
↓ ボタンに表示される矢印(のサイズ)を大きくする
カスタマイズ 5
↓ ボタンの位置(固定する位置)を変更
1. ボタンの色を変える
Stinger7では子テーマも配布されているので、ここでは子テーマを使ってカスタマイズしていきたいと思います。
まずはトップに戻るボタンの色を変更していきます。
以下のコードを style.css ファイルに追加すると、、、
#page-top a {opacity: 1;background-color: #333;}
ボタンの色が黒(#333)になります。
ここでは色コードが#333の黒にしましたが、お好みの色にする場合には background-color: #色コード;
の部分を変更して下さい。
矢印の色を変えるには、下のように color: #色コード
とすれば大丈夫です。
#page-top a {color: #fafafa;}
1-1. マウスオーバー時の色を変えるには
上のコードはマウスオーバーしていない、通常の状態の色を変えましたが、マウスオーバーしたときの色を変更する場合は、以下のように指定します。
#page-top a:hover {background-color: #555;}
ここでもお好みの色にするには、background-color: #555;
部分の色コードを編集して下さい。
2. ボタンの大きさを変える
次はボタンの大きさを変えるカスタマイズです。
先ほどと同じように、style.css に以下のコードを追加すると、、、
#page-top a {width: 30px;height: 30px;line-height: 30px;}
ボタンが上下左右5pxずつ大きくなりました。
もう少し大きく(小さく)したいという場合には、width: ○○;
や height: ○○px;
などの○○部分を変更すれば大丈夫です。
このとき width や height, line-height の数字が違うと位置がズレてしまうので、同じ数字で揃えて下さい。
3. ボタンを丸くする
今度はトップに戻るボタンを丸くします。
以下のコードを追加すると、、、
#page-top a {border-radius: 50%;}
ボタンが丸くなりました ↓
四角から丸になるとだいぶ印象が変わりますね。
4. ボタンの中の矢印を大きくする
トップに戻るボタンの中には矢印のアイコンが使われていますが、実はこれは文字なので、font-size
で大きさを変更することが出来ます。
font-size のプロパティを追加すればお好みの大きさにできますが、ここでは30pxにしてみましょう。
(width
や height
、line-height
と合わせて使って下さい)
#page-top a {font-size: 30px;width: 30px;height: 30px;line-height: 30px;}
上のコードを追加すると、下の画像のようになります。
5. ボタンの位置を変更
最後のカスタマイズはボタンの位置の変更です。
以下のコードを style.css に追加すると、トップに戻るボタンが
「右端から30px、下端から30px」
の位置に固定されるようになります。
#page-top {right: 30px;bottom: 30px;}
別の位置で固定したい場合には、上のコードの値を変更すれば良いので、
例えば 右端から10px、下端から10px に固定する場合のコードは下のようになります。
#page-top {right: 10px;bottom: 10px;}
5-1. ここまでのコードをまとめると
ここまでのコードをまとめてみました。
手軽にできるので、よかったらお試し下さい!
#page-top {right: 30px;bottom: 30px;}#page-top a {opacity: 1;background-color: #333;font-size: 30px;width: 30px;height: 30px;line-height: 30px;border-radius: 50%;}#page-top a:hover {background-color: #555;}
今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。