
「自分のブログ、もう少し“ちゃんとしてる感”を出したい…」
そんなふうに思ったことはありませんか?
グローバルメニューは、ブログ画面上部のリンク集で、ブログの“顔”ともいえる部分。
読者が「どんな記事があるのか」を一目で把握できるだけでなく、デザイン面でも信頼感を大きくアップさせてくれます。
この記事では、はてなブログの無料版でグローバルメニューを設置する方法を、初心者でもスマホ対応できる形で、わかりやすく解説します。
私は、現役の図書館員として働きながらブログ運営を両立し、先月にはGoogle Adsenseに合格しました。
この記事を読めば、
✅はてなブログ無料版でも安心してグローバルメニューを導入できる
✅グローバルメニュー導入の具体的な手順がわかる
✅スマホでも見やすいデザインを作れる
といったメリットを得られます。
下のGIFは、この記事の手順で実際に作成したグローバルメニューの動作例です。

パソコンでの表示
スマホでも自動的に三本線メニュー(ハンバーガーメニュー)に切り替わるので、
読者がどのデバイスから見ても使いやすい設計になっています。

それではまず、グローバルメニューを設置する前に押さえておきたいポイントを整理していきましょう。
※この記事内のコードは自由にコピー・改変してご利用いただけます。
商用利用も可能ですが、再配布や販売はご遠慮ください。
作業前に知っておきたい3つのポイント

①作業環境についての注意
この記事では、基本的にパソコンでの作業を想定しています。
スマホでも不可能ではありませんが、はてなブログではコードやURLのコピー&ペーストがしづらいことが多いため、パソコンでの作業を強くおすすめします。
②「親メニュー」と「子メニュー」を理解しておこう
グローバルメニューには大きく分けて「親メニュー」と「子メニュー」があります。
下の画像の場合、「AI活用術」が親メニュー、「AI」「ブログ記事作成」が子メニューに相当します。

親メニューが上位カテゴリ、子メニューがその中の細分類という構造を理解しておくと、このあと説明するコード編集がずっとわかりやすくなります。
③作業時間の目安
グローバルメニューに加えたい項目数にもよりますが、冒頭のGIFでご紹介した筆者の例では、2時間ほどかかりました。
なるべく時間に余裕があるときに、集中して行うのがおすすめです。
次の章からは実際に設置作業に入ります。
STEP1 メニュー構成を考えよう
いきなりコードを触る前に、まずはどんなメニューを設置するかを紙やメモ帳に書き出してみましょう。
たとえば、以下のような形です。
| 親メニュー |
子メニューの例 |
| うつ病向け |
気持ちの整理/睡眠/公的支援 |
| 読書 |
図書館活用術/本の紹介 |
| AI活用術 |
AI/ブログ記事作成 |
項目数は多すぎると見づらくなるため、親メニュー、子メニューともにそれぞれ6個以内が目安です。
なお、この記事で紹介するコードをそのまま使う場合、
親メニュー:全角9文字
子メニュー:全角8文字
までがレイアウト上の目安です。
この文字数におさめておくと、スマホ表示でも見やすく、設定もスムーズに進みます。
※この文字数以上にしたり、
親メニューのみにすることも可能です。
詳細は後ほど解説します。
※親メニューの先頭の1文字目をアイコンにすると視認性が上がります。
アイコンはGoogle絵文字のサイトで検索できます
基本的には
📌アクセス数が比較的多い記事のカテゴリー
📌これからも書き続けたい記事のカテゴリー
📌これから読まれると思えるカテゴリー
を選ぶとよいですが、
もしメニュー構成に迷ったら、ChatGPTなどのAIツールに相談するのもおすすめです。
たとえば次のように入力すると、適切な構成案を出してくれます。
あなたはプロブロガーです。私のブログのヘッダーの下にグローバルメニューを追加したいと思います。現在、カテゴリーは以下のものがあります。どのカテゴリーをグローバルメニューの項目に入れたらよいかアドバイスをお願いします。なお()内の数字はそのカテゴリーに割り当てた記事の数です。
#カテゴリー一覧#
カテゴリー名 (記事数)
なお、この後の工程で、
下の画像のグローバルメニューの
A[一番左の親メニュー]
→a1,a2,a3,a4,a5,a6[Aの子メニュー]
→B[左から2番目の親メニュー]
→以下同様
という順番に入力するので、
この時点でその順に整理しておくとスムーズです。

メニュー構成が決まったら、いよいよ実際の設置作業に入ります。
STEP2 詳細設定にコードを追加
ここでは、
「読者がこんな操作をしたら、こんな動作をして下さい」
といった指示をするコードを挿入します。
管理画面、左のサイドバーから
①「設定」
②「詳細設定」と進み、
③スクロールバーを高さの中央くらいまで下ろします。


「<head>要素にメタデータを追加」という項目があるので、
ここに、以下のコードをコピペします。
⚠️すでにコードが書かれている場合は、
このコードを一番上(先頭)に追加してください。
以降のコードも同様です。
▼クリックでコードを表示/非表示
- <script>
- document.addEventListener("DOMContentLoaded", function () {
- const hamburger = document.querySelector(".hamburger");
- const menu = document.querySelector(".gmenu");
-
- if (hamburger && menu) {
- // ハンバーガークリックでメニューをトグル
- hamburger.addEventListener("click", function (e) {
- e.stopPropagation();
- menu.classList.toggle("active");
- });
-
- // メニュー内クリックは伝播させない(閉じない)
- menu.addEventListener("click", function (e) {
- e.stopPropagation();
- });
-
- // ドキュメント全体のクリックで、メニューが開いていれば閉じる
- document.addEventListener("click", function (e) {
- // もしメニューが開いていたら閉じる
- if (menu.classList.contains("active")) {
- menu.classList.remove("active");
- }
- });
- }
- });
- </script>
最後に、「保存する」ボタンを忘れずに押します。

STEP3 スマホ表示に対応させる
スマホで見たときにメニューが崩れないように、以下の設定を行っておきましょう。
①管理画面左側「デザイン」を選択
すると、右下のような画面に切り替わります。

②「スマートフォン」のマークをクリックします。
③「詳細設定」をクリックします。

その中にある「レスポンシブデザイン」という文字の左隣にあるチェックボックスにチェックを入れましょう。

これで、PCとスマホの両方でメニューがきれいに表示されるようになります。
STEP4 ヘッダにコードを追加
⚠️ここから先は、やや細かい設定作業が続きます。
作業のやり直しを防ぐため、
こまめに「変更を保存する」ボタンを押すことをおすすめします。

ここでは、グローバルメニューに入れる文字や、リンク先を指定します。
管理画面左側から
①「デザイン」
②「カスタマイズ(スパナのマーク)」
③「ヘッダ」と進み、
④スクロールバーを下ろします。


「ブログタイトル下」という項目に、
以下のコードを貼り付けます。
▼クリックでコードを表示/非表示
- <!-- ハンバーガーアイコン -->
- <div class="hamburger">
- <span></span>
- <span></span>
- <span></span>
- </div>
-
- <!-- グローバルメニュー -->
- <nav class="gmenu-wrapper">
-
- <ul class="gmenu">
-
- <li class="gmenu-item">
- <a href="#">A</a>
- <ul class="submenu">
- <li>
- <a href="#">a1</a>
- </li>
- <li>
- <a href="#">a2</a>
- </li>
- <li>
- <a href="#">a3</a>
- </li>
- <li>
- <a href="#">a4</a>
- </li>
- <li>
- <a href="#">a5</a>
- </li>
- <li>
- <a href="#">a6</a>
- </li>
- </ul>
- </li>
- <li class="gmenu-item">
- <a href="#">B</a>
- <ul class="submenu">
- <li>
- <a href="#">b1</a>
- </li>
- <li>
- <a href="#">b2</a>
- </li>
- <li>
- <a href="#">b3</a>
- </li>
- <li>
- <a href="#">b4</a>
- </li>
- <li>
- <a href="#">b5</a>
- </li>
- <li>
- <a href="#">b6</a>
- </li>
- </ul>
- </li>
- <li class="gmenu-item">
- <a href="#">C</a>
- <ul class="submenu">
- <li>
- <a href="#">c1</a>
- </li>
- <li>
- <a href="#">c2</a>
- </li>
- <li>
- <a href="#">c3</a>
- </li>
- <li>
- <a href="#">c4</a>
- </li>
- <li>
- <a href="#">c5</a>
- </li>
- <li>
- <a href="#">c6</a>
- </li>
- </ul>
- </li>
- <li class="gmenu-item">
- <a href="#">D</a>
- <ul class="submenu">
- <li>
- <a href="#">d1</a>
- </li>
- <li>
- <a href="#">d2</a>
- </li>
- <li>
- <a href="#">d3</a>
- </li>
- <li>
- <a href="#">d4</a>
- </li>
- <li>
- <a href="#">d5</a>
- </li>
- <li>
- <a href="#">d6</a>
- </li>
- </ul>
- </li>
- <li class="gmenu-item">
- <a href="#">E</a>
- <ul class="submenu">
- <li>
- <a href="#">e1</a>
- </li>
- <li>
- <a href="#">e2</a>
- </li>
- <li>
- <a href="#">e3</a>
- </li>
- <li>
- <a href="#">e4</a>
- </li>
- <li>
- <a href="#">e5</a>
- </li>
- <li>
- <a href="#">e6</a>
- </li>
- </ul>
- </li>
- <li class="gmenu-item">
- <a href="#">F</a>
- <ul class="submenu">
- <li>
- <a href="#">f1</a>
- </li>
- <li>
- <a href="#">f2</a>
- </li>
- <li>
- <a href="#">f3</a>
- </li>
- <li>
- <a href="#">f4</a>
- </li>
- <li>
- <a href="#">f5</a>
- </li>
- <li>
- <a href="#">f6</a>
- </li>
- </ul>
- </li>
- </nav>
4-1 メニューの数を調整
貼り付けたら、メニューの数を調整します。
上記のコードでは、親メニュー、子メニューともに6つずつになっています。
STEP1で作成したメモで、親メニュー、子メニューの数が6未満の箇所を確認します。

親メニューを減らしたいときは
<li class="gmenu-item"> 〜 </li>
のブロックごと選択し、
「backspace」か「delete」で削除します。
下の図では
親メニューを5つにするため、
一番右側、Fを削除しています。

子メニューを減らしたいときは
<li>の直前〜</li> の行を選択し、
「backspace」か「delete」で削除します。
下の画像では
一番左側、Aの子メニューを2つにするため、
a3以降を削除しています。

※もし子メニューをゼロにし、親メニューのみにしたい場合は、
下の画像のように、
<ul class="submenu">から</ul>までを選択し、
同様に削除します。

4-2 メニューの名称を入力
変更を保存したら、子メニューの名称を正しい名称に変更します。
親メニューは、A〜F、
子メニューは、a1、b2の部分に
STEP1のメモのものを入力します。


上の画像では、
一番左の親メニューを123456789
すぐ下の子メニューを12345678
にしています。
4-3 URLを入力
下の画像のように、
それぞれのコード内にある
<a href="#"> の「#」部分に、URLを入れましょう。
数が多いと大変ですが、一つずつ入力していきます。

※URLをコピーする際は、「Ctrl+A」で全選択 → コピー → 貼り付けが確実です。
部分コピーによるリンク切れを防げます。
これでSTEP4は完了です。
細かい作業が多くて大変だったかと思います。
でも、ここまでくればもう一息です!🌿
次は、デザインを整えるためのコードを追加していきましょう。
STEP5 デザインCSSに追加する
グローバルメニューのデザインを指定します。
①管理画面左側の「デザイン」
②「カスタマイズ」と進みます。
③下にスクロールします。


一番下に「デザインCSS」という項目があります。
ここを一度、クリックすると上の画像の入力画面が表示されるので、ここに以下のコードをコピペします。
マーカーで示した部分を中心に、変更したい箇所を調整します。
▼クリックでコードを表示/非表示
- /* グローバルメニューの基本構造 */
- nav ul {
- list-style: none;
- display: flex;
- margin: 0;
- padding: 0;
- }
-
- nav ul li {
- position: relative;
- flex: 1; /* ← 各項目を均等幅にして、左端から右端まで hover 対象にする */
- text-align: center;
- }
-
- /* リンクをブロック化して、領域全体を hover 対象にする */
- nav ul li > a {
- display: block;
- padding: 12px 0;
- text-decoration: none;
- color: #333;
- }
-
- /* メニューの全体ラッパー */
- .gmenu {
- display: flex;
- justify-content: space-between;
- list-style: none;
- padding: 0;
- margin: 0;
- background: #f5f5f5;/* 親メニューの背景色*/
- max-width: 1160px; /* デザインに応じて横幅調整(例: 1000px, 1100pxなど) */
- margin-left: auto;
- margin-right: auto;
- }
-
- /* 親メニューのリンク */
- .gmenu-item {
- position: relative;
- }
-
- .gmenu-item > a {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 15px 10px;
- color: inherit;
- text-decoration: none;
- height: 100%;
- width: 100%;
- box-sizing: border-box;
- font-family: 'Noto Sans JP', 'メイリオ', sans-serif;/* 親メニューのフォント*/
- font-size: 18px;/* 親メニューの文字サイズ*/
- font-weight: bold;/* 親メニューの文字を太字に*/
- }
-
- /* 疑似リンクをリンクに見せない処理 */
- .gmenu-item > a[href="#"] {
- pointer-events: none;
- cursor: default;
- color: inherit;
- text-decoration: none;
- }
- /* hover時の子メニュー表示 */
- nav ul li:hover ul {
- display: block;
- }
-
- /* 子メニューの枠線 */
- nav ul li ul {
- display: none;
- position: absolute;
- width: calc(100% - 30PX); /*子メニューの横幅*/
- top: 100%;
- left: 0;
- border: 1px solid #ccc;
- }
-
- /* 子メニューの枠線など*/
- .gmenu-item .submenu {
- display: none;
- position: absolute;
- background: #fff;/* 子メニューの背景色*/
- border: 1px solid #ccc;
- min-width: auto /* 最小幅 */
- width: auto; /* 自動サイズ */
- left: 30px; /*子メニュー左側の余白 */
- top: 100%;
- z-index: 1000;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /*子メニューの影*/
- list-style: none;
- padding-left: 0; /* インデントもリセット*/
- margin: 0; /* 余白も消して整える */
- }
-
- /* 子メニューの文字を左揃えにする */
- nav ul li ul li {
- text-align: left;
- }
-
- nav ul li ul li a {
- padding-left: 16px; /* 左に少し余白を入れると見やすい */
- }
-
- /* 子メニューのフォントなど*/
- .submenu li a {
- display: block;
- padding: 10px;
- text-decoration: none;
- color: #333;
- font-family: 'Noto Sans JP', 'メイリオ', sans-serif; /*子メニューのフォント*/
- font-size: 16px; /*子メニューの文字サイズ*/
- }
-
- /* 最後のアイテムの右線を消す */
- .gmenu-item:last-child {
- border-right: none;
- }
-
- /* ホバー時の効果 */
- .gmenu-item:hover {
- background: #e0e0e0;
- }
-
- /* 小カテゴリのリストマーカーを消す */
- .submenu {
- list-style: none;
- padding-left: 0; /* 左の余白も消す */
- margin: 0;
- }
-
- .submenu li {
- list-style: none; /* li自体にも効かせる */
- }
-
- .gmenu-item:hover .submenu {
- display: block;
- }
-
- /* 子メニュー項目 */
- .submenu li {
- padding: 0; /* li自体にはpaddingなし */
- border-bottom: 1px solid #eee;
- }
-
- /* 小カテゴリーのリンクをli全体に広げる */
- .submenu li a {
- display: block;
- padding: 10px;
- text-decoration: none;
- color: #333;
- }
-
- /* ホバー時の背景色など(任意) */
- .submenu li a:hover {
- background-color: #f0f0f0;
- }
-
- .submenu li:last-child {
- border-bottom: none;
- }
-
- /* ハンバーガーアイコンを常に非表示にする(デフォルト) */
- .hamburger {
- display: none;
- }
-
- /* スマホサイズ(〜767px)で表示されるハンバーガーメニュー */
- @media screen and (max-width: 767px) {
- .hamburger {
- display: block;
- position: fixed;
- top: 10px;
- left: 10px;
- z-index: 9999;
- cursor: pointer;
- width: 40px;
- height: 30px;
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* 影で立体感 */
- background-color: rgba(0, 0, 0, 0.5); /* 透明な黒 */
- border-radius: 6px; /* 角丸で柔らかく */
- padding: 5px;
- }
-
- .hamburger span {
- display: block;
- height: 4px;
- margin: 4px 0;
- background-color: #fff; /* 白い線でコントラストを強調 */
- border-radius: 2px;
- }
- }
-
- /* デフォルトでは非表示 */
- @media screen and (max-width: 767px) {
- .gmenu {
- display: none;
- flex-direction: column;
- position: fixed;
- top: 50px;
- left: 0;
- width: 100%;
- background-color: rgba(0, 0, 0, 0.6); /* ダークな背景 */
- background-color: rgba(255, 255, 255, 0.9); /* ← 背景色白+90%不透明 */
- z-index: 9998;
- }
-
- .gmenu.active {
- display: flex;
- }
- }
-
親メニューと子メニューがずれたら
上記のコードは、はてなブログで最も使用頻度の多い「smooth(デフォルト)」というサインテーマで動作しやすいようにしています。

他のデザインテーマでは、下の画像のように、親メニューと子メニューが少しずれてしまう場合があります。

この場合、
86行目の「 left: 30px; /*子メニュー左側の余白 */」
にある「30」を「28.5」などに変更すると改善します。
文字が1行におさまらないときは
まず文字サイズを変更してみてください。
親メニューの場合、
52行目の「 font-size: 18px;/* 親メニューの文字サイズ*/」
子メニューの場合、
111行目の「 font-size: 16px; /*子メニューの文字サイズ*/」
のそれぞれの数値を小さくします。
それでもおさまらない場合は、
より短い名称に変更するか、
STEP2で紹介した親メニューの数を少なくすることを検討してください。
STEP6 動作確認
「変更を保存する」を押した後、自動的に表示されるプレビュー画面で、見やすいレイアウトになっているか確認します。
⚠️画面右側のサイドバーに広告を設置済み、
もしくは導入予定の場合は、
一番右側の子メニューが広告にかぶらないかも確認します。

スマホで三本線メニューが表示されるか確認する場合、左上に表示されるはずの三本線メニューが、「設定を更新しました」というメッセージと重なってしまいます。

このため一度、「管理画面に戻る」を押し、
再び「デザイン」画面を開いてください。
ウィンドウの横幅を小さくすると表示されます。

三本線メニューにカーソルを置き、記事冒頭のGIFと同じ動作になるか確認します。
念のため、「変更を保存する」で表示されるメッセージの「確認する」から、正しく表示されるか確認して完了です。

おわりに|少しずつ整えて“見やすいブログ”に
お疲れさまでした。
細かい作業が多いですが、一度設置してしまえば長く使えるのがグローバルメニューの魅力です。
見た目を整えることは、単なるデザイン作業ではありません。
それは「読者にやさしい導線をつくる」という、信頼を積み重ねる行為でもあります。
焦らず、少しずつ調整していきましょう。
きっとあなたのブログが、自分にも読者にも心地よい空間に育っていくはずです。
本ブログのブログ記事作成カテゴリーでは、ほかにもブログ初心者の方に役立つ情報を発信していますので、ぜひご覧ください!