グローバルメニューの設置と色変更
手引にも書いたのですが、こちらでも詳しく書きます。
共通作業:タイトル下に貼り付けるHTML
ダッシュボード>デザイン>カスタマイズ>ヘッダ>タイトル下に貼り付けるHTMLコードはこちら↓。
<div id="menu"> <div id="menu-inner"> <div id="btn-content"> <span id="menu-btn"><i class="blogicon-reorder"></i> MENU</span> </div> <ul id="menu-content"> <li> <a href="1階層目のリンク">カテゴリ名1</a> </li> <li> <a href="リンク">カテゴリ2</a> </li> <li> <a href="リンク">カテゴリ3</a> </li> <li> <a href="リンク">カテゴリ4</a></li> <li> <a href="1階層目のリンク">カテゴリ5 <i class="blogicon-chevron-down"></i></a> <ul class="second-content"> <li><a href="2階層目のリンク">カテゴリ5-1</a></li> <li><a href="2階層目のリンク">カテゴリ5-2</a></li> <li><a href="2階層目のリンク">カテゴリ5-3</a></li> <li><a href="2階層目のリンク">カテゴリ5-4</a></li> </ul> </li> </ul> </div> </div> <div style="clear:both"></div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(function(){ var menuBtn = $("#menu-btn"), menuContent = $("#menu-content"); menuBtn.click(function(){ menuContent.slideToggle(); }); $(window).resize(function(){ var win = $(window).width(), p = 960;//19 if(win > p){ menuContent.show(); }else{ menuContent.hide(); } }); }); </script>
この状態で、緑の横幅いっぱいのグローバルメニューが表示されます。
黒背景のグローバルメニューCSS
ここで色を変更するには例えば黒背景に白文字のCSSはこちら↓。
<!-- グローバルメニュー黒CSSここから --> #menu{ background: #303030; } #menu-inner{ background: #303030; } #menu-content > li > a{ background: #303030; color: #fff; } #menu-content > li > a:hover{ background: #303030; color: #fff; } #menu-content > li > ul.second-content > li > a{ background: #303030; color: #fff; } #menu-content > li > ul.second-content > li > a:hover{ background: #303030; color: #fff; } @media screen and (max-width:960px){/*19*/ #menu-btn{ background: #303030; color: #fff; } /*グローバルメニュー黒CSSここまで*/
白背景に黒文字のグローバルメニューCSS
白背景に等間隔で並べるには以下のCSSコードを追加して下さい。
/*グローバルメニュー白CSSここから*/ /*グローバルメニュー白背景等間隔CSSここから*/ #menu{ background: #fff; } #menu-inner{ background: #fff; } #menu-content > li { width: ○%; /*100÷メニューの項目数%*/ } #menu-content > li > a{ background: #fff; color: #303030; width: 100%; padding: 0; } #menu-content > li > a:hover{ background: #ddd; color: #303030; opacity:0.8; } /*2階層目*/ #menu-content > li > ul.second-content > li > a{ background: #fff; color: #303030; } #menu-content > li > ul.second-content > li > a:hover{ color: #303030; background-color: #fff; } /*******トグルメニュ*********/ @media screen and (max-width:960px){/*19*/ #menu-btn{ color: #303030; background: #fff; } /*グローバルメニュー白CSSここまで*/
メニューに表示するアイコンを変える
またカテゴリ名の頭にブログアイコンを表示するには>||||<をいれて下さい。
はてなブログで使えるアイコンは↓
shirokai.hatenablog.com
白背景CSSを適応させた後、ヘッダ>タイトル下に貼り付けたコードを以下のコードに入れ替えてます。
<div id="menu"> <div id="menu-inner"> <div id="btn-content"> <span id="menu-btn"><i class="blogicon-reorder"></i> MENU</span> </div> <ul id="menu-content"> <li> <a href="1階層目のリンク"><i class="blogicon-home"></i> カテゴリ1</a> </li> <li> <a href="1階層目のリンク"><i class="blogicon-setting"></i>カテゴリ2 </a> </li> <li> <a href="1階層目のリンク"><i class="blogicon-color"></i>カテゴリ3 |</a> </li> <li> <a href="1階層目のリンク"><i class="blogicon-list"></i>カテゴリ4 |</a> <ul class="second-content"> <li><a href="2階層目のリンク">カテゴリ4-1</a></li> <li><a href="2階層目のリンク">カテゴリ4-2</a></li> <li><a href="2階層目のリンク">カテゴリ4-3</a></li> <li><a href="2階層目のリンク">カテゴリ4-4</a></li> </ul> </li> </ul> </div> </div> <div style="clear:both"></div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(function(){ var menuBtn = $("#menu-btn"), menuContent = $("#menu-content"); menuBtn.click(function(){ menuContent.slideToggle(); }); $(window).resize(function(){ var win = $(window).width(), p = 960;//19 if(win > p){ menuContent.show(); }else{ menuContent.hide(); } }); }); </script>
こんな感じで表示されます。
詳しくはゆきひーさんの記事を参考にして下さい。
www.yukihy.com