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

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

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

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

Before（変更前）

パソコン

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

スマホ（iPhone6）

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

After（変更後）

パソコン

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

スマホ（iPhone6）

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

いざ、カスタマイズ！

編集するファイル

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

・footer.php
・style.css

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

footer.phpの編集方法

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

<footer id="footer">
  <h3>
    <?php if (is_home()) { ?>
    <?php bloginfo( 'name' ); ?>
    <?php } else { ?>
    <?php wp_title(''); ?>
    <?php } ?>
  </h3>
  <p class="descr">
    <?php bloginfo('description'); ?>
  </p>
  <p class="copy">Copyright&copy;
    <?php bloginfo('name');?>
    ,
    <?php the_date('Y');?>
    All Rights Reserved.</p>
</footer>
</div>
<!-- /#wrapper --> 
<!-- ページトップへ戻る -->
<div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div>
<!-- ページトップへ戻る　終わり -->
<?php  wp_enqueue_script('base',get_bloginfo('template_url') . '/js/base.js', array()); ?>

<?php if(is_mobile()) { //PCのみ追尾広告のjs読み込み ?>
<?php } else { ?>
<?php  wp_enqueue_script('scroll',get_bloginfo('template_url') . '/js/scroll.js', array()); ?>
<?php } ?>

<?php wp_footer(); ?>
</body></html>

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

<!-- ページトップへ戻る -->
<div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div>
<!-- ページトップへ戻る　終わり -->

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

<!-- /#wrapper --> 
<!-- ページトップへ戻る -->
<div id="page-top"><a href="#wrapper">↑<br>１番上へ</a></div>
<!-- ページトップへ戻る　終わり -->

style.phpの編集方法

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

/*--------------------------------
PAGE TOP
---------------------------------*/
#page-top {
	position: fixed;
	z-index: 9999;
	bottom: 20px;
	right: 0px;
	font-size: 12px;
}
#page-top a {
	background: #665e53;
	text-decoration: none;
	color: #fff;
	padding: 10px;
	text-align: center;
	display: block;
	-moz-opacity: 0.3;
	opacity: 0.3;
}
#page-top a:hover {
	text-decoration: none;
	background: #999;
	color: #fff;
}

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

/*--------------------------------
PAGE TOP
---------------------------------*/
#page-top {
	position: fixed;
	z-index: 9999;
	bottom: 20px;
	right: 0px;
	font-size: 12px;
}
#page-top a {
	background: #32CCB6;	/* #665e53から#32CCB6に変更 */
	border-radius: 9px;		/* 角丸にするためコード追加 */
	text-decoration: none;
	color: #fff;
	padding: 10px;
	text-align: center;
	display: block;
	-moz-opacity: 0.7;	/* 0.3から0.7に変更 */
	opacity: 0.7;		/* 0.3から0.7に変更 */
}
#page-top a:hover {
	text-decoration: none;
	background: #32CCB6;	/* #999から#32CCB6に変更 */
	color: #fff;
}

変更してみて

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

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

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

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