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のスクロール広告が中途半端に表示される問題を解決!

スポンサード リンク

  関連記事

スマホ広告のnend(ネンド)
nend(ネンド)の成果報告 – eCPM公開

先日当サイトに導入してみたスマホスクロール型広告の「nend(ネンド)」ですが、 …

google adsense
Adsenseを誤って自己クリックした場合

Google Adsenseで誤って自己クリックしてしまいました、、、(誤クリッ …

入札方法「CPM」の配信量を増やしてAdSenseの収益をUP!

AdSenseのCPC収益とCPM収益の割合を公開で記載した通り、当サイトはCP …

WordpressのSEOプラグイン All in One SEO
WordPressで必須のSEOプラグイン- All in One SEO Pack

WordPressでサイトやブログを運営する上で必須のSEOプラグイン「All …

All in One SEOのバグ noindexがnonoindexに
“noindex”が”nonoindex”に – All in One SEO Packのバグ

WordPressのSEOプラグインAll in One SEO Packですが …

Google Analytics
Google Analyticsから自分のアクセスを除外する方法

多くのサイト・ブログで利用されているアクセス解析ツール“Google …

↑PageTop