Theme Naked Blog

Nakedのカスタマイズを紹介するブログ

【子カテゴリあり】レスポンシブなナビゲーションの作り方

カスタマイズ（Naked）

注：この記事は、はてなブログテーマNaked用です。

Nakedはもともと、ナビゲーションをつくるCSSが組まれていたのですが、子カテゴリまで表示することはできませんでした。

追加機能として、子カテゴリまで表示するようにCSSを変更したので、作り方を記事にしたいと思います。

注：子カテゴリ無しバージョンは

theme-naked.hatenablog.jp

をご覧ください。

実装図と注意点

実装図

実装図はこんな感じです。

PC

f:id:ftmaccho:20160609154158g:plain

親カテゴリにマウスを当てると、子カテゴリがふわっと表示されるようになります。

注意点

このカスタマイズの注意点としては、

  • （レスポンシブ設定にしている人で、）タブレット以下のサイズでは子カテゴリは表示されません。一般的なトグルメニューになります。
  • このカスタマイズでは、孫カテゴリまで表示することはできません

カスタマイズ

カスタマイズは、「タイトル下」に

<nav id="n-menu">
<div class="menu-inner">
    <div class="btn-content">
        <span class="menu-btn"><i class="blogicon-reorder"></i> MENU</span>
    </div>
    <ul class="menu-content">
        <li>
            <a href="URL1">リンク１</a>
            <ul class="second-level">
                <li><a href="URL1-1">リンク１ー１</a></li>
                <li><a href="URL1-2">リンク１ー２</a></li>
                <li><a href="URL1-3">リンク１ー３</a></li>
            </ul>
        </li>
        <li>
            <a href="URL2">リンク２</a>
            <ul class="second-level">
                <li><a href="URL2-1">リンク２ー１</a></li>
                <li><a href="URL2-2">リンク２ー２</a></li>
                <li><a href="URL2-3">リンク２ー３</a></li>
            </ul>
        </li>
        <li>
            <a href="URL3">リンク３</a>
            <ul class="second-level">
                <li><a href="URL3-1">リンク３ー１</a></li>
                <li><a href="URL3-2">リンク３ー２</a></li>
                <li><a href="URL3-3">リンク３ー３</a></li>
            </ul>
        </li>
        <li>
            <a href="URL4">リンク４</a>
            <ul class="second-level">
                <li><a href="URL4-1">リンク４ー１</a></li>
                <li><a href="URL4-2">リンク４ー２</a></li>
                <li><a href="URL4-3">リンク４ー３</a></li>
            </ul>
        </li>
        <li>
            <a href="URL5">リンク５</a>
            <ul class="second-level">
                <li><a href="URL5-1">リンク５ー１</a></li>
                <li><a href="URL5-2">リンク５ー２</a></li>
                <li><a href="URL5-3">リンク５ー３</a></li>
            </ul>
        </li>
    </ul>
</div>
</nav>
<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 = 768;
        if(win > p){
            menuContent.show();
        }else{
            menuContent.hide();
        }
    });
});
</script>

と入れてください。

以前の子カテゴリ無しのナビゲーション

theme-naked.hatenablog.jp

を使っていただいていた方は、

            <ul class="second-level">
                <li><a href="URL2-1">リンク２ー１</a></li>
                <li><a href="URL2-2">リンク２ー２</a></li>
                <li><a href="URL2-3">リンク２ー３</a></li>
            </ul>

の部分のみ入れていただければOKです。

すると、最初の画像の様子ができます。

f:id:ftmaccho:20160609154158g:plain

ここまでだと、まだリンクのタイトルとリンクが入っていないので、次のことを行ってください。

リンクタイトルを入れる

「リンク１」「リンク２」などのところに、それぞれ入れたい親カテゴリのタイトルに変更し、「リンク１−１」「リンク１−２」などのところに、子カテゴリのタイトルに変更してください。

リンクを入れる

最後に、リンクタイトルに対応するURLを入れます。最初のコードの「URL1」「URL2」などの部分に対応する親カテゴリ、「URL1-1」「URL1-2」などの部分には対応する子カテゴリのURLを入れてください。

デフォルトでは親カテゴリが５つ、子カテゴリが３つずつ入るようにしていますが、のリンクが入るようにしていますが、少なければ増やし、多ければ余った部分を消すようにしてください。

確かめる

最後に、実際にそれぞれのリンクを押してみて、きちんとリンク先にとんでいるか確認してください。

まれにですがリンク先に飛べなかったり、スマホで見たときにトグルメニューになっていなかったりします。

確認ができたら、カスタマイズは終了です。

その他のカスタマイズ

メニュー部分に色をつける

メニュー部分は、デフォルトでは色をつけず、背景の画像がそのままうつるようにしています。

この部分に色をつけることで、しまりのあるヘッダーをつくることもできます。

f:id:ftmaccho:20160521185414p:plain

上のように黒くするには、「デザインCSS」に、

#n-menu {
    background-color: #444;
}

と入れていただくとできます。「#444」と書かれているところが色のコードになり、これは

www.colordic.org

などを見ることで簡単に変更ができます。

リンク文字の色を変える

デフォルトでは白になっている文字の色も、背景画像や背景色によっては、変更したほうが良い時もあります。

f:id:ftmaccho:20160521191231p:plain

リンク色を変更するには、「デザインCSS」に、

/*リンクの文字色*/
#n-menu .menu-content > li > a {
    color: #888;
}
/*リンクホバー時の下線の色*/
#n-menu .menu-content > li > a:hover {
    border-color: #888;
}
/*「MENU」の文字色*/
#n-menu .menu-btn {
    color: #888;
}

と入れていただくと可能です。

それぞれコメントしてあるので、先ほどの「原色大辞典」などから選んで、好きな場所を変更してみてください。