トップ > カスタマイズ > 【はてなブログ】グローバルナビゲーションを設置する方法【コピペOK】

【はてなブログ】グローバルナビゲーションを設置する方法【コピペOK】

カスタマイズ

ブログの上部にあるメニュー「グローバルナビゲーション」（以下、グロナビ）。  
カテゴリや固定ページへのリンクをまとめておくことで、読者が欲しい情報にすぐアクセスできるようになります✨  

今回は、はてなブログにコピペで設置できるシンプルなグロナビのHTMLとCSSをご紹介します。  
※今回のカスタマイズは、はてなブログProで使うのがおすすめです。  

今回のグロナビは、PC表示では横並び、SP表示ではバーガーメニューに格納したタイプの表示を作成します。

※html、CSSを更新する前に、必ずコードのバックアップをとってください

※使用しているテンプレートによっては上手く表示されない可能性があります。コードを微調整してご利用ください（当ブログは「Undershift」を使用しています）

 

 

HTMLコードを設置する

「デザイン」→「ブログタイトル下」に設置します

 

 

下記のコードをコピペして、「ブログタイトル下」に入れてください

  1. <div id="top-editarea">
  2.   <!-- グローバルナビゲーション -->
  3.   <div id="nav-drawer">
  4.     <!-- 開閉用のチェックボックス（非表示） -->
  5.     <input type="checkbox" id="nav-input" class="nav-unshown">
  6.  
  7.     <!-- 開くボタン -->
  8.     <label id="nav-open" for="nav-input">
  9.       <i class="blogicon-reorder g-nav-icon"></i>
  10.       <span class="mini-text">メニュー</span>
  11.     </label>
  12.  
  13.     <!-- 背景クリックで閉じる -->
  14.     <label class="nav-unshown" id="nav-close" for="nav-input"></label>
  15.  
  16.     <!-- ナビ内容 -->
  17.     <div id="nav-content">
  18.       <!-- 閉じるボタン -->
  19.       <label class="nav-close" for="nav-input"><i class="blogicon-close"></i>CLOSE</label>
  20.       
  21.       <ul class="g-nav">
  22.         <li><a href="https://www.erirhythm.com/">HOME</a></li>
  23.         <li><a href="https://www.erirhythm.com/profile">PROFILE</a></li>
  24.         <li><a href="https://www.erirhythm.com/otoiawase">お問合せ</a></li>
  25.       </ul>
  26.     </div>
  27.   </div>
  28.   <!-- グローバルナビゲーションここまで -->
  29. </div>
  30.  

 

CSSコードを設置する

「デザイン」→「CSS」に設置します

 

 

PC表示：ナビを横並びに表示で設置されます

下記のコードをコピペして、「CSS」に入れてください

  1. /* -------------- 共通設定 -------------- */
  2. .g-nav {
  3.   list-style: none; /* リストマーク（●や数字）を非表示 */
  4.   margin: 0; /* 外側余白なし */
  5.   padding: 0; /* 内側余白なし */
  6.   background: #fff; /* 白背景（#fff → 好きな色に変更可能） */
  7. }
  8.  
  9. .g-nav li {
  10.   margin: 0; /* リスト項目間の余白なし */
  11. }
  12.  
  13. .g-nav li a {
  14.   display: block; /* リンク全体をクリック範囲にする */
  15.   padding: 14px 20px; /* 上下14px・左右20pxの余白（リンクの高さ・横幅に影響） */
  16.   text-decoration: none; /* 下線を消す */
  17.   color: #555; /* 文字色（#555 → 好きな色に変更） */
  18.   font-weight: bold; /* 太字 */
  19.   font-size: 14px; /* 文字サイズ */
  20.   transition: color 0.3s ease; /* ホバー時の色変化を0.3秒でなめらかに */
  21.   width: 10rem; /* ナビの幅（rem単位→pxでもOK） */
  22.   text-align: center; /* テキスト中央寄せ */
  23. }
  24.  
  25. .g-nav li a:hover {
  26.   color: #69c1c9; /* ホバー時の文字色（#69c1c9 → 好きな色に変更） */
  27. }
  28.  
  29. /* -------------- PC表示（横並び） -------------- */
  30. @media (min-width: 769px) {
  31.   #nav-open, #nav-close, .nav-close {
  32.     display: none; /* PCでは開閉ボタンを非表示 */
  33.   }
  34.   .g-nav {
  35.     display: flex; /* 横並び表示 */
  36.     justify-content: center; /* 中央寄せ */
  37.     border-bottom: 1px solid #eee; /* 下線（色や太さ変更可能） */
  38.   }
  39. }

 

 

スマホ（SP）表示:バーガーメニューが設置されます

※バーガーメニューを押すことで、メニューが開きます

 

下記のコードをコピペして、「CSS」に入れてください

  1. /* -------------- スマホ表示（開閉式） -------------- */
  2. @media (max-width: 768px) {
  3.   /* 開閉用ボタン */
  4.   #nav-open {
  5.     display: flex; /* 横並びの中身（アイコンと文字）を横に配置 */
  6.     align-items: center; /* 縦中央揃え */
  7.     justify-content: center; /* 横中央揃え */
  8.     cursor: pointer; /* マウスを乗せるとポインター */
  9.     padding: 10px; /* 内側余白（ボタンの大きさ調整） */
  10.     background: #fff; /* 背景色（#fff → 好きな色に変更） */
  11.     border-bottom: 1px solid #eee; /* 下線 */
  12.     font-weight: bold; /* 太字 */
  13.   }
  14.   #nav-open i {
  15.     margin-right: 6px; /* アイコンと文字の間隔 */
  16.   }
  17.  
  18.   /* ナビ非表示（初期状態） */
  19.   #nav-content {
  20.     position: fixed; /* スクロールしても固定 */
  21.     top: 0;
  22.     left: -100%; /* 画面外に隠す（表示時に0へ移動） */
  23.     width: 70%; /* ナビの横幅（%やpxで調整） */
  24.     height: 100%; /* 全画面の高さ */
  25.     background: #fff; /* 背景色（#fff → 好きな色に変更） */
  26.     transition: left 0.3s ease; /* スライド表示のアニメーション */
  27.     z-index: 999; /* 最前面表示 */
  28.     overflow-y: auto; /* 縦スクロール可能 */
  29.     padding-top: 50px; /* 上部余白（ヘッダー分） */
  30.   }
  31.   #nav-input:checked ~ #nav-content {
  32.     left: 0; /* チェックされたら表示位置へ */
  33.   }
  34.  
  35.   /* ナビ内リスト縦並び */
  36.   .g-nav {
  37.     flex-direction: column; /* 縦並び */
  38.   }
  39.   .g-nav li a {
  40.     padding: 12px 20px; /* スマホ用リンク余白 */
  41.     border-bottom: 1px solid #eee; /* 下線 */
  42.   }
  43.  
  44.   /* 閉じるボタン */
  45.   .nav-close {
  46.     display: block;
  47.     position: absolute;
  48.     top: 10px;
  49.     right: 15px;
  50.     cursor: pointer; /* マウスを乗せるとポインター */
  51.   }
  52.  
  53.   /* 背景クリックで閉じるエリア */
  54.   #nav-close {
  55.     display: none;
  56.     position: fixed;
  57.     top: 0;
  58.     left: 0;
  59.     width: 100%;
  60.     height: 100%;
  61.     background: rgba(0, 0, 0, 0.4); /* 半透明黒背景 */
  62.     z-index: 998;
  63.   }
  64.   #nav-input:checked ~ #nav-close {
  65.     display: block; /* チェック時に表示 */
  66.   }
  67.  
  68.   /* チェックボックス・ラジオボタン非表示 */
  69.   [type="checkbox"], [type="radio"] {
  70.     -webkit-box-sizing: border-box;
  71.     box-sizing: border-box;
  72.     padding: 0;
  73.     display: none; /* 実際のチェックボックスは見せない */
  74.   }
  75. }

 

まとめ

グロナビを設置すると、ブログの使いやすさと見た目のクオリティが一気に向上します✨  
読者が迷わず記事を探せる環境は、アクセス数アップにも直結します。  

 

 

 

↑