>AFFINGER5AFFINGER5(WING)のスクロールナビのデザイン例とコード2019年3月5日WordPressテーマ「AFFINGER5(WING)」のver20190304βから追加された新機能「スクロールナビ」のデザイン例をメモします。AdSense「スクロールナビ」とは?「スクロールナビ」とは、AFFINGER5のver20190304βから追加された新機能です。検索結果に出てくる「他の人はこちらも検索」のような内部リンクを、目次の下などに配置し、離脱を防ぐ機能です。サイトのヘッダーに追加して、「スクロールできるメニューにする」などのアイデアもありますね。基本的な使い方については、「ユーザーの離脱を改善するシンプルな2つのアイデア(ENJIROG)」をご参考にしてください。自分なりに考えたスクロールナビのデザイン例を、コードとともにメモしておきます。通常デザインスクロールナビデフォルトのデザイン。ダミーリンクダミーリンクダミーリンクコードは次の通り。href="#">ダミーリンク</a></li></ul></div>テキストに虫メガネを追加スクロールナビのテキストの前に「虫メガネ」を追加。ダミーリンクダミーリンクダミーリンクコードは次の通り。見出しとして「他の人はこちらも検索」を追加。他の人はこちらも検索ダミーリンクダミーリンクダミーリンクコードは次の通り。ダミーリンク</a></li></ul></div>背景色を追加スクロールナビを「ボックスデザイン(タグ>ボックスデザイン>マイボックス)」で囲み、タイトルと背景色を追加。他の人はこちらも検索ダミーリンクダミーリンクダミーリンクコードは次の通り。※st-mybox直前の半角スペースは削除すること。#0000ff;">ダミーリンク</span></a></li></ul></div><p>[/st-mybox]</p>テキストのカラーを変更スクロールナビのテキストを、テキストリンク色(青)に変更。他の人はこちらも検索ダミーリンクダミーリンクダミーリンクコードは次の通り。※st-mybox直前の半角スペースは削除すること。#0000ff;">ダミーリンク</span></a></li></ul></div><p>[/st-mybox]</p>うまく表示できない(ただのリストデザイン)になっている場合は、「キャッシュ」を削除してください。おまけ(リッチリザルト風)リッチリザルト風に。AMPではデザイン崩壊。ココにタイトルリッチリザルトっぽいね画像はクリックできませんコードは次の通り。href="#">画像はクリックできません</a></li></ul></div>スクロールナビ使用の注意点AMPページ非対応です。AMPページでは、このページのAMPバージョンのようなデザインになってしまいます。st-no-amp][/st-no-amp]を使用)などの対応が必要です。まとめAFFINGER5のスクロールナビのデザイン例をご紹介しました。ほかにもデザインは考えられますが、検索ユーザーはGoogleの「他の人はこちらも検索」のデザインに見慣れているので、あまり装飾し過ぎるのも良くないかと思います。あと、プラグイン「AFFINGERタグ管理マネージャー」などを使用してABテストし、どのデザインが最適か?データを集計して最適化するのも良いでしょう。Optimizer」を使い、次世代画像フォーマット「WebP(ウェッピー)」に変換する方法を解説します。WordPressAdSenseの「ページビュー」と「表示回数」の違い2019/4/3AdSenseのレポートでよく見る「ページビュー」と「表示回数」の意味の違いを解説します。Form7」を利用せずに、Googleが提供する「Googleフォーム」を使ったお問い合わせフォームの作り方をご紹介します。プラグインBOKUこのサイトのほか、いろんなブログをWordPressで作っている男。テーマはAFFINGER5を愛用。BOKU関連記事AFFINGER52019/8/9AFFINGE5おすすめヘッダーカードのキャッチコピー表示方法AFFINGER5(WING)のver20190801βより、おすすめヘッダーカードにキャッチコピーを表示できるようになりました。キャッチコピーはどうすれば表示されるのか?設定方法を解説します。AFFINGER52019/8/9AFFINGER5ヘッダー用メニュー(横列)のタイトル属性の設定法AFFINGER5(WING)のver20190801βより、ヘッダー用メニュー(横列)が設定できるようになりました。ヘッダー用メニュー(横列)では、タイトル属性でサブテキストも表示できますが、このタイトル属性が表示されないことがあります。AFFINGER52019/5/17AFFINGER5に「この記事は約何分で読めます」を表示する方法WordPressテーマ「AFFINGER5(WING)」の記事上に、自動的に「この記事は約何分で読めます」と表示させるカスタマイズをご紹介します。AMP2019/3/17AFFINGER5のAMPにスティッキー広告(追尾広告)を表示させる方法WordPressテーマ「AFFINGER5(WING)」のAMPページにスティッキー広告を表示させる方法を解説。AFFINGER52019/3/14AFFINGER5の404ページのカスタマイズ方法とサンプルWordPressテーマ「AFFINGER5(WING)」では、ウィジェットから404ページをカスタマイズ可能です。AMP2019/3/17AFFINGER5(WING)のAMPページカスタマイズまとめWordPressテーマ「AFFINGER5(WING)」のAMPページのカスタマイズ例をまとめました。AMPは機能に制限がありますが、カスタマイズをすれば少しはマシになります。