STINGER5のページトップへ戻るリンクをカスタマイズ

2015/01/18

STINGER5の標準で実装されている、ページ右下の「ページトップへ戻るリンク」にお気付きですか？（ページをスクロールすると付いてきます）

実は私は気付くのに数週間かかりました、、、

恐らく使う環境（横幅など）の問題もあると思うのですが「ちょっと目立たないな」というのが私の判断です。

「ページトップへ戻るリンク」をカスタマイズした理由

そもそも、何故「ページトップへ戻るリンク」をカスタマイズしたか？についてです。

答えは、ページ下部まで進んだ際、次のアクションへ繋がる導線が足りない（力不足・実態として機能していない）という課題への一つの対策です。

私はSTINGER5が標準で実装している「スクロール広告」ウィジェットに長らくKauliの広告枠や楽天のモーションウィジェットを設置していたのですが、効果が低過ぎました。

＃参考ページ：AdsenseとKauliのeCPM比較

そして、余りフッターを大きくしたくない、という思いもあり、ページ下部まで進んだ際、次のアクションへ繋がる導線が足りないという結論に至り、ページトップへ戻る導線を目立たせることにしました。

なお、合わせて「スクロール広告」をジェットから広告を削除して、
・PV数がそこそこあって
・離脱率が低くて
・アフィリエイトの成果もそこそこある
などの複数の基準を勘案して「オススメページ」としてコンテンツ訴求に切り替えました。

ページトップへ戻るリンクのカスタマイズ方法

カスタマイズに当たっては、たかよしさんのstinger5「ページトップへ戻る」のカスタマイズを参考にさせて頂きました。

具体的には、
１）footer.phpを編集して「ページトップへ戻る」のテキスト情報を変更
２）style.cssを編集して「ページトップへ戻る」のデザイン（色、幅、透過度など）を変更
という手順です。

＃以下、バックアップを取っておく事をオススメします。

１）footer.phpを編集して「ページトップへ戻る」のテキスト情報を変更

footer.phpで以下のソースを編集します。

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

当サイトでは、ベタに「↑PageTop」というテキストにしました。そのため、

<div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div>

の<a>要素に”↑PageTop”を入れました。

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

ただ、これだと下図のように「↑」の左側に元々のアイコンが残ります。

そこで<a>要素のclass属性を削除してしまいます。

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

これでテキスト部分の準備完了です。

２）style.cssを編集して「ページトップへ戻る」のデザイン（色、幅、透過度など）を変更

次にデザイン要素を修正します。

style.cssの以下のソースを修正します。

/*--------------------------------
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;
}

通常時及びマウスオーバー時の背景色の変更は”background:”で変更します。
テキストの色は”color”です。
透過度は”opacity:”です。1.0に近づけると透過なしに近づきます。

最終的に以下のソースに修正しています。

/*--------------------------------
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.5;
	opacity: 0.5;
}
#page-top a:hover {
	text-decoration: none;
	background: #999;
	color: #fff;
}

すると下図のようになります。