賢威7：トップに戻るボタンの位置を変更する方法

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

今回の記事では、

1. トップに戻るボタンを右寄せのまま位置を微調整
2. ボタンを左下に配置
3. スマホ・タブレット閲覧時のボタンの位置を調整

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

カスタマイズ後

カスタマイズ 1

↓ 画面右から10px、画面下から10pxの位置に変更（最初は20px、20pxの位置）

カスタマイズ 2

↓ トップに戻るボタンを画面左に移動

カスタマイズ 3

↓ スマホ・タブレットで閲覧時のみ、ボタンの位置を変更

[ad]

カスタマイズ1. 右寄せのまま位置を微調整

まずはトップに戻るボタンを右寄せにしたまま、位置を微調整する方法です。

親テーマ（賢威7本体）の base.css や子テーマの style.css など、お使いのCSSファイルに以下のコードを追加します。

p.page-top {
    right: 10px;
    bottom: 10px;
}

これで右寄せにしたまま、右から10px、下から10pxの位置に移動することができました。

ちなみに右から5pxにする場合や、下から30pxにする場合についても、上のコードの px 部分を編集すれば大丈夫です。

カスタマイズ2. トップに戻るボタンを左寄せ

次はトップに戻るボタンを画面左に移動してみましょう。

先ほどと同じように、お使いのCSSファイルに以下のコードを書き込みます。

p.page-top {
    left: 20px;
    bottom: 20px;
}

↓ コード編集後

カスタマイズ3. スマホ・タブレットサイズのボタンの位置を調整

カスタマイズの3つ目は、スマホ・タブレットサイズのみ、ボタンの位置を調整する方法です。
（※ PCサイズのボタンの位置は同じままになります）

このカスタマイズについては、スマホ・タブレットサイズのみCSSを編集したいので、rwd.css にコードを追加すると良いかもしれません。
（カスタマイズ関係は base.css にまとめて書くというのも良いと思います）

お好みのCSSファイルに以下のコードを追加します。

@media only screen and (max-width : 736px){
    p.page-top {
        right: 10px;
        bottom: 10px;
    }
}

↓　横幅が736px以下のときにトップに戻るボタンの位置を調整（PCサイズは同じ位置）

トップに戻るボタンの大きさを変えるには？

カスタマイズをしていると、トップに戻るボタンの大きさを変更したい場合もあるかもしれません。

実はこのトップに戻るボタンは画像でできているので、トップに戻るボタンの大きさを変えるには、画像サイズを変えればいいんです。

もちろんそういうカスタマイズはCSSでも出来ますが、かなり詳細な指定をしなければならないので、大元の部分である footer.php を変えておくのがオススメです。
（詳細な指定をし過ぎると後で大変になりやすい）

footer.php の23行目付近に以下のコードがあるので、

// 「トップに戻る」画像を表示
<img class="over" src="<?php bloginfo('template_url'); ?>/images/common/page-top_off.png" width="80" height="80" alt="ページの先頭へ">

この中の width や height を編集すれば、お好みの大きさにすることができます。

// 「トップに戻る」画像を表示
<img ... width="横幅" height="縦幅" ...>

↓ カスタマイズ前

↓　カスタマイズ後

詳しい内容については以前書いた記事があるので、よかったら参考にして下さい。

「トップに戻る」ボタンをカスタマイズする方法：賢威7

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