ブログの使い勝手は良いほうが読者さまには親切で、多くのページを見てもらえるというものです。その策の1つがグローバルナビを常に表示するというものです。その方法についてまとめるとともに、落とし穴についても述べています。この記述はWordPressを使用していて、simlicity2というテーマを選択している人に適用できます。また、変更前後のPV数などの分析も行っています。
※2018年10月28日にソースコードをコピペ容易な形式に修正しました。
※2018年11月11日に変更前後のPV数などの分析を追加しています。
グローバルナビと固定するメリット
グローバルナビ(以下、グローバルナビゲーションのことをグローバルナビと記します)とは何でしょう？あれこれ説明するよりも実物をご覧いただいたほうがより良いので、画面を示します。
図1. グローバルナビの実物例
グローバルナビの実物例を示します(図1)。黒い四角で囲んだ部分のことです。よくあるページ上部のナビゲーションですね。各カテゴリーに分けられて、そのカテゴリーに分類されたページ一覧が表示されているものです。
図2. 中分類も示される
このように、大カテゴリーの中の中分類も示されます。弊サイトでは、(執筆時点では)「18年GW中欧鉄道旅行記」というカテゴリーは「旅行記」という大分類に属しますが、その中分類も表示されます。このように、グローバルナビはブログにどのような記事があるのかということを読者さまにお見せする上で重要な役割を担っています。
図3. ページを読み込んだ人にはグローバルナビが表示されずに不親切
しかし、通常の設定ではグローバルナビはページの最上部に表示されるだけです。このため、ページをしっかり読んでくれた人はブログの構造がわからず、不親切です(図3)。これではやさしー私というPRができなくなってしまいます。
図4. ページ下部でもグローバルナビが表示された
このようにページ下部でもグローバルナビが表示されると、次のページの見当も付けやすくなるかもしれません(図4)。そこで、ここでは、ページ上部にグローバルナビが固定されるようなカスタマイズを紹介しましょう。
グローバルナビの位置をカスタマイズ
ということで、実際の方法を紹介します。考えかたは、ある程度以上スクロールした場合には、上部に固定するようにするというものです。具体的には、PHPやCSSを編集します。CSSとは、レイアウトなどを決めるためのおまじない、PHPはページの表示順などの動作を考えるためのおまじないと考えましょう。既存のおまじないを書きかえて、新しい処理をしてもらうのです。
図5. 編集画面へのいきかた
PHPやCSSを編集と言いましたが、いきなりこのように言われても困ります。具体的には、外観→テーマの編集という領域をクリックします。右に多くの英語が出てきてうんざりしますが、私たちが触るのは2つだけです。それ以外は今回は触れません。おまじないを下手に変えるとこわそうなので、極力いじらない！これがモットーです。
header-insert.phpを改変する
まず、header-insert.phpと書かれた領域をクリックし、PHPの編集画面にアクセスします。よくわからない言語が書いていますが、そこは無視しましょう。以下の文字列をコピーします。
- <?php //ナビを固定 ?>
- <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
- <script type="text/javascript">
- jQuery(function($) {
- var nav = $('#navi'),
- offset = nav.offset();
- $(window).scroll(function () {
- if($(window).scrollTop() > offset.top) {
- nav.addClass('fixed');
- } else {
- nav.removeClass('fixed');
- }
- });
- });
- </script>
以下の画面のように貼り付けるのです。
図6. CSSの編集(1)
style.cssにナビを固定
以上の操作でスクロールした場合は別の挙動をするようになります。この他に、style.cssにナビを固定する設定を行います。
- /*
- 以下はグローバルナビカスタマイズで使用
- */
- /*ナビを固定*/
- .fixed {
- position: fixed;
- top: 0;
- width: 100%;
- z-index: 10000;
- }
- /*
- これでカスタマイズ終了*/
これでおしまいです。なお、この処理を教えていただいたサイトがあります。
一番上に固定するというワナ
以上の内容であれば、リンク先の通りです。私が述べたいのは、「一番上に固定する」というワードで探すと、とんでもないワナに引っかかることがわかったため、これを書きたかったのです。
別のサイトでは、一番上に表示するようにしました！と書いてありました。詳細な説明はリンク先に委ねます。私はうまくいかなかった方法の詳細までは解説しないのです。私が同じような処理をすると、うまくいきませんでした。
図7. グローバルナビにサイト名が隠された
このように、グローバルナビがサイト名の上に重なってしまい、なんとも見にくい状態になってしまいました。そのため、この方法は却下です。そのため、上に示したやりかたを採用しました。
モバイルへの適用
※9月3日追加
モバイルにも同様の仕様を導入いたしました(写真1)。実は、CSSをいじる必要がなく、設定画面の設定を変更するだけです。そのため、パソコンよりも気楽です。
写真1. モバイルにも常にメニューが表示される
このように、常に画面下にグローバルナビ(写真1ではメニューと表示)などを表示されるようにしました。この手順を示します。
図8. カスタマイズ画面へのアクセス
まず、管理画面で外観→カスタマイズを選択します(図8)。
図9. 完全レスポンス表示を有効にしない
レイアウト(全体・リスト)の項目を選択すると、このような画面が登場します(図9)。完全レスポンス表示を有効にしないようにします。これが有効になっていると、この先の手順ができなくなるための措置です。
図10. レイアウト(モバイル)の設定方法
次に、レイアウト(モバイル)の項目を選択します。すると、このような画面が登場します(図10)。ここで枠で囲った4つのどれかを選択します。すると、画面をスクロールするのを追いかけるようにメニュー画面も動きます。私は、小さな画面に上にあるとウザイだろう理由で下に表示させるようにしました。上で設定しようとしたら、設定できなかったのは秘密。このようにして、弊サイトの回遊性が少し上がりました。
グローバルナビゲーションの活用度合いの変化
実際にどの程度活用されているのかということを数字で判断しましょう。私は施策の前後での効果を判定するのに、施策実施前の28日と施策実施後の28日で探ることにしています。月単位だと30日だったり31日だったりで絶対数が異なります。また、30日だと曜日の配列で、曜日の影響が大きい場合には、曜日の影響が発生してしまいます。そのため、あえて30日ではなく、28日にしています。また、9/2にパソコンのページを、9/3にモバイルのページをそれぞれ変更していますから、効果測定の期間に9/2と9/3を入れるのは適切ではないでしょう。
変更前：カテゴリページの表示数917(32.8回/日)
変更後：カテゴリページの表示数978(34.9回/日)
この前後でカテゴリページの表示数は+7%とそれなりに効果はあります。しかし、思ったよりも効果が低いのは、モバイルページでグローバルナビゲーションの表示方法が直感的にわかりにくいためでしょう。なお、全体のPV数は変更前後で-0.61%とほぼ同じです(この程度であれば誤差でしょう)。つまり、この施策によってカテゴリページを表示しやすくなったものの、PV数はそこまで変化しないこともわかりました。