Stinger7：トップに戻るボタンをカスタマイズする方法

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

つい先日、無料WordPressテーマ：Stinger7の正式版が公開されましたね。

細かいところはあまり見れていませんけど、管理画面からできるカスタマイズが増えた上に Page Speed Insights のスコアもかなり上がったようです。
今後更に Stingerユーザーが増えそうですね。

今回の記事では、そんな無料WordPressテーマ：Stinger7の「トップに戻る」ボタンをカスタマイズする方法を紹介したいと思います。

カスタマイズと言っても色々あると思いますが、ここでは

トップに戻るボタンの色を変更
ボタンの大きさを変更
ボタンを丸くする
矢印を大きくする
ボタンの位置を変更

という5つのカスタマイズをご紹介します。

1 カスタマイズ前
2 カスタマイズ後
3 1. ボタンの色を変える
- 3.1 1-1. マウスオーバー時の色を変えるには
4 2. ボタンの大きさを変える
5 3. ボタンを丸くする
6 4. ボタンの中の矢印を大きくする
7 5. ボタンの位置を変更
- 7.1 5-1. ここまでのコードをまとめると

カスタマイズ前

↓ 画面の右下（ブラウザの右端から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;
}

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。