はてなブログの「Minimalism」で、タイトル下のナビゲーションメニューを階層化して、プルダウン表示させるカスタマイズ方法

はてなブログのデザイン「Minimalism」を使用しているこのブログ。

最近、ブログのデザインを集中的にカスタマイズしています。

今回は、ブログのタイトルのすぐ下に設置しているナビゲーションメニューを改装。

最初にナビゲーションメニューを設置した時は、Minimalismのカスタマイズ方法で紹介されていた方法で行い、カスタマイズしたのですが。↓

www.kayoko-cafe.com

記事数とともにカテゴリーの種類も増えたことをきっかけに、カテゴリーを階層化して、サイドバーにあるカテゴリー欄も、階層化させて表示したので。

それに合わせて、ナビゲーションメニューでも階層化して表示できるようにしたいと思いまして。

で、そのカスタマイズ方法をググって実践してみました。 

 ↑今回のカスタマイズで、完成した階層化されたナビゲーションメニューがこれです！

ナビゲーションメニューを階層化させて表示させるカスタマイズについて

ブログのタイトル下に設置するメニュー。

ナビゲーションメニューとか、グローバルメニューって、言われているようです。

今までは、ここのメニューには、「ホーム」「ABOUT」「CONTACT」以外に、メインとなるカテゴリーを3つだけ載せていました。

ですが、そのメイン以外のカテゴリーの記事も増えてきて。

全てのカテゴリーをナビゲーションメニューからアクセスできるようにしたいと思って。

そこで、メインのカテゴリーを「親カテゴリー」にして、それ以外のカテゴリーを「子カテゴリー」に位置付けて、カテゴリーを階層化しました。

それを、ブログのサイドバーに設置したカテゴリー欄に表示させています。

その方法はこちら。↓

www.kayoko-cafe.com

このサイドバーでは、大分類した親カテゴリーが4つだけ表示されていて、▶︎をタップすれば、小カテゴリーも表示されるようになっています。

全てのカテゴリーがズラーっと表示されるよりは、この方が見た目がスッキリしていると思います。

で、これと同じような表示になるように、ナビゲーションメニューの表示もカスタマイズしようと思ったわけです。

ナビゲーションメニューの場合は、親カテゴリーがまず表示されていて、各メニュー名をタップすると、その小カテゴリーがプルダウン形式で表示される、という形にカスタマイズしたいな、と。

参考サイト

その方法を探してググったところ、こちらの記事が大変分かりやすかったので、参考にさせていただきました。↓

CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life

注意点

このナビゲーションメニューのカスタマイズ自体は、おかげさまで簡単にできたのですが。

私のブログの場合、ここで一つ問題が出てきまして。

それは、トップページでの表示の不具合です。

このブログのトップページ、記事数を一覧で表示させているのですが。

その表示形式をカード型にカスタマイズしています。↓ 

www.kayoko-cafe.com

このカード型の表示では、画像の上に、その記事のカテゴリー名がラベル表示されるように設定していました。

そこで、今回の、ナビゲーションメニューを階層化させて表示させるカスタマイズを行ったところ。

トップページで、ナビゲーションメニューから子カテゴリーをプルダウン形式で表示させた時に、その子カテゴリーの表示が、記事一覧のカテゴリーラベルの下に表示されて読めない、という不具合が起きたのです。

CSSが全くわかっていない私ですが、解決の糸口はどうも「z-index」という、表示が重なる時の順番を指定するコードにあるのでは？、というところまでは分かった（つもりな）のですが。

どう直していいのやら分からなかったので＿|￣|○、発想を変えて。

「トップページの記事一覧での、画像の上に表示されるカテゴリーラベルを消しちゃえ！」という妥協気味の解決策で対応しました。(^^;)

なので、もし、ブログのトップページをカード型の一覧表示にしている方で、同じような不具合が出たら。

表示の順番を、ナビゲーションメニューのプルダウンして表示させた部分が、1番上に表示されるようにCSSで設定するか。

または、プルダウンしたメニューよりも上に表示されてしまう、カテゴリーラベルの表示を消すか。

で、対応すると、表示の順番の不具合が解消されると思います。

ということで、以下から、ナビゲーションメニューのカスタマイズ方法の実践をご紹介します。 

カテゴリーを階層化して、ナビゲーションメニューを表示させるカスタマイズ方法 

カスタマイズの流れ

今回のカスタマイズの手順は、以下のステップで行いました。

カテゴリー階層化＆サイドバー表示の流れ

① 親と子カテゴリー名、リンク先、メニューバーの色と文字の色を決める

② CSSとHTMLの編集をして、はてなブログに設定

① 親と子カテゴリー名、リンク先、メニューバーの背景色と文字の色を決める

まず、下準備をします。

親カテゴリーと小カテゴリーの名称

親カテゴリー名を、ナビゲーションメニューに表示させるメニュー名にします。

小カテゴリー名は、メニュー名をタップした時に、下にずらっと表示されるメニュー名です。

リンク先 

メニュー（親カテゴリー）やプルダウンして表示させたメニュー（子カテゴリー）をタップした時に、どのページにリンクさせるのか、そのリンク先を決めておきます。

特定の記事だったり、そのカテゴリーの記事一覧ページだったりすると思いますが。

そのリンク先のURLを準備しておきます。

私は、親カテゴリーのリンク先は、そのカテゴリーの「まとめ記事」を作っていたので、その記事のURLにしています。

小カテゴリーのリンク先は、そのカテゴリーの記事一覧ページのURLにしました。

カテゴリーの記事一覧ページをリンク先のURLにする場合は。

自分のブログのサイドバーに設置しているカテゴリー欄のカテゴリー名をタップすると、そのカテゴリーで書かれた記事一覧ページが表示されます。

その時のURLを使います。

メニューバーの背景色と文字の色

メニューバーのデザインを、自分の好みの色合いにしたい場合は、6桁の英数字のカラーコードが必要になります。

こちらから、自分が使いたい色を見つけて、そのカラーコードを調べることができます。↓

WEB色見本 原色大辞典 - HTMLカラーコード

今回のカスタマイズでは、素人でも細かく色指定ができるようにコードが作られているのですが。

最低限必要なのは、「文字の色」と「メニューバーの背景色」の2種類です。

まずはこれだけ決めて、カラーコードを準備しておきます。

② CSSとHTMLの編集

下準備ができたら、CSSコードやHTMLタグを参考サイトからお借りして、編集していきます。

1）デザインCSSの編集

まず、上記参考サイトの「カスタマイズ　CSS」にある、以下のコードをコピーさせてもらい、メモ帳に貼り付けて保存します。

/*****グローバルメニュー****/
#menu{
    width: 100%;
    margin: 10px auto;
    background: #444;/*７*/
}
#menu-inner{
    width: 1000px;/*１*/
    height: 40px;/*２*/
    margin: 0 auto;
    background: #444;/*８*/
}
#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: #444;/*９*/
    color: #fff;/*10*/
    font-size: 70%;
    text-decoration: none;
    z-index: 2;
}
#menu-content > li > a:hover{
    background: #555;/*11*/
    color: #fff;/*12*/
}
#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;/*2*/
    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: #444;/*13*/
    color: #fff;/*14*/
    font-size: 70%;
    text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
    background: #555;/*15*/
    color: #fff;/*16*/
}

↑ 参考サイトには、この続きに、「トグルメニュー」のコードもあるのですが、今回はトグルメニューは使わないので、ここまでをコピーさせていただきました。

このコードの中の、青い字で書かれた、/*7*/のように数字が書かれてある行が、変更する部分です。

まず、メニューバーの背景色を自分の好みの色に変更するために、数字の7、8、9、11、13、15、17の数字がある行を見つけます。

その行の、＃以下の3桁の数字や英字を、自分の好みの色のカラーコード（英数字６桁）に書き換えます。

次に、メニュー名の文字の色を自分の好みの色に変更するために、数字の10、12、14、16、18の数字がある行を見つけます。

その行の、＃以下の3桁の数字や英字を、自分の好みの色のカラーコード（英数字６桁）に書き換えます。

メモ帳での書き換えができたら、このコードをまるっとコピーして。

管理画面→デザイン→工具マーク→｛｝デザインCSSの、1番下に貼り付けて、上部にある「変更を保存する」をクリックします。 

2）HTMLの編集

次に、上記参考サイトの「カスタマイズ　HTML&jQuery」にある、以下のコードをコピーさせてもらい、メモ帳に貼り付けて保存します。

<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="１階層目のリンク">カテゴリ１ <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;//19
        if(win > p){
            menuContent.show();
        }else{
            menuContent.hide();
        }
    });
});
</script>

↑ 参考サイトにあるHTMLタグから、2つ目以降のカテゴリ部分を削除して、こちらに掲載しています。

ここで編集するのは、メニュー名（親カテゴリーと子カテゴリー）の書き換えと、そのリンク先URLの貼り付けです。

まず、メニューバーに載せるメニュー1つ分を編集してみます。

こちらが、コピーしてきたタグの中の、メニュー1つ分のタグ部分になります。↓

        <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>

✳︎　「カテゴリ１」＝親カテゴリー名に書き換え

✳︎　「1階層目のリンク」＝その親カテゴリーのリンク先URLに書き換え

✳︎　「カテゴリ１ー１」＝子カテゴリー名の1つ目に書き換え

✳︎　「カテゴリ１ー１」の横の「2階層目のリンク」＝その子カテゴリーのリンク先URLに書き換え

✳︎　同様に、小カテゴリー2つ目以降のカテゴリー名とURLを書き換え

✳︎　子カテゴリーが5つ以上あるなら、小カテゴリー4つ目の<li>〜</li>までをコピーして、その下の行に貼り付けて足して、書き換える

✳︎　子カテゴリーが4つもなければ、書き換える必要のない小カテゴリーの行の<li>〜</li>までを削除する

これで、メニューバーに表示させるメニュー1つ目の設定ができました。

2つ目以降のメニューは、上記のメニュー1つ目のタグ部分をコピーして、その下の行に貼り付けてから、同様の編集をしていきます。

あるいは、参考サイトの「カスタマイズ　HTML&jQuery」にあるHTMLタグを全てコピーして、「カテゴリ２」以降を編集していき、書き換えの必要のないカテゴリ部分を削除します。

ちなみに、このブログでは、「HOME」や「CONTACT」といった、子カテゴリーのないメニューには、メニュー名横の記号（下向き矢印？）を消しています。

記号を消すには、「カテゴリ1 」など、親カテゴリー名のすぐ後にある

<i class="blogicon-chevron-down"></i>

 を消します。

メモ帳での編集ができたら、そのタグをまるっとコピーして。

管理画面→デザイン→工具マーク→ヘッダ→「タイトル下」の入力スペースをクリックして、その1番下に貼り付けます。

そして、上部にある「変更を保存する」をクリック。

これで、カスタマイズは終了です。(´ｰ｀)

 

ナビゲーションメニューバーの表示の確認

これで、メニューバーがどのように表示されるかというと…。↓

こんな感じです！

メニュー名をタップすれば、プルダウン式に、子カテゴリーが下にずらっと表示されます。

ということで、ブログのナビゲーションメニューを階層化して表示させるためのカスタマイズ方法でした！

kayoko＠おうちcafe

はてなブログのデザインテーマ「Minimalism」のインストールからカスタマイズまでの実践集　↓

www.kayoko-cafe.com