虹の子育てblog

2人の女の子のパパです。子育ての事、お役立ち情報など書いていきます。

【はてなブログ向け】階層グローバルナビを作りました。

上の画像のような、はてなブログ向け階層グローバルナビを作りました。

 

自分が「こういうのがあればいいな」と思ったやつなので、結構こだわってます。

 

基本的にほぼ全て自分でコードを考えて作りました。

 

色を変えることやレイアウトを変えることもできます(後ほど解説)。

 

どういうものか説明したあと、

はてなブログに設置する方法を解説していきます。

 

はてなブログ向け階層グローバルナビを作りました。

特徴や注意点を説明していきます。

 

特徴① アニメーション付き。

マウスを乗せると「にゅ~っ」とアニメーション付きで2階層目が出てきます。

 

特徴② スマホ対応

もちろんスマホ対応です。

 

スマホ画面でこの「メニュー」を押すと↓

 

メニューが「にゅ~」っと(メニューだけに笑)アニメーション付きで出てきます。

そして2階層目もしっかり表示されます。

 

もう一度「メニュー」を押すと引っ込みます。

 

特徴③ 1階層目もちゃんとリンクが効く。

よく、階層グローバルナビだと1階層目はリンクが効かなかったりしますが、

これはちゃんと効きます↓

 

特徴④ 横幅がオーバーしたら、一行にも二行にもできる。

メニュー項目が多かったりメニュー名が長くて横幅に入りきらなかった場合、

一行にも二行にもできます。

 

文字を改行してナビを一行に↓

 

文字を改行せず、ナビを二行に↓

 

左寄せにもできます。

 

やり方は後ほど解説します。

 

特徴⑤ はてなブログ仕様。

アイコンは、はてなブログにデフォルトで付いてる機能「はてなブログアイコン」を使用してます↓

 

なので、はてなブログ以外だと表示されません。

 

また、コードも一部はてなブログ用に書いてます。

 

3階層目は?

この階層グローバルナビは2階層までです。

3階層目は非対応なのでご了解下さい。

 

3階層目はあまり使う機会がないと思いやめました。

 

どのテーマにも使える?

基本的にどのテーマでも使えると思います。

私は、minimalism、Haruni、Brooklyn、UnderShirt、Paletteなど人気のテーマを試しましたが、

どれもうまく表示されました。

 

はてなブログに設置する方法。

それでは、階層グローバルナビをはてなブログに設置する方法を解説していきます。

 

まずjQueryを読み込みます。

ダッシュボードの「設定」→「詳細設定」→「head要素にメタデータを追加」に

 

以下のコードをコピペします↓

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 

→下の方にある「変更する」。

 

jQueryをすでに読み込んでいる人はこれは省略してください。

 

次に、ダッシュボードの「デザイン」→「カスタマイズ」→「ヘッダ」→「ブログタイトル下」に

 

以下のコードをコピペします。


<div id="level-gnav">
<div id="menu-btn">
  <i class="blogicon-reorder"></i> メニュー
</div>
      <ul class="level-1">
        <li><a href="リンク先URL">メニュー1</a></li>
        <li><a href="リンク先URL">メニュー2</a></li>
        <li><a href="リンク先URL">メニュー3</a></li>
        <li><a href="リンク先URL">メニュー4(下層あり) <i class="blogicon-chevron-down"></i></a>
          <ul class="level-2">
            <li><a href="リンク先URL">下層メニュー1</a></li>
            <li><a href="リンク先URL">下層メニュー2</a></li>
            <li><a href="リンク先URL">下層メニュー3</a></li>
            <li><a href="リンク先URL">下層メニュー4</a></li>
            <li><a href="リンク先URL">下層メニュー5</a></li>
            <li><a href="リンク先URL">下層メニュー6</a></li>
          </ul>
        </li>
        <li><a href="#">メニュー5(下層あり) <i class="blogicon-chevron-down"></i></a>
          <ul class="level-2">
            <li><a href="リンク先URL">下層メニュー1</a></li>
            <li><a href="リンク先URL">下層メニュー2</a></li>
            <li><a href="リンク先URL">下層メニュー3</a></li>
            <li><a href="リンク先URL">下層メニュー4</a></li>
            <li><a href="リンク先URL">下層メニュー5</a></li>
            <li><a href="リンク先URL">下層メニュー6</a></li>
          </ul>
        </li>
        <li><a href="リンク先URL">メニュー6</a></li>
        <li><a href="リンク先URL">メニュー7</a></li>
      </ul>
</div>

<script>
    $(function(){
      $(window).on('load resize',function(){
        if(window.matchMedia("(max-width:960px)").matches){
          $(".level-2").show();
        }else{
          $(".level-1 > li").hover(function(){
            $(this).find("ul").slideDown();
          },
          function(){
            $(this).find("ul").slideUp();
          });         
        };
      });
    
      $("#menu-btn").click(function(){
        $(".level-1").slideToggle();
      });
    
    });
</script>

 

次に、その下の方にある「デザインCSS」に

 

以下のコードを貼り付けます。


/* はてなブログにデフォルトで付いてる余白消す */
#level-gnav ul{
   padding-left:0;
}

#level-gnav{
  background:#000;/*グローバルナビの背景色*/
}

#menu-btn{
  color:#fff;/*スマホ画面の、「メニュー」ボタンの文字色*/
  display:none;
}

.level-1{
  display:flex;
  flex-wrap: wrap;/*文字を改行してナビを1行にするにはこれ消す*/
  margin:0 auto;
  max-width:1200px;
  justify-content: center; /*ナビ中央寄せ*/
}

.level-1 li{
  list-style: none;
  position:relative;
}

#level-gnav a{
  color:#fff;/*グローバルナビの文字色*/
  text-decoration: none;
  display:block;
  padding:15px 18px;
  font-size:16px;/*文字の大きさ*/
}

#level-gnav a:hover{
  background:#777;/*マウスを乗せた時の色*/
}


.level-2{
  position:absolute;
  background:#333;/*下層メニューの背景色*/
  top:100%;
  left:0;
  display:none;
  z-index: 2;
  width:100%;
}


/* --------タブレット・スマホ画面--------- */
@media(max-width:960px){
  
  #menu-btn{
    display:block;
    padding-left:10%;
    padding-top:10px;
    padding-bottom:10px;
 text-align:left;
 } .level-1{ display:none; } .level-2{ position:static; }

 #level-gnav a{
    text-align:left;
  }

 #level-gnav .level-2 li a{ padding-left:35px; } }

 

→上の方にある「変更を保存する」

これでひとまずOK。

 

階層グローバルナビが表示されてるはずです。

 

メニュー項目を増やしたり削除するには。

コードを見ていきましょう。

  • 1階層だけのメニュー項目は青枠の部分
  • 2階層目があるメニュー項目は赤枠の部分

です↓

 

この「<li>~</li>」の部分をコピーして増やしたり、削除したりしてメニュー項目の数を調整してください。

 

メニュー名とリンク先を設定

メニュー名を変えるには、以下の赤枠のところを変えて下さい↓

「リンク先URL」のところを、リンクさせたい本当のURL(https://で始まるやつ)に変えて下さい↓

 

色を変えるには?

グローバルナビの背景色や文字色を変えるには、コードの#000や#fffなどの部分を好きなカラーコードに変えて下さい↓

(横の日本語コメントを参考にしてください)

 

 

文字の大きさを変えるには?

文字の大きさを変えるには、コードの16pxの部分を15pxとか17pxとかにして調整して下さい↓

 

左寄せにするには?

デフォルトだとこのグローバルナビの項目は中央寄せになってます↓

 

これを左寄せにするには↓

 

コードのこの行を削除して下さい↓

 

文字を改行して、グローバルナビを一行にするには?

メニュー項目が多かったりメニュー名が長くて横幅がはみ出してしまった場合、デフォルトだとこのようにナビが上下二行になります↓

 

これを、文字を改行してグローバルナビを一行にするには↓

 

コードのこの行を削除して下さい↓

 

まとめ。

いかがでしたでしょうか?

今回ははてなブログ向け階層グローバルナビをご紹介しました。

 

どのテーマにも使えると思いますので、「カテゴリーが多い」という方はぜひ使ってみてください。