THE THOR ザ・トール 【 TOPに戻る 】ボタンを使いやすく

当サイトではワードプレスの有料テーマ THE THOR を使用しています。

 

 

今回は THE THOR に標準で設定されている【 TOPに戻る 】ボタンをプチカスタマイズして使いやすくします。

 

 

このカスタマイズで出来ること

 

※カスタマイズは自己責任でお願いします。

 

通常のトップに戻るボタンは右下に四角いボタンで表示されています。それを以下のように変更します。

 

 

カスタマイズ前 TOPに戻る

いたって普通な感じ

 

 

カスタマイズ後 TOPに戻る

スマホとの一体感が凄い

 

 

はい、自己満足です。

 

THE THOR TOPに戻るボタン カスタマイズ

 

カスタマイズには追加cssにコードを追加します。

 

 

操作手順
外観 → カスタマイズ → 追加css
追加するコードは以下の通り。
/*フッタトップに戻るボタン*/
.bottomFooter__topBtn {
    width: 100%;
}

 

 

これだけで完了です。

 

 

追加する前に実働しているのが見たい!という人はこちらをご覧ください。
※リンク先のカスタマイズは変更している場合があります。

 

https://501.karaagebow.com

 

上記サイトも THE THOR を使用しています。

 

あとがき

この記事のカスタマイズは当サイトでも採用していますが、固定フッターを使用しているためスマホでは表示されません。PC閲覧時のみ表示されています。残念ながらPCのときはあまりインパクトがありません。参考サイトはスマホでも表示されているので是非ご覧ください。

 

 

固定フッターを使用していない人には見た目も、使い勝手も大きく変わるおすすめのカスタマイズです。

 

 

こちらもオススメ

THE THOR のサイドメニューを利用しています。 サイドメニューを閉じるにはサイドメニュー上部にあるCLOSEボタンを押すのが王道です。(メインカラムをタップして戻る事も出来る)この動作がやりづらかったのでボタンの位置を変更しまし[…]

 

 

THE THOR TOPに戻るボタン
呟くのよ・・・私の棒ストが