【2025年版】SWELLメニュー完全攻略

「SWELLメニューって、どこまでカスタマイズできるの？」

「グローバルナビって重要なの？」

「訪問者が他のページを見てくれない…」

この記事では、初心者でも安心して使えるSWELLの機能を活かしながら、グローバルナビ（共通メニュー）の役割や設定方法、回遊率アップにつながる工夫までをわかりやすく解説します。

グローバルナビを見直すだけで、訪問者が迷わず情報にたどり着けるサイトに変わります。

SWELLの機能を活かせば、見た目も操作性もバッチリなメニューが作れて、信頼感と収益チャンスが自然とアップしていきますよ。

あなたのブログを、もっと伝わる・選ばれる場所へ整えていきましょう！

グローバルナビとは？

グローバルナビとは、どのページを見ていても上部に表示されるメニューのことです。

サイト内のページを簡単に移動できる便利なナビゲーションで、見た目の印象にも関わります。

グローバルナビは、ヘッダーのすぐ下やロゴの横など、ページ上部に目立つように表示されます。

初めて来た人でも迷わず移動できるようにするため、分かりやすく整理しておくことが大切です。

表示される場所と役割

グローバルナビは、基本的にサイトのヘッダーに配置されます。

どのページでも共通で表示されるため、訪問者にとって道しるべのような役割があります。

常に同じ場所に表示されることで、ユーザーが迷わず目的のページにたどり着けます。

たとえば、料理レシピのブログなら「朝ごはん」「お弁当」「夕ごはん」などに分けると、訪問者が自分の目的のページを探しやすくなります。

企業サイトであれば「サービス内容」「料金」「お問い合わせ」などが一般的です。

グローバルナビの構成をしっかり考えておくと、SEOや離脱率にも良い影響があります。

まずは「どこに何を載せるか」を紙に書いて整理するところから始めてみてください。

グローバルナビの基本を押さえておくだけで、訪問者にとって親切なサイトになります。

メリット：回遊率アップ・ブランド力向上

グローバルナビを上手に活用すると、ユーザーが色々なページを見てくれるようになります。

さらに、統一されたデザインで見せれば「このサイトはちゃんとしている」と思ってもらえます。

たとえば、ネットショップで「新作」「セール」「人気アイテム」などに分けておくと、訪問者がどんどん商品ページを見てくれます。

「わかりやすくて見やすい」サイトだと、リピーターも増えやすくなります。

グローバルナビにロゴと統一感を持たせることで、ブランドの信頼感も高まります。

サイトの第一印象を決める場所でもあるので、シンプルで見やすく作るのがポイントです。

グローバルナビを整えるだけで、ユーザーの行動や印象が大きく変わるのです。

ヘッダーメニューを作成する手順

WordPressでグローバルナビを作るには、ヘッダーメニューを設定する必要があります。

メニューの追加や順番変更などは、すべて管理画面から簡単にできます。

メニュー作成は、慣れれば3分もかかりません。

順番や名前も後から簡単に直せるので、まずは試してみることが大事です。

「外観＞メニュー」を開く

WordPressの管理画面にログインし、「外観」→「メニュー」をクリックします。

新しいメニューを作る

名前は「グローバルナビ」や「メインメニュー」など、分かりやすいものにしましょう。

名前は自由ですが、他と間違えないようにしておくのが大切です。

メニューの位置は「グローバルナビ」を選択します。

入力が終わったら「メニューを作成」をクリックします。

「メニュー作成」後は、まだ項目が何も入っていない状態です。

次に、表示させたいページやリンクを追加していきます。

ここまで来れば、あとは並べて保存するだけなので簡単です。

メニュー項目を追加・並べ替える

作成したメニューに、表示させたいページを追加します。

左側の「固定ページ」「投稿」「カスタムリンク」などから項目を選び、「メニューに追加」ボタンを押します。

追加したメニューはドラッグ操作で順番変更ができます。

 メニュー項目の追加方法

ページ数が多い場合は、優先順位を考えて並べることが大切です。

表示順によってクリック率も変わるため、何度も試して最適な順番を探しましょう。

並べ替えのあとも保存を忘れずに行ってください。

子メニューでスッキリ整理

メニューが多いときは、子メニューで親子関係を作ると見やすくなります。

項目をまとめて折りたたむことで、ナビゲーションがすっきり整理されます。

親子関係をドラッグで設定

メニュー編集画面で、項目を少し右にドラッグすると子メニューになります。

親メニューにマウスを合わせると、下に子メニューが表示されます。

親と子の関係はドラッグだけで簡単に設定できるのが、WordPressの便利なところです。

たとえば「ブログ」という親メニューの下に、「記事一覧」「人気記事」「カテゴリ別」などを子メニューとしてまとめられます。

このようにすると、ひと目で「この下に何があるのか」が分かるようになります。

子メニューは、1階層だけでなく、孫メニューも作ることができますが、多すぎると逆に分かりにくくなるので注意が必要です。

 子メニューの設定方法

サブテキストで補足説明

メニューの名前だけでは内容が伝わりにくいときに便利なのが「サブテキスト」です。

SWELLではサブテキスト表示の機能がデフォルトで搭載されています。

WordPressのメニュー設定で、各項目に説明文を追加するだけで表示できます。

たとえば「サービス」の下に「料金・内容を紹介しています」と入れるだけで、訪問者にとって親切な案内になります。

SWELLではスタイルも整っているため、特別なCSSを追加しなくても自然なデザインで表示されます。

もし説明が表示されないときは、「表示オプション」で「説明」にチェックが入っているかを確認してください。

 サブテキストの設定方法

SWELLで使えるアイコンを活用

SWELLには、メニューや見出しに使えるおしゃれなアイコンがたくさん用意されています。

アイコンを追加することで、目を引きやすくなり、操作性も上がります。

SWELLではアイコンが標準装備されており、クラス名を入力するだけで表示されます。

たとえば「お問い合わせ」メニューにメールアイコン を追加すると、ひと目で内容が伝わります。

管理画面上でもプレビューされるため、確認しながら簡単に設定できます。

メニューにアイコンを加えることで、使いやすさとデザイン性を両立できます。

 アイコンの設定方法

デザインをおしゃれにカスタマイズ

グローバルナビは機能だけでなく、見た目も大切です。

デザインを整えることで、サイト全体の印象がグッと良くなります。

フォントサイズ・色・余白を整える

メニューの文字は、小さすぎると読みにくくなります。

フォントサイズや色、上下左右の余白をCSSで調整すると、一気に見やすくなります。

余白は上下10px以上あると、スマホでも押しやすくなります。

以下は、SWELLでの具体的なCSS例です。

/* グローバルナビの文字サイズ・色・余白調整 */
.c-gnav>.menu-item> a .ttl{
  font-size: 16px;          /* 文字サイズ */
  color: #333;              /* 文字色（濃いグレー） */
  padding: 12px 18px;       /* 上下12px 左右18pxの余白 */
}

/* ホバー時の色変化 */
.c-gnav>.menu-item> a .ttl:hover {
  color: #1e90ff;           /* ホバー時の文字色（青） */
  background-color: #f5f9ff;/* ホバー時の背景色 */
  transition: 0.3s;         /* 滑らかに変化 */
}

このCSSを外観 → カスタマイズ → 追加CSSに入れるだけで反映されます。

この設定で、PCでもスマホでも押しやすく、視認性の高いメニューになります。

背景色や文字色は、サイトのトーンに合わせて調整してください。

スマホ表示も忘れずチェック

グローバルナビは、パソコンだけでなくスマホでも見やすく整える必要があります。

スマホ利用者が多い今、モバイル対応は欠かせないポイントです。

モバイルでの使いやすさを高めるには、表示の切り替えやボタンの配置も工夫しましょう。

タップしやすい幅に調整

スマホでは、ボタンが小さすぎるとタップしづらくなります。

メニュー項目は、十分な横幅と高さを確保しておくことが重要です。

文字サイズだけでなく余白もしっかり取るようにしましょう。

たとえば、上下に15px、左右に20pxの余白を入れると押しやすくなります。

ボタンの文字が小さくても、周囲の余白が広ければ問題ありません。

また、スマホでのメニューは縦並びになるため、詰め込みすぎないことも大切です。

片手操作しやすい配置テク

スマホでは、右利き・左利きに関係なく片手で操作する人が多いです。

親指が届く範囲を考えて、ボタンの配置を工夫しましょう。

よく使うメニューは下部固定すると便利なこともあります。

たとえば、LINEやInstagramなどのアプリでは、主要なナビゲーションを下に固定しています。

同じように、サイトでも「ホーム」「検索」「お問い合わせ」などを下に配置すると、片手でも使いやすくなります。

一部の読者層（シニアや子ども）にも優しい設計になるので、ぜひ検討してみてください。

困ったときの解決ガイド

グローバルナビが表示されない、デザインが崩れるなどのトラブルはよくあります。

そんなときのために、よくある原因と対策を知っておくと安心です。

メニューが表示されない・崩れる原因

ナビが出ないときは、メニューの場所指定ミスやCSSの影響が多いです。

テーマのアップデートや変更で設定がリセットされることもあります。

追加CSSを設定している場合、間違いがないか見直しましょう。

たとえば、「グローバルナビ」のチェックが外れていると、ナビが表示されなくなります。

「外観＞メニュー」から下記部分にチェックが入っているか確認しましょう！

 【SWELL 子テーマ】の使い方完全ガイド！初心者向け解説

キャッシュとプラグインを確認

ナビの表示が変わらないときは、ブラウザやサーバーのキャッシュが原因のことがあります。

また、プラグインの干渉でメニューが崩れることもあります。

プラグインの一時停止で原因切り分けも行いましょう。

たとえば「W3 Total Cache」や「LiteSpeed Cache」などの高速化プラグインが影響している場合があります。

ブラウザ側のキャッシュも強く残ることがあるため、シークレットモードで確認するのも有効です。

表示が直らないときは、プラグインを一つずつ無効化し、影響のあるものを特定していきましょう。

クリック数を計測して改善するコツ

グローバルナビが表示されていても、クリックされていない項目は見直しが必要です。

不要な項目を減らすことで、重要な情報に目が行きやすくなります。

人気の項目を左に配置するなど、ユーザーの動線を工夫しましょう。

たとえば、ナビに「会社情報」「アクセスマップ」「採用情報」があっても、採用情報がほぼクリックされていない場合は、下層メニューに移す方が効果的です。

ヒートマップは「UserHeat」や「Clarity」など無料ツールもあるので、気軽に使えます。

実際のクリックデータを見ながら改善を重ねると、ナビの完成度が高まります。

Googleアナリティクスについては別の記事で詳しく解説しています。

 初心者でも迷わない！Googleアナリティクスの使い方と導入方法

まとめ

グローバルナビは、ただのメニューではなく、サイト全体の印象やユーザーの行動に直結する重要なパーツです。

「見やすく・使いやすく・おしゃれに」整えて、訪問者にとって親切なナビゲーションを目指しましょう。

アイコンやサブテキストで個性を出して、クリック率アップを狙いましょう。

よくある質問

グローバルナビとは何ですか？

グローバルナビとは、サイトの全ページで共通して表示される上部のメニューのことです。

主にヘッダー内に設置され、ユーザーがどのページにいても目的のページに移動しやすくなるように設計されています。

グローバルナビを設置するメリットは？

グローバルナビを設置することで、回遊率の向上・直帰率の低下・ブランド力アップなどの効果が期待できます。

また、デザインに統一感が出て、ユーザーに「しっかりしたサイト」という印象を与えられます。

グローバルナビの作り方は？

WordPressの「外観 ＞ メニュー」から作成できます。

メニュー名を設定し、固定ページや投稿、カスタムリンクを追加して並べ替え、「グローバルナビ」として保存するだけで簡単に設定できます。

子メニュー（ドロップダウン）はどうやって設定するの？

メニュー編集画面で、子メニューにしたい項目を親メニューの下にドラッグし、少し右にずらすと自動で親子関係が設定されます。

複数階層にも対応していますが、わかりやすさを保つため「親 → 子」程度に抑えるのが理想です。

SWELLでサブテキスト（補足説明）を追加する方法は？

「外観 ＞ メニュー」画面で「表示オプション」を開き、「説明」にチェックを入れると、各メニュー項目に補足テキストが入力できるようになります。

SWELLではこの説明文がデフォルトで表示されるので、クリック率アップに効果的です。

グローバルナビにアイコンを付けられますか？

はい、SWELLではアイコンのクラス名（例：）を「ナビゲーションラベル」に入力するだけで、メニューにアイコンを表示できます。

視認性やデザイン性を高めたいときに便利です。

グローバルナビのデザインをカスタマイズするには？

「外観 ＞ カスタマイズ ＞ 追加CSS」で文字サイズ・色・余白などを調整できます。

たとえば、フォントサイズは16px前後、余白は上下左右10px以上あるとスマホでも見やすく、押しやすいです。

スマホでも使いやすくするには？

スマホ表示では、ボタンのサイズやタップ領域を広く確保することが重要です。

Googleはタップ領域を48px以上と推奨しています。また、右手の親指が届きやすい範囲にメニューを配置すると、使いやすくなります。

グローバルナビが表示されない原因は？

メニューの位置指定忘れや、テーマ更新による初期化、追加CSSの影響などが考えられます。

「外観 ＞ メニュー」でグローバルナビの表示位置にチェックが入っているか確認してください。

メニューが崩れたときの対処法は？

キャッシュの削除やプラグインの一時停止で改善されることがあります。

ブラウザやサーバーのキャッシュをクリアし、高速化系プラグインが影響していないか確認しましょう。

クリックされないメニューはどうすればいい？

Googleアナリティクスやヒートマップでクリック状況を確認し、使われていない項目は削除・整理するのが効果的です。

人気のある項目を左に配置することで、よりクリックされやすくなります。