ナビゲーションメニューの階層化｜はてなブログ（無料）
この度、運営しているブログを「ワードプレス」から「はてなブログ」に切り替えました。
そこで本記事では、はてなブログの無料バージョンで、どれだけのカスタマイズができるのか試してみたので、上手くいったものをお知らせします。
今回は、ナビゲーションメニューの階層化です‼️
作業の手順を、わかりやすくまとめましたので、ぜひチャレンジしてみて下さいね。
作業１．投稿した記事のカテゴリー付けを行う
通常は1つだけ付けていると思いますが、階層化するので2つ付けます。例えば、通常の「小遣い稼ぎ」に加えて、「小遣い稼ぎ-グログ」といった感じです。ハイフンは英数字半角で入れます。
作業２．パンくずリストの表示
管理画面→デザイン→工具マーク→記事→「パンくずリスト」にある、「記事ページにパンくずリストを表示する」にチェックを入れ「変更を保存する」をクリック。
作業３．デザインCSS
管理画面→デザイン→工具マーク→{}デザインCSSに以下をコピー＆テースト。
↓ ↓ ↓
/**ナビゲーション階層化**/
#menu{
width: 100%;
margin: 10px auto;
background: #f6bfbc;/*色*/
}
#menu-inner{
width: 1140px;/*幅*/
height: 40px;/*高さ*/
margin: 0 auto;
background: #f6bfbc;/*色*/
}
#menu-btn{display: none;}
#menu-content{
padding-left: 0;
margin: 0;
width: 100%;
height: 100%;
list-style-type: none;
}
#menu-content > li{
position: relative;
float: left;
height: 100%;
text-align: center;
width:25%;/*÷カテゴリー数*/
}
#menu-content > li > a{
position: relative;
display: block;
height: 100%;
width: 100%;/*幅*/
line-height: 40px;/*高さ*/
background: #f6bfbc;/*色*/
color: #000000;/*色*/
font-size: 70%;
text-decoration: none;
z-index: 2;
}
#menu-content > li > a:hover{
background: #f6bfbc;/*色*/
color: #000000;/*色*/
}
#menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;}
/*２階層目*/
#menu-content > li > ul.second-content{
visibility: hidden;
position: absolute;
top: 0;
margin: 0;
padding-left: 0;
list-style-type: none;
z-index: -1;
}
#menu-content > li:hover > ul.second-content{
visibility: visible;
top: 40px;/*高さ*/
z-index: 1;
transition: all .3s;
}
#menu-content > li > ul.second-content > li{
text-align: center;
width: 200px;/*幅*/
height: 40px;/*高さ*/
}
#menu-content > li > ul.second-content > li > a{
display: block;
line-height: 40px;/*高さ*/
background: #f6bfbc;/*色*/
color: #000000;/*色*/
font-size: 70%;
text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
background: #f6bfbc;/*色*/
color: #000000;/*色*/
}
作業４．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="● URL●/ラーメン">ラーメン <i class="blogicon-chevron-down"></i></a>
<ul class="second-content">
<li><a href="● URL●">ラーメン-神戸市</a></li>
<li><a href="● URL●">ラーメン-大阪市</a></li>
</ul>
</li>
<li>
<a href="● URL●">小遣い稼ぎ <i class="blogicon-chevron-down"></i></a>
<ul class="second-content">
<li><a href="● URL●">小遣い稼ぎ-YouTube</a>
</li>
<li><a href="● URL●">小遣い稼ぎ-ブログ</a>
</li>
</ul>
</li>
<li>
<a href="● URL●">デジモノ</a>
</li>
<li>
<a href="● URL●">時事 <i class="blogicon-chevron-down"></i></a>
<ul class="second-content">
<li><a href="● URL●">時事-新型コロナ</a></li>
<li><a href="● URL●">時事-観光地域づくり
</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で組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life
