仮想サーファーの波乗り

仮想サーファーの日常

プログラミング・エンジニアのスキルアップ・ブログ運営などに関してよく書く雑記ブログ

➡ Udemyで8/27(木)まで割引セール開催中！ 1,200円〜で普段の90%以上OFF！

はてなブログにグローバルナビを追加する方法(コピペでOK)

ブログ運営


ついに念願のグローバルナビを用意することができました！いつも「やろう。...やらなきゃ。」と思っては後回しにしていたグローバルナビの設置ですが、ようやく設置することができました。

一応、後世のはてなブロガーのために、グローバルナビ設置した際に利用したコードを貼って軽く解説しておきます。


はてなブログへのグローバルナビ設置コード

まずは、デザイン→カスタマイズ→ヘッダ→タイトル下の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="http://www.virtual-surfer.com/archive/category/%E6%8A%95%E8%B3%87">投資</a>
            <ul class="second-content">
                <li><a href="http://www.virtual-surfer.com/archive/category/%E4%BB%AE%E6%83%B3%E9%80%9A%E8%B2%A8">仮想通貨</a></li>
            </ul>
        </li>
        <li>
            <a href="http://www.virtual-surfer.com/archive/category/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0">プログラミング</a>
            <ul class="second-content">
                <li><a href="http://www.virtual-surfer.com/archive/category/Python">Python</a></li>
            </ul>
        </li>
        <li>
            <a href="http://www.virtual-surfer.com/archive/category/%E5%88%86%E6%9E%90">分析</a>
            <ul class="second-content">
                <li><a href="http://www.virtual-surfer.com/archive/category/%E7%94%9F%E3%81%8D%E6%96%B9">生き方</a></li>
                <li><a href="http://www.virtual-surfer.com/archive/category/%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9">サービス</a></li>
                <li><a href="http://www.virtual-surfer.com/archive/category/%E6%9B%B8%E8%A9%95">書評</a></li>
                <li><a href="http://www.virtual-surfer.com/archive/category/%E5%9B%BD%E5%88%A5%E6%96%B9%E9%87%9D">国別方針</a></li>
            </ul>
        </li>
        <li>
            <a href="http://www.virtual-surfer.com/archive/category/%E3%83%A9%E3%82%A4%E3%83%95%E3%83%8F%E3%83%83%E3%82%AF">ライフハック</a>
            <ul class="second-content">
                <li><a href="http://www.virtual-surfer.com/archive/category/%E3%83%8E%E3%82%A6%E3%83%8F%E3%82%A6">ノウハウ</a></li>
            </ul>
        </li>
        <li>
            <a href="https://twitter.com/virtual_techX">仮想サーファー</a>
            <ul class="second-content">
                <li><a href="http://www.virtual-surfer.com/entry/2018/01/24/200000">自己紹介</a></li>
                <li><a href="http://www.virtual-surfer.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0">ブログ</a></li>
                <li><a href="http://www.virtual-surfer.com/archive/category/SNS">SNS</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>

これでグローバルナビのHTML部分を設定することができました。

次に、CSSを設定していきます。
デザイン設定→カスタマイズ→デザインCSSのCSSを記載できる箇所に以下のコードを記載します。

/*****グローバルメニュー****/
#menu{
    width: 100%;
    background: #07BAEE;
    margin: 10px auto;
}
#menu-inner{
    width: 100%;
    height: 40px;
    margin: 0 auto;
    background: #07BAEE;
}
#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;
    width: 20%;
}
#menu-content > li > a{
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    line-height: 40px;
    background: #07BAEE;
    color: #fff;
    font-size: 100%;
    text-decoration: none;
    z-index: 2;
}
#menu-content > li > a:hover{
    background: #A9E1F6;
    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: 180px;
    height: 40px;
}
#menu-content > li > ul.second-content > li > a{
    display: block;
    line-height: 40px;
    background: #07BAEE;
    color: #fff;
    font-size: 100%;
    text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
    background: #A9E1F6;
    color: #fff;
}
/*******トグルメニュー*********/
@media screen and (max-width:960px){
#menu-inner{
    width: 100%;
    height: auto;
    opacity: 0.8;
}
#btn-content{text-align: right;}
#menu-btn{
    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
    cursor: pointer;
    background: #07BAEE;
    color: #fff;
    font-size: 100%;
}
#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;}
}


これで、あとは「変更を保存する」ボタンを押すことで、グローバルナビを設置することができます！


f:id:virtual-surfer:20180303233640p:plain

↑ グロナビできてますね！


f:id:virtual-surfer:20180303233703p:plain

↑ トグル形式のメニューも正しく表示されています。


グローバルナビのコード解説

ここからは、上記のコードを軽く解説しておきます。困ったらここを見てコードの該当箇所をチューニングしてください。


グローバルナビの文言・リンク指定

<li>
  <a href="http://www.virtual-surfer.com/archive/category/%E6%8A%95%E8%B3%87">投資</a>
  <ul class="second-content">
    <li><a href="http://www.virtual-surfer.com/archive/category/%E4%BB%AE%E6%83%B3%E9%80%9A%E8%B2%A8">仮想通貨</a></li>
  </ul>
</li>

まずはこちらのHTMLで、グローバルナビの1段目のリンクを指定し、ul -> liタグの中で2段目（カーソルを「投資」にあてた時に出てくるメニュー）のリンクを設定しています。ここの文言とリンクを自分のサイトの該当するものに変更していきましょう。


グローバルナビの2段目の表示・トグルの表示

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

以上のコード部分で、グローバルナビの1段目にカーソルが当たった時に2段目のメニューを表示させる挙動、トグルのメニューをクリックした時にメニュー一覧を表示する挙動をJavaScriptで制御しています。ここの動きはサイトによって変えたいこともないと思うので、このままでOKです。


グローバルナビの色の指定

background: #07BAEE;

グローバルナビの色は、複数出現している以上の箇所で指定しています。ここはサイトごとにイメージカラーがあると思うので、いい感じに変えておきましょう。加えて、カーソルをメニューに当てた時に少し変化する色は、以下の箇所で指定しています。ここも合わせて特定の色に変えておきましょう。（hoverタグが含まれている箇所が該当します。）

background: #A9E1F6;


グローバルナビのメニュー数と各サイズの調整

#menu-content > li{
    position: relative;
    float: left;
    height: 100%;
    text-align: center;
    width: 20%;
}

以上の箇所で、メニューの数とサイズの調整を行っています。僕のサイトの場合はメニューバーを5つにしているので、100%/5で、widthを20%に指定しています。ここを100%/X個 = 〇〇%（←サイトのメニューバーの数）に調整します。


グローバルナビの2段目のメニューのサイズ調整

#menu-content > li > ul.second-content > li{
    text-align: center;
    width: 180px;
    height: 40px;
}

以上の箇所のwidthの部分で、グローバルナビの2段目のメニューのサイズ調整を行います。僕の場合は180pxで1段目のメニューのサイズと2段目のメニューのサイズを同じにすることができましたが、サイトによってはサイズが違うと思うので、調整しておきましょう。

以上、これらを調整すればある程度は自分のサイトに最適化したグロナビが作成できるはずです！


まとめ

今回は、他人のコードを参考にしてグロナビを作成しましたが、はてなブログ界隈はすでに先人が多くていろいろ試行錯誤されているからその恩恵にあずかれるのがありがたいですね。

今年の8月までに、はてなブログのHTTPS化対応が進まないようならwordPressに移行することも考えているので、その時にはまたサイトの変更を余儀なくされそうですが...。

とはいえ今後も当分は、はてなブログでサイトを拡張していきたいと思います！


はてなブログの基本設定はこちらの本が参考になるのでオススメです。


ブログの見出し画像の最適なサイズ（縦横比率）って？各SNSシェアの画像サイズ比較した結果

はてなブログ記事シェアボタンのデザインを変えてクリックしやすくする方法(コピペでOK)

はてなブログにグローバルナビを追加する方法(コピペでOK)