Stinger

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

stinger7-thumbnail

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

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

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

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

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

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

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

カスタマイズ前

↓ 画面の右下(ブラウザの右端から0px、下端から20pxの位置)に表示されている状態

stinger7-goto-top-button-before

カスタマイズ後

カスタマイズ 1

↓ トップに戻るボタンの色を黒(#333)に変更

stinger7-goto-top-button-after-1
カスタマイズ 2

↓ ボタンの大きさを変更

stinger7-goto-top-button-after-2-2
カスタマイズ 3

↓ ボタンを丸くする

stinger7-goto-top-button-after-3-2
カスタマイズ 4

↓ ボタンに表示される矢印(のサイズ)を大きくする

stinger7-goto-top-button-after-6
カスタマイズ 5

↓ ボタンの位置(固定する位置)を変更

stinger7-goto-top-button-after-5

[ad]

1. ボタンの色を変える

Stinger7では子テーマも配布されているので、ここでは子テーマを使ってカスタマイズしていきたいと思います。

まずはトップに戻るボタンの色を変更していきます。

以下のコードを style.css ファイルに追加すると、、、

#page-top a {
    opacity: 1;
    background-color: #333;
}

ボタンの色が黒(#333)になります。

ここでは色コードが#333の黒にしましたが、お好みの色にする場合には background-color: #色コード; の部分を変更して下さい。

stinger7-goto-top-button-after-1

矢印の色を変えるには、下のように 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ずつ大きくなりました。

stinger7-goto-top-button-after-2-2

もう少し大きく(小さく)したいという場合には、width: ○○;height: ○○px; などの○○部分を変更すれば大丈夫です。
このとき width や height, line-height の数字が違うと位置がズレてしまうので、同じ数字で揃えて下さい。

3. ボタンを丸くする

今度はトップに戻るボタンを丸くします。

以下のコードを追加すると、、、

#page-top a {
    border-radius: 50%;
}

ボタンが丸くなりました ↓ 
四角から丸になるとだいぶ印象が変わりますね。

stinger7-goto-top-button-after-3-2

4. ボタンの中の矢印を大きくする

トップに戻るボタンの中には矢印のアイコンが使われていますが、実はこれは文字なので、font-size で大きさを変更することが出来ます。

font-size のプロパティを追加すればお好みの大きさにできますが、ここでは30pxにしてみましょう。
widthheightline-height と合わせて使って下さい)

#page-top a {
    font-size: 30px;
    width: 30px;
    height: 30px;
    line-height: 30px;
}

上のコードを追加すると、下の画像のようになります。

stinger7-goto-top-button-after-6

5. ボタンの位置を変更

最後のカスタマイズはボタンの位置の変更です。

以下のコードを style.css に追加すると、トップに戻るボタンが
「右端から30px、下端から30px」
の位置に固定されるようになります。

#page-top {
    right: 30px;
    bottom: 30px;
}
stinger7-goto-top-button-after-5

別の位置で固定したい場合には、上のコードの値を変更すれば良いので、

例えば 右端から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;
}

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