こんにちは、ジブリッシュマンブログのエイジです。
今回は、ブログ内のグローバルメニューのナビゲーションバー（メニューバー）の設置方法について説明していきたいと思います。
まずこちらがナビゲーションバー（メニューバー）になります⬇⬇⬇⬇⬇⬇⬇
ナビゲーションバー（メニューバー）
私のような雑記ブログだと、いろんな記事を上げているのでグローバルメニュー（メニューバー）でわかりやすくしたいなと思って分けてみました。
このようなコードを作られてるって人たちは、とてもすごいなと感じます。
私のような初心者では皆さんの記事を参考にさせていただき作らせていただきました。
ありがとうございます。
今回の記事でわかること
・ブログ内のグローバルメニューの設置方法
・ナビゲーションバー（メニューバー）の設置方法
・ナビゲーションバー（メニューバー）の階層下の方法
さらに私のブログで他の必要な絶対入れたほうがいいカスタマイズ１８選を下記の記事で紹介しています。
www.eijilife.com
『最新版』ブログのナビゲーションバーを階層下にする方法『Minimalism』はてなブログ
こちらのコードはゆきひーさんのブログ記事を参考にさせていただき使用させていただきました。そこから私なりに変更をしていきましたので、自分のスタイルに合ったカスタマイズをして行くのもいいかもしれません。
私と一緒だったり、ゆきひーさんと一緒だったりでもいいかもですね（笑）
デザインCSSにコードをコピペ
まずデザインCSSにコードをコピペしましょう。
コピペ場所は『デザイン』➡『カスタマイズ』➡『デザインCSS』に中に下のコードをコピペしましょう。
こちらのコードを入れてもまだ何も起こりませんので気にしないでください！！！
とりあえず入れたまま次に行きましょう！！！
#menu{
width: 100%;
margin: 10px auto;
background: #2f4f4f;
}
#menu-inner{
width: 100%;
height: 40px;
margin: 0 auto;
background: #2f4f4f;
}
#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;
}
#menu-content > li > a{
position: relative;
display: block;
height: 100%;
padding-left: 15px;
padding-right: 15px;
line-height: 40px;
background: #2f4f4f;
color: #fff;
font-size: 70%;
text-decoration: none;
z-index: 2;
}
#menu-content > li > a:hover{
background: #2f4f4f;
color: #fff;
}
#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: #2f4f4f;
color: #fff;
font-size: 70%;
text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
background: #2f4f4f;
color: #fff;
}
screen and (max-width:960px){ #menu-inner{
width: 100%;
height: auto;
}
#btn-content{text-align: right;} #menu-btn{
display: inline-block;
padding: 8px 15px;
margin: 5px;
cursor: pointer;
background: #2f4f4f; color: #fff; font-size: 70%;
}
#menu-content{
display: none;
width: 100%;
}
#menu-content > li{
width: 100%;
height: 40px;
float: none;
}
#menu-content > li > a{
width: 100%;
line-height: 40px;
padding: 0;
text-decoration: none;
}
#menu-content > li:hover > ul.second-content{display: none;}
#menu-content > li > a > .blogicon-chevron-down{display: none;}
}
ヘッダーの中にあるタイトル下にコピペ
次にヘッダーの中にあるタイトル下にコピペしましょう。
コピペ場所は『デザイン』➡『カスタマイズ』➡『ヘッダー』➡『タイトル』に中に下のコードをコピペしましょう。
<!DOCTYPE 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="https://www.eijilife.com/archive/category/Top">Top <i class="blogicon-home lg"></i></a>
<ul class="second-content">
<li><a href="２階層目のリンク"></a></li>
<li><a href="２階層目のリンク"></a></li>
<li><a href="２階層目のリンク"></a></li>
<li><a href="２階層目のリンク"></a></li>
</ul>
</li>
<li>
<a href="https://www.eijilife.com/archive/category/%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB">ライフスタイル <i class="blogicon-public lg"></i></a>
<ul class="second-content">
<li><a href="２階層目のリンク"></a></li>
<li><a href="２階層目のリンク"></a></li>
<li><a href="２階層目のリンク"></a></li>
<li><a href="２階層目のリンク"></a></li>
</ul>
</li>
<li>
<a href="https://www.eijilife.com/archive/category/English">iEnglish <i class="blogicon-pen lg"></i></a>
<ul class="second-content">
<li><a href="２階層目のリンク"></a></li>
<li><a href="２階層目のリンク"></a></li>
<li><a href="２階層目のリンク"></a></li>
<li><a href="２階層目のリンク"></a></li>
</ul>
</li>
<li>
<a href="https://www.eijilife.com/archive/category/E3
%83%96%E3%83%AD%E3%82%B0">ブログ <i class="blogicon-hatenablog lg"></i></a>
<ul class="second-content">
<li><a href="https://www.eijilife.com/archive/category/E3
%83%96%E3%83%AD%E3%82%B0-%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%AD%E3%82%B0">はてなブログ </a></li>
<li><a href="https://www.eijilife.com/archive/category/E3
%83%96%E3%83%AD%E3%82%B0-Experience">エクスペリエンス </a></li>
<li><a href="２階層目のリンク"></a></li>
<li><a href="２階層目のリンク"></a></li>
</ul>
</li>
<li>
<a href="https://www.eijilife.com/archive/category/%E5%96%86%E5%93%81%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC">商品レビュー <i class="blogicon-import lg"></i></a>
<ul class="second-content">
<li><a href="www.eijilife.com/archive/category/%E5%96%86%E5%93%81%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC-%E3%82%BB%E3%83%96%E3%83%B3%E3%82%A4%E3%83%AC%E3%83%96%E3%83%B3">セブンイレブン </a></li>
<li><a href="www.eijilife.com/archive/category/%E5%96%86%E5%93%81%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC-%E3%83%A6%E3%83%8B%E3%82%AF%E3%83%AD.%20GU">ユニクロ.GU </a></li>
<li><a href="www.eijilife.com/archive/category/%E5%96%86%E5%93%81%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC-%E3%82%AA%E3%82%B9%E3%82%B9%E3%83%A1">オススメ</a></li>
<li><a href="２階層目のリンク"></a></li>
</ul>
</li>
<li>
<a href="www.eijilife.com/archive/category/%E3%83%97%E3%83%AD%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB">プロフィール <i class="blogicon-user lg"></i></a>
<ul class="second-content">
<li><a href="２階層目のリンク"></a></li>
<li><a href="２階層目のリンク"></a></li>
<li><a href="２階層目のリンク"></a></li>
<li><a href="２階層目のリンク"></a></li>
</ul>
</li>
<li>
<a href="１階層目のリンク"> <i class="blogicon-chevron-down"></i></a>
<ul class="second-content">
<li><a href="２階層目のリンク"></a></li>
<li><a href="２階層目のリンク"></a></li>
<li><a href="２階層目のリンク"></a></li>
<li><a href="２階層目のリンク"></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;
if(win > p){
menuContent.show();
}else{
menuContent.hide();
}
});
});
</script>
階層下の細かい設定方法
まずコピペしたら、デザインCSSのコードの中に１〜１６の番号の横に名前が書いてあります。
そちらの記載されている所（背景色、幅、文字色）を変えることによって、ブログのカスタマイズが変わりますのでやってみましょう。
コードを変えて変わったかを確認しながらやると変わっていることがわかるので、チェックしていきましょう！！！
次にヘッダーのタイトル下にあるコードを変更方法を詳しく説明していきます。
いまの状態だと私のナビゲーションバーになってしまってますが、URLが違うのでちゃんと設定されてはいないでしょう。
なので、これから自分のブログに変えていきましょう！！！
<a href=" ① "> ② <i class=" ③ "></i></a>
<ul class="second-content">
<li><a href=" ④ "></a> ⑤ </li>
<li><a href=" ⑥ "></a> ⑤ </li>
<li><a href=" ⑥ "></a> ⑤ </li>
⑦<li><a href=" ⑥ "></a> ⑤ </li>
</ul>
</li>
<li>
① 上記の①は、はてなブログ内にあるカテゴリーからURLをコピーして貼り付ける。
自分のはてなブログのカテゴリー欄から、それぞれの場所をクリックしましょう。
私のでいうと最初はTopをクリック
Top をクリックした後に自分のブログが出てきます。そのブログの上にURLをコピーして①番にコピペしましょう！！！
私でいうhttps://www.eijilife.com/archive/category/Top の部分です。
② 上記の②は、ナビゲーションバーに乗せるカテゴリーを入れましょう。
Top ライフスタイル English ブログ 商品レビュー プロフィールみたいな感じで、自分にあったカテゴリーを入れましょう。
③ 上記の③は、好きなアイコンを入れることができる（アイコンなしでも大丈夫です。）
はてなブログでは、はてな自体でアイコンをいれることができるようになっています。なのでFont Awesomeなどを使わなくてもアイコンを使うことが出来るので、Font Awesomeを入れなくても大丈夫です。
<i class=“blogicon-home”></i></a>
こちらは私が使ってる家のアイコンになります。
この赤色の部分を変えることでいろんなアイコンに変更できます。
<i class=“blogicon-home lg”></i></a>
それにもしアイコンを少し大きくさせたい時は、lg を入れるだけで大きくすることが出来ます。
赤色の部分に入れるアイコンはかまさんの記事を参考にしてみてください。
はてなブログアイコン素材一覧127種と使い方 – かまさんちのぶろぐ
④ メインカテゴリーから子カテゴリーのURLをコピーして貼り付ける
こちらも①と一緒でカテゴリーの中からメインカテゴリーと子カテゴリーのURLをコピーしてコピペしてください。
私のでいうと下記の図でブログがメインカテゴリー、ブログ-はてなブログが子カテゴリーになります。
⑤ ③番と同じでアイコンを入れることができます。
⑥ もし２つ以上メインカテゴリーから子カテゴリーがある場合は、そのURLを入れる。
上記の私のブログで、カテゴリーのブログの所をポイントすると階層下します。
私は２つですが、商品レビューは３つになっています。
この階層下を２つ３つ４つと増やすことで、もっと細かく内容を分けることができます。
⑦ こちらのコードを増やすことによって <li><a href=“⑤”></a>④</li> 何回層にも増やすことも減らすこともできる。
最後にこちらのコードを<li><a href=“⑤”></a>④</li> 増やすことによって５個以上の子カテゴリーを作ることが出来ます。
減らす時は、コードを消すだけです。
まとめ
ブログカスタマイズでメニューを作るとそれなりのブログに変身したのではないでしょうか？
見栄えや読者の方達も読みたい記事を見つけやすくなるのではないでしょうか。
いろいろといじって見て、自分にあったカスタマイズができるといいですね。
こちらのグローバルメニューでナビゲーションバー(メニューバー)を作るには、それなりに時間がかかりますので、時間がある時に一気にやることをオススメします。
ゴチャゴチャしていてわからなくなってしまうかもしれないので（笑）
では、今回はこれで終わりです！！！
お疲れさまでした。
www.eijilife.com
コメント