THE・THOR(ザ・トール)の上へ戻るボタンを大きくするカスタマイズ

THE・THOR(ザ・トール)」の上へ戻るボタンが小さくてタップしにくいと感じたので、大きめにデザインを変更してみました。

CSSのコピペだけでできるので、「サイズが小さいな~」と感じている方はぜひ実装してみてください。

このカスタマイズは、くまさん(@Bearface18)のJINカスタマイズを元にTHE・THOR(ザ・トール)用に修正しています。

for JIN

WordPressテーマJINのちょっとしたカスタマイズを紹介します。今回はモバイル表示での上に戻るボタンを大きくする方…

スポンサーリンク

THE・THORの上へ戻るボタンをカスタマイズする前と後

パソコン表示

カスタマイズ前

カスタマイズ後

スマホ表示

カスタマイズ前

カスタマイズ後

今回のカスタマイズをすることで、THE・THOR(ザ・トール)の上へ戻るボタンはこのように変わります。

あずさ

これでタップしやすくなりました!

THE・THORの上へ戻るボタンをカスタマイズする方法

事前準備

  1. THE・THOR(ザ・トール)の子テーマを適用する
  2. ダッシュボード→外観→テーマの編集→(画面右側)style-user.cssにコードをコピペ

追記するCSSコード

ダッシュボード→外観→テーマの編集→(画面右側)style-user.cssに進み、以下のコードをコピペしてください。

/*--------------------------------------
  TOPへ戻るボタンを押しやすく
--------------------------------------*/
.bottomFooter__topBtn{
width: 60px;
height: 60px;
padding: 18px 6px 6px;
margin-right:10px;
margin-bottom:15px;
font-size: 1.2rem;
opacity: .6;
background: #fff!important;
color: #424242;
border: 2px solid #999;
border-radius:50%;
}
あずさ

これで上へ戻るボタンが大きくなり、タップしやすくなります。

まとめ

細かい部分を調整することで、トールがさらに良いテーマになりますね。

ユーザー目線になって、使いやすくカスタマイズすることも大切です。