ボクのアフィリエイト日記

ボクアフィ

AFFINGER5

AFFINGER5(WING)のスクロールナビのデザイン例とコード

AFFINGER5(WING)のスクロールナビのデザイン例とコード

WordPressテーマ「AFFINGER5(WING)」のver20190304βから追加された新機能「スクロールナビ」のデザイン例をメモします。

他の人はこちらも検索

「スクロールナビ」とは?

「スクロールナビ」とは、AFFINGER5のver20190304βから追加された新機能です。

検索結果に出てくる「他の人はこちらも検索」のような内部リンクを、目次の下などに配置し、離脱を防ぐ機能です。サイトのヘッダーに追加して、「スクロールできるメニューにする」などのアイデアもありますね。

基本的な使い方については、「ユーザーの離脱を改善するシンプルな2つのアイデア(ENJIROG)」をご参考にしてください。

スクロールナビのデザイン例

自分なりに考えたスクロールナビのデザイン例を、コードとともにメモしておきます。

通常デザイン

スクロールナビデフォルトのデザイン。

コードは次の通り。

<div id="st_listnavi_wrapper">
<ul class="st-sc-listnavi-box">
	<li class="st-sc-listnavi"><a href="#">ダミーリンク</a></li>
	<li class="st-sc-listnavi"><a href="#">ダミーリンク</a></li>
	<li class="st-sc-listnavi"><a href="#">ダミーリンク</a></li>
</ul>
</div>

テキストに虫メガネを追加

スクロールナビのテキストの前に「虫メガネ」を追加。

コードは次の通り。

<div id="st_listnavi_wrapper">
<ul class="st-sc-listnavi-box">
	<li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> ダミーリンク</a></li>
	<li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> ダミーリンク</a></li>
	<li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> ダミーリンク</a></li>
</ul>
</div>

見出しを追加

見出しとして「他の人はこちらも検索」を追加。

他の人はこちらも検索

コードは次の通り。

<p><span class="huto">他の人はこちらも検索</span></p>
<div id="st_listnavi_wrapper">
<ul class="st-sc-listnavi-box">
	<li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> ダミーリンク</a></li>
	<li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> ダミーリンク</a></li>
	<li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> ダミーリンク</a></li>
</ul>
</div>

背景色を追加

スクロールナビを「ボックスデザイン(タグ>ボックスデザイン>マイボックス)」で囲み、タイトルと背景色を追加。

コードは次の通り。※st-mybox直前の半角スペースは削除すること。

<p>[ st-mybox title="他の人はこちらも検索" fontawesome="" color="#000000" bordercolor="" bgcolor="#f9f9f9" borderwidth="0" borderradius="" titleweight="2" fontsize="" myclass="st-mybox-class" margin="5 5 0 0"]</p>
<div id="st_listnavi_wrapper">
<ul class="st-sc-listnavi-box">
	<li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> <span style="color: #0000ff;">ダミーリンク</span></a></li>
	<li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> <span style="color: #0000ff;">ダミーリンク</span></a></li>
	<li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> <span style="color: #0000ff;">ダミーリンク</span></a></li>
</ul>
</div>
<p>[/st-mybox]</p>

テキストのカラーを変更

スクロールナビのテキストを、テキストリンク色(青)に変更。

コードは次の通り。※st-mybox直前の半角スペースは削除すること。

<p>[ st-mybox title="他の人はこちらも検索" fontawesome="" color="#000000" bordercolor="" bgcolor="#f9f9f9" borderwidth="0" borderradius="" titleweight="2" fontsize="" myclass="st-mybox-class" margin="5 5 0 0"]</p>
<div id="st_listnavi_wrapper">
<ul class="st-sc-listnavi-box">
	<li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> <span style="color: #0000ff;">ダミーリンク</span></a></li>
	<li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> <span style="color: #0000ff;">ダミーリンク</span></a></li>
	<li class="st-sc-listnavi"><a href="#"><i class="fa fa-search" aria-hidden="true"></i> <span style="color: #0000ff;">ダミーリンク</span></a></li>
</ul>
</div>
<p>[/st-mybox]</p>

うまく表示できない(ただのリストデザイン)になっている場合は、「キャッシュ」を削除してください。

おまけ(リッチリザルト風)

リッチリザルト風に。ただし、AMPではデザイン崩壊。

コードは次の通り。

<div id="st_listnavi_wrapper">
<ul class="st-sc-listnavi-box box80">
	<li class="st-sc-listnavi"><img src="https://sample.jpg" alt="" /><br />
<a href="#">ココにタイトル</a></li>
	<li class="st-sc-listnavi"><img src="https://sample.jpg" alt="" /><br />
<a href="#">リッチリザルトっぽいね</a></li>
	<li class="st-sc-listnavi"><img src="https://sample.jpg" alt="" /><br />
<a href="#">画像はクリックできません</a></li>
</ul>
</div>

スクロールナビ使用の注意点

AMPページ非対応です。AMPページでは、このページのAMPバージョンのようなデザインになってしまいます。

AMPページでは普通のリストデザインになってしまうので、AMPページは非表示にする([ st-no-amp][/st-no-amp]を使用)などの対応が必要です。

まとめ

AFFINGER5のスクロールナビのデザイン例をご紹介しました。ほかにもデザインは考えられますが、検索ユーザーはGoogleの「他の人はこちらも検索」のデザインに見慣れているので、あまり装飾し過ぎるのも良くないかと思います。

あと、プラグイン「AFFINGERタグ管理マネージャー」などを使用してABテストし、どのデザインが最適か?データを集計して最適化するのも良いでしょう。

おすすめ記事

EWWW Image Optimizerの設定画面
画像を「EWWW Image Optimizer」でWebPに変換する方法

2019/5/17  

WordPressプラグイン「EWWW Image Optimizer」を使い、次世代画像フォーマット「WebP(ウェッピー)」に変換する方法を解説します。

AdSenseの「ページビュー」と「表示回数」の違い
AdSenseの「ページビュー」と「表示回数」の違い

2019/4/3  

AdSenseのレポートでよく見る「ページビュー」と「表示回数」の意味の違いを解説します。

プラグイン不要!Googleフォームでお問い合わせフォームを作る方法
プラグイン不要!Googleフォームでお問い合わせフォームを作る方法

2019/4/3  

WordPressで人気のプラグイン「Contact Form7」を利用せずに、Googleが提供する「Googleフォーム」を使ったお問い合わせフォームの作り方をご紹介します。

BOKU

このサイトのほか、いろんなブログをWordPressで作っている男。 テーマはAFFINGER5を愛用。

    -AFFINGER5

    Copyright© ボクアフィ , 2019 All Rights Reserved.