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

どうも、こんにちはっ!おやクリ管理人のちゃぴ(@oyakocreate)です(゚∀三゚三∀゚)

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%;
}
ちゃぴ

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

スポンサーリンク

まとめ

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

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

ずんずん

あずの場合はカスタマイズしすぎて記事書けてなくない?

ちゃぴ

(ギクッ…)


最後までお付き合いいただきありがとうございます!ちゃぴ(@oyakocreate)でした♪

>WordPressテーマはTHE・THOR(ザ・トール)がおすすめ

WordPressテーマはTHE・THOR(ザ・トール)がおすすめ

当ブログで使用しているWordPressテーマは「THE THOR(ザ・トール)」です。

THE THOR(ザ・トール)」は機能が豊富で、記事を書く効率が格段にアップ。税込15,984円で何個のサイト・ブログで使用してもOK。

カスタマイズ知識がなくても、設定項目を1つずつ進めていくだけでおしゃれなブログ・サイトが作成できます。

無料・無期限・無制限でのアフターフォローが受けられるので、安心して使用できるイチオシの有料テーマです。

CTR IMG