*

大好きなガジェット、ゲーム、写真、映画、ブログ運営などの情報をお届けする、くねおのライフログブログ

STINGER5の「ページトップへ戻る」ボタンの色やサイズを変えて、角丸のボタンにカスタマイズ

   

WordPressで愛用しているテーマ「STINGER5」のページトップへ戻るボタンがちょっと小さいので、カスタマイズすることにしました。

画面の下までスクロールすると表示されるちょっと特殊なボタンなので、カスタマイズが難しいんじゃないかなと思っていたのですが、さすがSTINGER5。

コードを少しいじるだけで簡単に変更は出来ましたので、カスタマイズの方法を備忘録として記します。

 

Before(変更前)

パソコン

マウス操作で難なく押せますが、ボタンの大きさがちょっと小さく、色もグレーで目立ちません。

カスタマイズ前のパソコンの画面での「トップページへ戻る」ボタン

 

スマホ(iPhone6)

ボタン自体が非常に小さいので、タップするのが若干難しく感じます。

カスタマイズ前のスマホ(iPhone6)の画面での「トップページへ戻る」ボタン

 

After(変更後)

パソコン

色を付けたので、目立つようになりました。「TOPへ戻る」、「ページトップへ」、「↑PAGE TOP」など文言に迷いましたが、一番シンプルで分かりやすい日本語の「1番上へ」にしました。

カスタマイズ後のパソコンの画面での「トップページへ戻る」ボタン

 

スマホ(iPhone6)

ボタンが大きくなり、非常に押しやすくなりました。また、透過させてあるので、記事を読む時に邪魔になることもありません。

カスタマイズ後のスマホ(iPhone6)の画面での「トップページへ戻る」ボタン

 

いざ、カスタマイズ!

編集するファイル

「トップページへ戻る」ボタンのカスタマイズには子テーマ内の以下の2つのファイルを編集します。

footer.php
style.css

子テーマについては、以下を参照してください。
過去記事:STINGER5テーマのカスタマイズ準備として子テーマを作る

 

footer.phpの編集方法

STINGER5のテーマフォルダ「stinger5ver20150505」内からそのままfooter.phpをコピーして子テーマに入れているのであれば、以下のような記述になっているはずです。

 

この中で注目すべき部分はココ。

 

これを以下のように変更しました。

 

style.phpの編集方法

こちらもSTINGER5のオリジナルテーマフォルダからstyle.phpをコピーしてきているのであれば、下の方にこんな記述の箇所があるはずです。

 

これを以下のように変更しました。

 

変更してみて

「ページトップへ戻る」のボタンは文章の長い記事には、絶対必要ですね。

iPhoneだとブラウザの一番上の部分をタップすれば戻れますがパソコンから見に来ていただいている方もいます。

僕も他の人のブログを見る時に「トップページへ戻る」ボタンが見やすいブログは自然と好感を持ちます。

読んで頂く方に対して、地味ではありますが、このように細かい配慮をすることは大切ですね。

 

 - ブログ運営 , ,

スポンサーリンク


1番上へ