訪問者の回遊率を高める為には、内部リンクを効果的な位置に設置することが大切です。文章中に内部リンクを貼ったり、サイドバーにメニューを表示させたりします。
もうひとつ方法があって、グローバルナビを常に上部に表示させる方法があります。
グローバルナビを設置している場合は、通常はヘッダー下部にしているケースが多いと思います。
ページ下へスクロールしていくとヘッダーは見えなくなりますが、グローバルナビ部分をページ上部に固定させます。
header.phpとcssの2ヶ所だけの変更で簡単にナビを固定化
当サイトではすでに変更しましたが、とても簡単です。
方法はこちらのサイトを参考にさせてもらったのですが
》》 MK2-BLOG～西宮のWEBデザイナー日記
当サイトのテーマは「simplicity2」なので、simplicity2の場合の方法を記録しておきます。
「simplicity2」には子テーマが用意されているので、子テーマのフォルダ「simplicity2-child」にある「header-insert.php」と「style.css」を変更し、サーバーにアップロードします。
もし子テーマを使っていない場合には、子テーマをインストールしてから行って下さい。＊決して「simplicity2」の内容は変更しないようにしましょう。
「header-insert.php」にナビを固定させるコードを追加
「simplicity2-child」内の「header-insert.php」はディフォルトは以下のコードです。
<?php //ヘッダー部分にタグを挿入したいときは、このテンプレート挿入（ヘッダーに挿入する解析タグなど） //子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。 //例：<script type="text/javascript">解析コード</script> ?> <?php if (!is_user_logged_in()) : //ログインユーザーをカウントしたくない場合は //↓ここに挿入?> <?php endif; ?> <?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>
追記する場所は分かりやすく一番下にするといいと思います。
参考にしたサイトのコードで
var nav = $('.navi'),
の部分は、「simplicity2」はID属性なので
var nav = $('#navi'),
とします。
「header-insert.php」の変更はここだけです。
参考サイトはHTMLサイトの場合で書いていますので、<body>以降の部分は必要ありません。
「style.css」にナビを固定させるコードを追加
「simplicity2-child」内の「style.css」はディフォルトは以下のコードです。
@charset "UTF-8"; /*! Theme Name: Simplicity2 child Template: simplicity2 Version: 20161002 */ /* Simplicity子テーマ用のスタイルを書く */
ここに以下のコードを追記します。
/*ナビを固定*/
.fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}
これでおしまいです。
参考サイトではグローバルナビのスタイルを指定するコードも含めて記述されていますが、「simplicity2」では親テーマの「style.css」でグローバルナビのスタイルを指定しているので、上に書いた部分だけの追記でOKです。
おわりに
変更した二つのファイルをFTPクライアントでアップロードすると、グローバルナビが下の画像のように上部に固定されるようになります。
今回は「simplicity2」の場合のカスタマイズでしたが、他のテーマでもあまり変わらないと思います。
HTMLサイトは各ページの<head>内の追記と、CSSファイルの追記でグローバルナビの固定ができます。
「simplicity2」を使ってみたいという方は、Simplicityからダウンロードして下さい。
コメント