当サイトではワードプレスの有料テーマ THE THOR を使用しています。
今回は THE THOR に標準で設定されている【 TOPに戻る 】ボタンをプチカスタマイズして使いやすくします。
このカスタマイズで出来ること
※カスタマイズは自己責任でお願いします。
通常のトップに戻るボタンは右下に四角いボタンで表示されています。それを以下のように変更します。
いたって普通な感じ
スマホとの一体感が凄い
はい、自己満足です。
THE THOR TOPに戻るボタン カスタマイズ
カスタマイズには追加cssにコードを追加します。
操作手順
外観 → カスタマイズ → 追加css
外観 → カスタマイズ → 追加css
追加するコードは以下の通り。
/*フッタトップに戻るボタン*/ .bottomFooter__topBtn { width: 100%; }
これだけで完了です。
追加する前に実働しているのが見たい!という人はこちらをご覧ください。
※リンク先のカスタマイズは変更している場合があります。
上記サイトも THE THOR を使用しています。
あとがき
この記事のカスタマイズは当サイトでも採用していますが、固定フッターを使用しているためスマホでは表示されません。PC閲覧時のみ表示されています。残念ながらPCのときはあまりインパクトがありません。参考サイトはスマホでも表示されているので是非ご覧ください。
固定フッターを使用していない人には見た目も、使い勝手も大きく変わるおすすめのカスタマイズです。
こちらもオススメ
THE THOR でサイドメニューの CLOSE ボタンをカスタマイズしました。 サイドメニューを閉じるにはサイドメニュー上部にあるCLOSEボタンを押すのが王道です。(メインカラムをタップして戻る事も出来る) […]