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ページ非対応です。AMPページでは、このページのAMPバージョンのようなデザインになってしまいます。
AMPページでは普通のリストデザインになってしまうので、AMPページは非表示にする（[ st-no-amp][/st-no-amp]を使用）などの対応が必要です。
まとめ
AFFINGER5のスクロールナビのデザイン例をご紹介しました。ほかにもデザインは考えられますが、検索ユーザーはGoogleの「他の人はこちらも検索」のデザインに見慣れているので、あまり装飾し過ぎるのも良くないかと思います。
あと、プラグイン「AFFINGERタグ管理マネージャー」などを使用してABテストし、どのデザインが最適か？データを集計して最適化するのも良いでしょう。