SWELLのメニュー設定方法｜ヘッダー・フッター・スマホ用メニューを初心者向けに解説【2026年版】

SWELLでサイトを整え始めると、「ヘッダーとフッターには何を置く？」「スマホだけ別メニューが必要？」「作ったのに表示されない」と迷いやすいものです。

最初に押さえたいのは、リンクの集まりである「メニュー」と、それを置く「表示位置」は別の設定だという点です。用途に合う項目を作り、表示位置へ割り当てると、読者が必要なページへ移動できるようになります。

この記事では、SWELLのヘッダー・フッター・スマホ用メニューの違いから、作成、表示位置の割り当て、PC・スマートフォンでの確認までを初心者向けに解説します。先にサイト全体の表示設定を整えたい方は、SWELLの基本設定とカスタマイズ方法もあわせて確認してください。

本記事はSWELLを有効化したサイトの「外観」→「メニュー」を使う手順です。2026年10月4日にWordPress 7.1.2／SWELL 2.18.0（子テーマ利用）の画面と公式マニュアルを確認しました。別のテーマでは設定画面や表示位置が異なる場合があります。

SWELLのメニューの種類と表示場所

SWELLでは、WordPressの「外観」→「メニュー」でメニュー項目と表示位置を設定します。主な案内に使う5つの表示位置は次のとおりです。「ピックアップバナー」は用途が異なるため、本記事では扱いません。

表示位置	主な表示場所	向いている内容
グローバルナビ	PCのヘッダー	主要カテゴリー、初めての方へ、運営者情報など
フッター	ページ最下部	お問い合わせ、運営者情報、プライバシーポリシー、免責事項など
スマホ用ヘッダー	スマホのヘッダー	常に見せたい少数のリンク
スマホ開閉メニュー内	メニューボタンを開いた画面	スマホ読者向けの主要な導線
固定フッター（SP）	スマホ画面の下部	メニュー、検索、目次、ページ上部など頻繁に使う操作

グローバルナビはPCの主要な案内

グローバルナビは、PCでヘッダーに表示される主要メニューです。SWELL公式マニュアルでは、スマートフォン表示時のグローバルナビは開閉メニュー内へ移動する仕様と案内されています。

サイト全体の入口になるため、読者がよく探す主要カテゴリーや案内ページを優先します。階層を深くしすぎると選びにくいため、最上位は役割を説明できる項目に絞りましょう。

フッターは補助情報と信頼情報を案内する

フッターメニューは、本文を読み終えた後に確認されやすい位置です。お問い合わせ、運営者情報、プライバシーポリシー、免責事項など、サイトの信頼性や運営に関わるページをまとめると役割が明確になります。

スマホ用は3種類を混同しない

「スマホ用ヘッダー」「スマホ開閉メニュー内」「固定フッター（SP）」は別の表示位置です。すべてを使う必要はありません。まずはグローバルナビとスマホ開閉メニューを整え、必要な場合だけヘッダーや固定フッターへ追加すると、情報を増やしすぎずに済みます。

メニューを作る前に掲載項目を整理する

設定画面を開く前に、載せたいページを「主要な案内」と「補助的な案内」に分けます。読者が迷わないよう、項目名だけでリンク先を想像できる言葉を使いましょう。

判断項目	確認すること	避けたい例
目的	読者が次に行うことと関係しているか	運営者だけが使う管理上のリンク
名称	リンク先が一目で分かるか	「その他」「詳しくはこちら」だけ
数	一画面で選択肢を把握できるか	似た項目を細かく並べる
階層	親子関係が自然か	深い階層や重複した子メニュー
更新性	公開状態やURLを保守できるか	未公開ページや変更予定のURL

HOAI Journalでは、ヘッダーに主要カテゴリー、フッターに運営・規約関連ページを置き、役割を分けています。同じページを複数の場所へ置く場合も、読者がその場所で必要とする理由があるかを確認します。

WordPressでメニューを作成する

掲載項目が決まったら、WordPress管理画面でメニューを作成します。既存メニューを直す場合は、先に「位置を管理」で割り当てを確認し、「メニューを編集」で対象を選んでください。新しく作る場合はSTEP 1から進めます。

作成・項目追加・子メニューの基本操作は、SWELL公式のメニュー設定手順でも確認できます。

ヘッダーメニュー（グローバルナビ）を設定する

作成したメニューの表示位置で「グローバルナビ」を選択すると、PCのヘッダーへ表示されます。SWELL公式のグローバルナビ設定方法でも、メニュー作成から表示位置、子メニューまで確認できます。

ヘッダーは全ページで目に入りやすいため、項目数を増やしすぎないことが重要です。長い名称や深い子階層は避け、PCで文字が折り返されないか、ホバー時に子メニューが操作できるかを確認します。

色、レイアウト、ホバー効果は「外観」→「カスタマイズ」→「ヘッダー」で調整できます。メニュー項目そのものは「外観」→「メニュー」、見た目はカスタマイザーと役割を分けて考えましょう。

フッターメニューを設定する

フッター用メニューを作成し、表示位置で「フッター」を選択します。サイトの主要な記事導線を繰り返すより、運営者情報やお問い合わせ、ポリシーなど、読み終えた後に確認される補助情報をまとめると使いやすくなります。

フッターの色やSNSアイコンなどはカスタマイザーで調整できます。詳細はSWELL公式のフッター設定方法を確認してください。

スマホ用メニューを設定する

スマートフォンでは表示領域が限られるため、PCと同じ項目をそのまま並べる必要はありません。まず、読者がメニューボタンを開いたときに表示される「スマホ開閉メニュー内」を整えます。

スマホ開閉メニュー内を設定する

SWELLでは、専用メニューを割り当てていない場合、グローバルナビがスマホの開閉メニュー内に表示されます。「スマホ開閉メニュー内」へ別メニューを割り当てると、そのメニューが優先されます。

PCとスマホで項目を共通化できるなら、同じメニューを使うと保守しやすくなります。スマホだけ項目を減らす場合は別メニューを作り、「スマホ開閉メニュー内」だけに割り当てて保存します。共通のメニューから項目を削除すると、PC側からも消える点に注意してください。

開閉メニューの背景色、文字色、タイトルなどは、「外観」→「カスタマイズ」→「サイト全体設定」→「スマホ開閉メニュー」で調整できます。詳しい項目はSWELL公式のスマホメニュー設定方法で確認できます。

スマホ用ヘッダーは少数のリンクに絞る

「スマホ用ヘッダー」に割り当てたメニューは、スマホのヘッダー部分へ表示されます。スマホ用ヘッダーの子メニューは非表示になるため、表示位置の選び方と詳しい仕様は、SWELL公式のグローバルナビ（ヘッダーメニュー）設定方法で確認してください。

横幅が狭いため、多数のリンクには向きません。常に表示する必要があるページがなければ、メニューボタンだけでも問題ありません。

固定フッター（SP）は必要な機能だけ使う

固定フッターメニューは、スマホ画面の下部へ常時表示できる機能です。リンク用のメニューを作成し、表示位置の「固定フッター（SP）」を選んで保存します。公式マニュアルでは「固定フッターメニュー（SP）」と表記されている箇所もあります。

検索・メニュー開閉・ページトップ・目次などの特殊ボタンは、「外観」→「カスタマイズ」→「サイト全体設定」→「下部固定ボタン・メニュー」で設定します。目次ボタンは、本文に目次がある投稿・固定ページで表示される仕様です。リンク項目と特殊ボタンは設定場所を分けて確認してください。

便利な一方で、本文の表示領域を狭くします。頻繁に使う操作だけに限定し、項目を置く理由が説明できない場合は無理に有効化しません。設定方法はSWELL公式のスマホ用固定フッターメニューを参照してください。

メニューの表示をPCとスマホで確認する

保存後は公開画面で確認します。トップページだけでなく、投稿・固定ページ・カテゴリー一覧でも、割り当てたメニューが意図した場所に出るかを点検しましょう。

• PCのヘッダーで項目名が折り返されていない
• 子メニューがホバーまたはタップで開き、リンクを選べる
• スマホの開閉メニューに意図した項目と順序が表示される
• リンク先が公開済みで、404や意図しない転送がない
• ログアウトした閲覧者にも必要なページが開ける
• 現在地やリンク文字の色に十分なコントラストがある
• 固定フッターを使う場合、本文やCookie表示と重ならない

カスタマイザーにはPC・タブレット・スマートフォンのプレビュー切り替えがあります。ただし、画面幅やブラウザによって見え方が変わるため、可能であれば実際のスマートフォンでも確認してください。

メニューが表示されないときの確認ポイント

まず「表示されない場所」と「出ている内容」を確認します。PCのヘッダー、スマホの開閉メニュー、スマホ用ヘッダーでは確認する設定が違います。症状に合う項目から調べ、設定が正しいことを確かめてからキャッシュを確認しましょう。

PCのヘッダーに表示されない

「外観」→「メニュー」で対象メニューを選び、項目が追加されていることと、表示位置の「グローバルナビ」にチェックがあることを確認して「メニューを保存」を押します。メニュー名を「ヘッダー」にしただけでは表示位置は決まりません。「位置を管理」では、どのメニューが各表示位置に割り当てられているかを一覧で確認できます。

別のメニューを編集している

「位置を管理」で変更したい表示位置のメニュー名を確認し、「メニューを編集」の「編集するメニューを選択」で同じ名前を選びます。項目の文字を変えた場合は、保存後の公開画面でその文字が変わったかを確認してください。PCとスマホで別メニューを使っているときは、変更したい側のメニューを編集します。

スマホでPCと違うメニューが出る

SWELL公式のスマホメニューの説明のとおり、「スマホ開閉メニュー内」へ専用メニューを割り当てると、グローバルナビより優先されます。「位置を管理」で2つの位置に割り当てたメニュー名を見比べ、PCと同じ項目にしたい場合は同じメニューを割り当てます。保存後はスマホのメニューボタンを開き、項目名と順序を確認してください。

スマホ用ヘッダーで子メニューだけ出ない

「スマホ用ヘッダー」では子メニューが非表示になる仕様です。PCで表示される子メニューがここに出ないときは、キャッシュ削除では解決しません。スマホで必要なリンクは親階層に置くか、開閉メニューから案内します。表示位置の違いはSWELL公式のヘッダーメニュー設定で確認できます。

保存しても表示が変わらない

編集画面を開き直して、変更した項目と表示位置が保存されているか確認します。保存されていなければ保存し直し、保存済みなら公開画面を再読み込みします。それでも古い内容が出るときだけ、利用しているキャッシュ機能を一つずつ削除して再確認してください。完了の目安は、PCとスマホの目的の表示位置で、変更した項目名・順序が反映され、リンク先も正しく開くことです。

よくある質問

PCとスマホで同じメニューを使えますか？

はい。同じメニューへ複数の表示位置を割り当てられます。項目と順序を共通化したい場合は管理しやすい方法です。スマホだけ項目を減らしたい場合は、専用メニューを分けます。

グローバルナビの項目数に決まりはありますか？

一律の決まりはありません。PCで折り返さず、読者が選択肢を把握できる数へ絞ります。似た項目はカテゴリーや子メニューで整理し、スマホ表示も確認してください。

スマホ用ヘッダーと開閉メニューは両方必要ですか？

必須ではありません。通常は開閉メニューを先に整え、ヘッダーへ常時表示する必要がある少数のリンクがある場合だけスマホ用ヘッダーを使います。

子メニューはどのくらい深くしてよいですか？

深い階層はスマホで選びにくく、保守も難しくなります。本記事では、初心者はまず1段の子メニューまでを目安にすることをおすすめします。これは操作しやすさのための目安で、SWELLの仕様上の上限を示すものではありません。

固定フッターメニューは必ず設定した方がよいですか？

いいえ。本文の表示領域を使うため、検索や目次など、常時表示する価値がある操作だけに使います。目的が明確でなければ、まずは開閉メニューだけで十分です。

まとめ

SWELLのメニュー設定では、グローバルナビ、フッター、スマホ用の各表示位置を分けて考えることが大切です。まず読者の目的に必要な項目を決め、「外観」→「メニュー」で作成、並べ替え、表示位置の割り当てまで行います。

設定後はPCとスマートフォンの公開画面を確認し、項目名、順序、リンク先、子メニュー、表示崩れを点検しましょう。すべてのメニュー機能を使う必要はありません。読者が迷わず移動できる最小構成から始め、必要になったときに追加する方法が安全です。

目的別に次の記事を選ぶ

メニューの設定ができたら、次に整えたい場所に合わせて記事を選んでください。

ヘッダーやフッターの色、レイアウト、スマホ表示など、サイト全体の見た目を続けて整えたい方は次の記事へ進んでください。

トップページの構成と、メニューから案内する主要セクションを整理したい方はこちらを確認してください。