こんにちは、ななです。
ブログを読んでると、ヘッダーにメニューがあって見やすいなーって思ってました。
てことで、グローバルメニューを設置しました。
ようやくできました!!!
ようやくというのは、一度設置したんですが、上手くいかなくて放置してました。
今回、友人のアドバイスにより、上手く表示ができたので、備忘録として残しておきます。
グローバルメニューとは?
手順
グロバーバルメニューとは?
サイトの上部にあるカテゴリー名を表示しているバーです。
これがあるかないかで、サイトの見やすさが全然違います。
興味があるジャンルにすぐに飛べるので、サイトの特徴もわかりやすいです。
まだ設置してない人は、いますぐにでも設置することをお勧めします★
手順
SHIROMAさんのブログを参考にさせてもらいました。
ありがとうございます。
- デザイン→カスタマイズ→ヘッダ→パンくずリストにチェックを付ける。
- PCとスマホはレスポンシブ対応にしておいてください。
- 記事の管理でカテゴリーを作る。
私の場合は趣味というカテゴリーの中にボードゲーム、ハンドメイド、将棋とありますが、まずは、
大元のカテゴリー趣味を作り、
趣味ーボードゲーム、趣味ーハンドメイド、趣味ー将棋と作ります。
記事にカテゴリーを振り分けます。例えばボードゲームの記事には、趣味と趣味ーボードゲームの二つのカテゴリーを設定します。ここはかなり重要なので、間違えないように気を付けましょう。
この後、上記のブログのコードを使わせてもらいます。
<!-- グローバルナビ --> <div id="trigger-point"> </div> <div id="global-menu"> <div id="mobile-head"> <div id="nav-toggle"> <div> <span></span> <span></span> <span></span> </div> </div> </div> <ul class="global-menu-list sub-list"> <li><a href="ここにリンク先のURL">項目</a> <ul class="sub-item"> <li><a href="ここにリンク先のURL">項目(サブ)</a></li> <li><a href="ここにリンク先のURL">項目(サブ)</a></li> <li><a href="ここにリンク先のURL">項目(サブ)</a></li> </ul> </li> <li><a href="ここにリンク先のURL">項目</a> <ul class="sub-item"> <li><a href="ここにリンク先のURL">項目(サブ)</a></li> <li><a href="ここにリンク先のURL">項目(サブ)</a></li> <li><a href="ここにリンク先のURL">項目(サブ)</a></li> </ul> </li> <li><a href="ここにリンク先のURL">項目</a> <ul class="sub-item"> <li><a href="ここにリンク先のURL">項目(サブ)</a></li> <li><a href="ここにリンク先のURL">項目(サブ)</a></li> <li><a href="ここにリンク先のURL">項目(サブ)</a></li> </ul> </li> <li><a href="ここにリンク先のURL">項目</a></li> <li><a href="ここにリンク先のURL">項目</a></li> </ul> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function (){ // 変数に代入 var $nav = $('#global-menu'); var $content = $('#content'); var $offsetTop = $('#trigger-point').offset().top; // 固定メニューの設定 function fixedNav() { if($(window).scrollTop() > $offsetTop){ $nav.addClass('fixed'); } else { $nav.removeClass('fixed'); } }; $(window).scroll(fixedNav); $('body').on('touchmove', fixedNav); // Toggle メニューの設定 $('#nav-toggle').click(function (){ $nav.toggleClass('open'); }); $('#content').click(function (){ if($nav.hasClass('open')){ $nav.removeClass('open'); } }) }); </script>
「ここにリンク先のURL」の部分と、「項目」の名前を書き換えて使ってください。
私が引っかかって先に進めなかったのが、リンク先のURLです。
これ、なんやねーーーーーーん。。。
どこやねーーーーーーーん。。。って事で、一向に先に進まなかったのですが、
URLは先ほどカテゴリーを作成した時のURLを指しています。
私の場合は、趣味のページを開きそのURLをコピペし、
ここにリンク先のURLにはめ込みます。項目は趣味になります。
サブのURLは同じように趣味ーボードゲームのカテゴリーのURLを
ここにリンク先のURLにはめ込みます。項目はボードゲームになります。
自分のサイトのに変更したら、全てをコピーし、
デザイン→カスタマイズ→デザインCSSに貼り付けます。
これで完成です。
まとめ
まずはカテゴリーを作る。コードの書き換えをする。書き換えの部分はURLと項目の部分。それらはカテゴリーから引っ張ってくる。