『ページトップへ戻る』ボタンを非表示にする方法【CSS】

・『ページトップへ戻る』ボタンを消したい
・右下の矢印ボタンを消したい
・無駄な機能は省きたい

画面右下に表示される『ページトップへ戻る』ボタン(もしくは『先頭へ戻る』ボタン)って必要ないですよね？

少なくとも、先頭へ戻る機能が最初から備わっているスマホには不要です。

しかし、テーマによっては強制的に『ページトップへ戻る』が表示されてしまいます。

ということで、CSSで非表示にしてみました。
コピペで再現可能なので、ぜひ参考にしてください。

チータツ

ツイッターでは雑学やお役立ち情報を発信しています
よければ覗いて行ってください

“ページトップへ戻る”を非表示にするCSS

とはいっても、やることは簡単です。

クラス名を確認→”display:none”で削除

これだけです。

Chromeのデベロッパーツールでボタンのクラス名を確認しましょう。参考までに私の使用するThe Thorでは”.bottomFooter__topBtn”という名前でした。

クラス名が確認出来たら、以下のようなCSSを作って
・外観 > テーマ編集 > style-user.css
・外観 > カスタマイズ > 追加CSS
のどちらかに貼り付けましょう。

スマホだけ非表示にするかどうかはお好みでどうぞ。
(PCでは有用な機能だと思うので、オススメは『スマホだけ非表示』)

どの媒体でも非表示にする場合は、以下のようなCSSを使用します。

“.bottomFooter__topBtn”の部分は使用するテーマによって異なるかもしれないので、デベロッパーツールで確認して書き換えてください。

.bottomFooter__topBtn {  display:none; }

PCやタブレットでは表示して、スマホユーザーの時だけ非表示にするCSSです。

@media only screen and (max-width: 480px){   .bottomFooter__topBtn { display:none;  }}

“@media only screen and (max-width: px)”　は『メディアクエリ』という、画面サイズ毎に命令を指定できる便利な条件文なので、覚えておきましょう。

以下のように画面右下に何も表示されなければ成功です。
私はスマホだけ非表示にしています。

The Thorはカスタマイズ性が非常に高いですが、微妙に痒い所に手が届かないことがたまにありますよね…
まだ作られて日が浅いテーマなので、今後のアップデートに期待です。

それではまた！