・右下の矢印ボタンを消したい
・無駄な機能は省きたい
画面右下に表示される『ページトップへ戻る』ボタン(もしくは『先頭へ戻る』ボタン)って必要ないですよね？
少なくとも、先頭へ戻る機能が最初から備わっているスマホには不要です。
しかし、テーマによっては強制的に『ページトップへ戻る』が表示されてしまいます。
ということで、CSSで非表示にしてみました。
コピペで再現可能なので、ぜひ参考にしてください。
よければ覗いて行ってください
“ページトップへ戻る”を非表示にするCSS
とはいっても、やることは簡単です。
クラス名を確認→”display:none”で削除
これだけです。
デベロッパーツールでクラス名を確認
Chromeのデベロッパーツールでボタンのクラス名を確認しましょう。参考までに私の使用するThe Thorでは”.bottomFooter__topBtn”という名前でした。
クラス名が確認出来たら、以下のようなCSSを作って
・外観 > テーマ編集 > style-user.css
・外観 > カスタマイズ > 追加CSS
のどちらかに貼り付けましょう。
スマホだけ非表示にするかどうかはお好みでどうぞ。
(PCでは有用な機能だと思うので、オススメは『スマホだけ非表示』)
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はカスタマイズ性が非常に高いですが、微妙に痒い所に手が届かないことがたまにありますよね…
まだ作られて日が浅いテーマなので、今後のアップデートに期待です。
それではまた！
