画面右下に表示される『ページトップへ戻る』ボタンって必要ないと思いませんか？
スマホなら画面上端をタップすればページの先頭まで戻ることが可能、PCの場合もスクロールバーを使えば一瞬。そもそもページの最初まで戻る機会があまりありません。
なら外せばいいじゃんと思われるでしょうが、WordPressテーマによっては強制的に「ページトップへ戻るボタン」が表示されてしまいます。
ということで、CSSで非表示にしてみました。簡単なのでぜひ参考にしてください。
「ページトップへ戻る」ボタンを非表示にする
それでは早速取り掛かりましょう。
とはいっても、やることは簡単。クラス名を確認してCSSの”display:none”で削除するだけです。
デベロッパーツールでクラス名を確認
まずはChromeのデベロッパーツールを使って、ボタンのクラス名を確認しましょう。
ブラウザ右上の三点マークをクリック > その他のツール > デベロッパーツールを選択 > ツール内の左上のカーソルマークをクリック > トップへ戻るボタンにカーソルを合わせる
このクラス名は後ほど使うので、メモに取るなりして控えておきましょう。ちなみに、The Thorでは”.bottomFooter__topBtn”というクラス名でした。
CSSを作成
クラス名が確認出来たら、CSSを作ってスタイルシートに貼り付けましょう。ひな形は紹介するので、クラス名だけ書き換えてください。
また、PCで非表示にするかどうかはよく考えましょう。(PCでは比較的使える機能だと思います)
PC・スマホの両方で非表示にする
どのデバイスでも非表示にする場合は、以下のようなCSSを使用します。
.bottomFooter__topBtn { /*ここにクラス名*/
display:none; /* 非表示にする*/
}“.bottomFooter__topBtn”の部分を先ほどデベロッパーツールで調べたクラス名に書き換えてください。(The Thorを使用している方はそのままで大丈夫です)
モバイルだけ非表示にする
モバイル端末でだけ非表示にしたい場合は、メディアクエリで条件付けをしましょう。
/* モバイル端末でトップへ戻るボタンを非表示に */
@media only screen and (max-width: 480px){
.bottomFooter__topBtn { /*ここにクラス名*/
display:none; /*非表示に*/
}
}こちらも同じく “.bottomFooter__topBtn”の部分を対応したクラス名に書き換えてください。
また、タブレット端末でも非表示にしたい場合は、1行目の”480px”を”1024px”に変更しましょう。
消えれば成功
画面右下に何も表示されなくなれば成功です。お疲れさまでした。
あとがき：全てのカスタマイズの基本
今回はページトップへ戻るボタンを非表示にするというカスタマイズを行いました。
デベロッパーツールでクラス名を確認 → CSSで編集・修正
この流れはテーマをカスタマイズする上での基本となるので、覚えておきましょう。