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

 

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

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

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

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

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

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

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

#参考ページ:AdsenseとKauliのeCPM比較

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

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

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

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

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

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

1)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>
<!-- ページトップへ戻る 終わり -->

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

2)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;
}

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

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

少しだけ目立つようになりました。

ページトップへ戻るリンクをカスタマイズして導線強化

以上で「ページトップへ戻るリンク」のカスタマイズを完了しました。

関連ページ:STINGER5のスクロール広告が中途半端に表示される問題を解決!

スポンサード リンク

  関連記事

google adsense
Google AdSenseの新広告「ページ単位の広告」を試してみました

Google AdSenseの新広告「ページ単位の広告」を試してみました。 ペー …

日本のCPMは安いのか?

インプレッション課金型広告で用いられる主要な指標である”CPM&#8 …

A8に登録されている色々なSEOサービス
「詳しくはこちら」リンクは非効率

非常に多くのWebサイトで「詳しくはこちら」「詳しくはコチラ」というテキストリン …

STINGER5とAll in One SEO PackでOGP設定する際はアイキャッチ画像のサイズに注意
STINGER5 × All in One SEO PackでOGPを設定する際は画像サイズに注意

WordPressの無料テーマであるSTINGER5 + SEOプラグインの&# …

WordPress Popular Postsのキャッシュクリア
WordPress Popular Posts の動作テストデータを削除する方法

人気記事を表示するWordpressのプラグイン”WordPress …

セッション・PV数の季節要因の大きさ

多かれ少なかれ、どのサイトでも起きる現象だと思いますが、当ブログは、セッション数 …

↑PageTop