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; }
すると下図のようになります。
少しだけ目立つようになりました。
以上で「ページトップへ戻るリンク」のカスタマイズを完了しました。
関連記事
-
-
Google Analyticsから自分のアクセスを除外する方法
多くのサイト・ブログで利用されているアクセス解析ツール“Google …
-
-
STINGER5のスクロール広告が中途半端に表示される問題を解決!
WordPressの無料テーマであるSTINGER5を利用させて頂いているのです …
-
-
WordPressのスタイルシート(CSS)を編集しても反映されない場合
WordPressのテーマのスタイルシート(CSS)を編集しても表示に変化がない …
-
-
正解が分からないSEOは怖い!
SEOの正解は誰にもわかりません。 理由は簡単で、Googleなどの検索エンジ …
-
-
STINGER5でnend(ネンド)が表示されない場合の解決策
スマートフォン広告の「nend」を当ブログにも試験的に採用してみました。 いわゆ …