はてなブログにメニューを追加するのでR | なるへそゴマのすけのなるへそな教室

WordPressでは、「外観」→「メニュー」として、メニューを設定する項目がほとんどのテーマにはあるのでR。

しかし、

はてなブログは、このメニューなる項目がないようなのでR。

そこで、

メニューを追加する必要があるのでR。

はてなブログのテーマにもよるかと思うのでRが、ここを参考に実施したのでR。

まず、「ダッシュボード」→「デザイン」→「カスタマイズ」→「ヘッダ」に、

<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="http://www.hogehoge.com/">ホーム</a></li>
　　　　<li><a href="http://www.hogehoge.com/about/">このブログについて</a></li>
　　　　<li><a href="http://www.hobohobonichinichi.com/">hobohobonichinichiのブログ</a></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>

を追加するのでR。

すると、スマホとPCで違う表示タイプのメニューができるのでR。

なお、上のmenu-content内にある、

www.hogehoge.comや、www.hogehoge.com/about/や、www.hobohobonichinichi.comなどは自分の目的に合わせて設定するのでR。ほぼ日はこちらで確認できるのでR。

ちなみに、

検証したはてなブログのテーマは、ゆきひー (id:ftmaccho) さんのNakedでR。

はてなブログのカスタマイズも含めて、はてなブログには下の本はとても分かりやすい本なのでR。