Gibberish Man

経験から得たいろいろなおトク情報発信できたら良いな〜

『2022年』ブログのナビゲーションバーを階層下にする方法『Minimalism』はてなブログ


f:id:mynameiseiji:20220113211332j:image
こんにちは、ジブリッシュマンブログのエイジです。

 

今回は、ブログ内のグローバルメニューのナビゲーションバー(メニューバー)の設置方法について説明していきたいと思います。

 

まずこちらがナビゲーションバー(メニューバー)になります⬇⬇⬇⬇⬇⬇⬇

f:id:mynameiseiji:20220109063831p:plain

ナビゲーションバー(メニューバー)

 

私のような雑記ブログだと、いろんな記事を上げているのでグローバルメニュー(メニューバー)でわかりやすくしたいなと思って分けてみました。

 

このようなコードを作られてるって人たちは、とてもすごいなと感じます。

私のような初心者では皆さんの記事を参考にさせていただき作らせていただきました。

ありがとうございます。

 

 

今回の記事でわかること

・ブログ内のグローバルメニューの設置方法

・ナビゲーションバー(メニューバー)の設置方法

・ナビゲーションバー(メニューバー)の階層下の方法

 

 

『最新版』ブログのナビゲーションバーを階層下にする方法『Minimalism』はてなブログ

 

こちらのコードはゆきひーさんのブログ記事を参考にさせていただき使用させていただきました。そこから私なりに変更をしていきましたので、自分のスタイルに合ったカスタマイズをして行くのもいいかもしれません。

 

私と一緒だったり、ゆきひーさんと一緒だったりでもいいかもですね(笑)

 

 

デザインCSSにコードをコピペ

まずデザインCSSにコードをコピペしましょう。

 

コピペ場所は『デザイン』➡『カスタマイズ』➡『デザインCSS』に中に下のコードをコピペしましょう。

 

こちらのコードを入れてもまだ何も起こりませんので気にしないでください!!!

とりあえず入れたまま次に行きましょう!!!

 

/*****グローバルメニュー****/
#menu{
    width: 100%;
    margin: 10px auto;
    background: #2f4f4f;/*7メニュー全体の外側の背景色*/
}
#menu-inner{
    width: 100%;/*1メニュー全体の横幅*/
    height: 40px;/*2メニュー全体の縦幅*/
    margin: 0 auto;
    background: #2f4f4f;/*8メニュー全体の内側の背景色*/
}
#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;/*3親リンク.カテゴリー1の横の余白*/
    padding-right: 15px;/*3親リンク.カテゴリー1の横の余白*/
    line-height: 40px;/*2メニュー全体の縦幅*/
    background: #2f4f4f;/*9親リンクの背景色*/
    color: #fff;/*10親リンクの文字色*/
    font-size: 70%;
    text-decoration: none;
    z-index: 2;
}
#menu-content > li > a:hover{
    background: #2f4f4f;/*11親リンクホバーの背景色*/
    color: #fff;/*12親リンクホバーの文字色*/
}
#menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;}
/*2階層目*/
#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;/*2メニュー全体の縦幅*/
    z-index: 1;
    transition: all .3s;
}
#menu-content > li > ul.second-content > li{
    text-align: center;
    width: 200px;/*4子リンクの横幅*/
    height: 40px;/*5子リンクの縦幅*/
}
#menu-content > li > ul.second-content > li > a{
    display: block;
    line-height: 40px;/*5子リンクの縦幅*/
    background: #2f4f4f;/*13子リンクの背景色*/
    color: #fff;/*14子リンクの文字色*/
    font-size: 70%;
    text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
    background: #2f4f4f;/*15子リンクのホバーの背景色*/
    color: #fff;/*16子リンクのホバーの文字色*/
}
/*******トグルメニュ*********/
@media 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;/*6トグルメニューのリンクの縦幅*/
    float: none;
}
#menu-content > li > a{
    width: 100%;
    line-height: 40px;/*6トグルメニューのリンクの縦幅*/
    padding: 0;
    text-decoration: none;
}
/*2階層目*/
#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="2階層目のリンク"></a></li> <li><a href="2階層目のリンク"></a></li> <li><a href="2階層目のリンク"></a></li> <li><a href="2階層目のリンク"></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="2階層目のリンク"></a></li> <li><a href="2階層目のリンク"></a></li> <li><a href="2階層目のリンク"></a></li> <li><a href="2階層目のリンク"></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="2階層目のリンク"></a></li> <li><a href="2階層目のリンク"></a></li> <li><a href="2階層目のリンク"></a></li> <li><a href="2階層目のリンク"></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="2階層目のリンク"></a></li> <li><a href="2階層目のリンク"></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="2階層目のリンク"></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="2階層目のリンク"></a></li> <li><a href="2階層目のリンク"></a></li> <li><a href="2階層目のリンク"></a></li> <li><a href="2階層目のリンク"></a></li> </ul> </li> <li> <a href="1階層目のリンク"> <i class="blogicon-chevron-down"></i></a> <ul class="second-content"> <li><a href="2階層目のリンク"></a></li> <li><a href="2階層目のリンク"></a></li> <li><a href="2階層目のリンク"></a></li> <li><a href="2階層目のリンク"></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のコードの中に1〜16の番号の横に名前が書いてあります。

そちらの記載されている所(背景色、幅、文字色)を変えることによって、ブログのカスタマイズが変わりますのでやってみましょう。

 

コードを変えて変わったかを確認しながらやると変わっていることがわかるので、チェックしていきましょう!!!

 

 

次にヘッダーのタイトル下にあるコードを変更方法を詳しく説明していきます。

いまの状態だと私のナビゲーションバーになってしまってますが、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をクリック

 

f:id:mynameiseiji:20220113115740p:plain

 

Top をクリックした後に自分のブログが出てきます。そのブログの上にURLをコピーして番にコピペしましょう!!!

 

私でいうhttps://www.eijilife.com/archive/category/Top の部分です。

f:id:mynameiseiji:20220113122549p:plain

 

② 上記の②は、ナビゲーションバーに乗せるカテゴリーを入れましょう。

Top ライフスタイル English ブログ 商品レビュー プロフィールみたいな感じで、自分にあったカテゴリーを入れましょう。

 

③ 上記の③は、好きなアイコンを入れることができる(アイコンなしでも大丈夫です。)

はてなブログでは、はてな自体でアイコンをいれることができるようになっています。なのでFont Awesomeなどを使わなくてもアイコンを使うことが出来るので、Font Awesomeを入れなくても大丈夫です。

<i class="blogicon-home"></i></a>

こちらは私が使ってる家のアイコンになります。

この赤色の部分を変えることでいろんなアイコンに変更できます。

<i class="blogicon-home lg"></i></a>

それにもしアイコンを少し大きくさせたい時は、lg を入れるだけで大きくすることが出来ます。

 

赤色の部分に入れるアイコンはかまさんの記事を参考にしてみてください。

はてなブログアイコン素材一覧127種と使い方 - かまさんちのぶろぐ

 

④ メインカテゴリーから子カテゴリーのURLをコピーして貼り付ける

こちらも①と一緒でカテゴリーの中からメインカテゴリーと子カテゴリーのURLをコピーしてコピペしてください。

 

私のでいうと下記の図でブログがメインカテゴリー、ブログ-はてなブログが子カテゴリーになります。

f:id:mynameiseiji:20220113205424p:plain



⑤ ③番と同じでアイコンを入れることができます。

 

⑥ もし2つ以上メインカテゴリーから子カテゴリーがある場合は、そのURLを入れる。

f:id:mynameiseiji:20220113153753p:plain

 

上記の私のブログで、カテゴリーのブログの所をポイントすると階層下します。

私は2つですが、商品レビューは3つになっています。

この階層下を2つ3つ4つと増やすことで、もっと細かく内容を分けることができます。

 

 こちらのコードを増やすことによって <li><a href="⑤"></a></li> 何回層にも増やすことも減らすこともできる。

 

最後にこちらのコードを<li><a href="⑤"></a></li> 増やすことによって5個以上の子カテゴリーを作ることが出来ます。

減らす時は、コードを消すだけです。

 

まとめ

ブログカスタマイズでメニューを作るとそれなりのブログに変身したのではないでしょうか?

 

見栄えや読者の方達も読みたい記事を見つけやすくなるのではないでしょうか。

いろいろといじって見て、自分にあったカスタマイズができるといいですね。

 

こちらのグローバルメニューでナビゲーションバー(メニューバー)を作るには、それなりに時間がかかりますので、時間がある時に一気にやることをオススメします。

ゴチャゴチャしていてわからなくなってしまうかもしれないので(笑)

 

では、今回はこれで終わりです!!!

お疲れさまでした。

 

 

 

www.eijilife.com