この記事では、WordPressでトップページ（フロントページ）を設定する方法をご紹介します。
今回は各種ナビゲーションを設置していきます。
説明アイコン「パン屋さんDEMO」にナビゲーションを設置し、「固定ページ」とつなげていきます。
メニューの全体像を理解しよう（図解つき）
トップページの導線を完成させる最後のステップが「メニュー設定」です。
WordPress（SWELL）では、下図のように3種類のナビゲーションエリアを持っています。
- グローバルナビゲーション（ヘッダー上部）・スマホ用ヘッダー
→ サイト全体の主要ページをまとめるメインメニュー - スマホ用開閉メニュー（ハンバーガーメニュー）
→ スマホ閲覧時に、折りたたまれた状態で開けるメニュー - フッター（ページ下部）
→ プライバシーポリシー・特商法表記など補足リンクを配置 - 固定フッター（スマホ専用）
→ スマホ閲覧時に常に下に表示されるナビ
グローバルナビの設定しよう
トップページ上部に表示される「グローバルナビ（ヘッダーメニュー）」は、
訪問者がサイト全体を見渡せるように導く“メインメニュー”です。
SWELLでは、WordPressの標準メニュー機能を使って簡単に設定できます。
🔧 手順
１．WordPress管理画面 → 外観 → メニュー を開きます。
２．「新しいメニューを作成」をクリックし、メニュー名を入力（例：グローバルナビゲーション）し、メニュー位置にチェックを入れる（グローバルナビ）。
３．追加したい固定ページ（お店について・素材へのこだわり・メニュー紹介・お問合せ）にチェックを入れ、
「メニューに追加」ボタンをクリック。順番を入れ替え・サブ項目を設定し、最後に「メニューを保存」をクリック。
説明アイコン読んでほしいページをグローバルナビに配置すると、サイト全体の導線がわかりやすくなります。
メニュー項目の順番は、ドラッグ＆ドロップで自由に入れ替え可能です。
また、グローバルナビの中にサブメニュー（階層メニュー）を作ることもできます。
メニュー項目を少し右にずらして配置すると、自動的に下層メニュー（子ページ）として表示されます。
４．サブメニューにすると、このように表示されます。
５．スマホ用ヘッターも同様に作成
📱スマホ用ヘッターのポイント
PCのグローバルナビゲーションと同じ構成にする必要はありません。
スマホは表示幅が狭いため、実際の見え方を確認しながら調整してみましょう。
メニューが入りきらない場合は、
一部をサブ項目（下層メニュー）にまとめるなど、
工夫しながら配置すると見やすくなります。
また、スマホには「スマホ用開閉メニュー（ハンバーガーメニュー）」もありますので、
ヘッターメニューにすべてを詰め込む必要はありません。
重要なページだけを厳選して表示するのがポイントです。
💡ワンポイント
- メニュー名は短めにすると見栄えがよく、スマホ時の折返しも防げます。
例：「料金一覧」より「料金」「アクセスマップ」より「アクセス」など。 - トップページへのリンクは「カスタムリンク」を使って
/と入力すればOKです。（うまくいかない場合は、ホームページのURLを記入してください）
✅ 表示確認
保存後、サイトを開くとヘッターにメニューが並んで表示されます。
１．PC画面で確認。グローバルナビゲーションはこの位置に出ます。
２．スマホ画面を確認。スマホ用ヘッターはこの位置に出ます。
グローバルナビとスマホ用ヘッダーは、それぞれ別に設定しておくのがおすすめです。
PCとスマホではメニュー幅が違うため、並び順や表示項目を変えたいときに柔軟に調整できます。
たとえば、
- PCでは「お問い合わせ」を右端に配置
- スマホでは「アクセス」を先頭に出す
といった工夫も可能になります。
同じページを使う場合でも、「スマホ用ヘッター」メニューを新規で作成し、
「メニュー設定」で ［スマホ用ヘッター］にチェック を入れて保存しましょう。
💡補足：
今後のデザイン調整やリニューアルにも対応しやすくなるため、
最初から PC用・スマホ用を分けて構成しておくのがおすすめ です。
スマホは機種によって表示幅が異なるため、
文字の改行位置など細かな見え方に差が出る場合があります。
すべての端末で完全に統一するのは難しいので、
最低限プレビューでおかしくないかを確認する程度で十分です。
🧩 2重にメニューが表示される場合
グローバルナビを設定したあと、右端に同じメニューが縦に並んで表示されることがあります。
これは、グローバルナビを設定する前からヘッターにナビゲーションが出ていたケースです。
SWELLでは、デフォルト状態でヘッダー右側にナビゲーションが自動表示されていることがあり、
そこに新しいグローバルナビを追加すると、2つのメニューが重なって出ることがあります。
その場合は、以下の手順で確認してみてください。
🔧 設定箇所の確認
外観 → カスタマイズ → ヘッター → レイアウト・デザイン設定
「ヘッダーのレイアウト（PC）」の項目を確認→「ヘッダーナビをロゴの横に（右寄せ）」に変更
説明アイコンこの「ヘッター設定」では、たとえば
・タイトル右側にナビを出す
・下に出す
・透過させる
といった表示を細かく設定できます。
追従の有無も調整できるので、実際にいくつか試してみると違いが分かりやすいですよ。
フッターナビの設置しよう
説明アイコングローバルナビの設置と同じです。
１．WordPress管理画面 → 外観 → メニュー を開きます。
２．メニュー名に「フッターメニュー」
３．メニュー位置「フッター」に✔
４．左側の固定ページの、アクセス・採用情報・プライバシーポリシーに✔を入れ、「メニューに追加」
５．必要であれば順番の入れ替え
６．「メニューを保存」をクリック
©（コピーライト）も設定してみよう
外観→カスタマイズ→フッター→コピーライトのテキスト
💡 コピーライトとは？
「コピーライト（copyright）」とは、
ウェブサイトや作品の著作権表示を意味します。
Webサイトの最下部（フッター部分）によくある
© 2025 パン屋さんデモサイト
© しまだ事務所
のような表記がそれです。
🪄 コピーライトに書かれている意味
| 表記 | 意味 |
|---|---|
| ©（コピーライト記号） | 著作権を主張するマーク |
| 2025 | 公開・制作年（更新時に直すと◎） |
| パン屋さんデモサイト | 著作権を持つ人・団体の名前（サイト運営者） |
つまり、
「このサイトの内容は2025年にパン屋さんデモサイトが制作し、著作権を持っています」
という意味になります。
💡 なぜ書いたほうがいいのか
著作権は表記しなくても自動的に発生しますが、
コピーライトを入れておくことで
- 権利者が明確になる
- サイトの信頼性・完成度が上がる
というメリットがあります。
特に、お店・事務所・制作サイトなどの公式サイトでは、
フッターにコピーライトを入れておくのが一般的です。
📱 スマホ開閉メニューを設定しよう
スマホでは、画面上部にある「三本線（ハンバーガーアイコン）」をタップすると、
メニューがスライドして開く形式になっています。
これが スマホ開閉メニュー です。
🔧 設定手順
１．WordPress管理画面 → 外観 → メニュー→ 新しいメニューを作成→ スマホ開閉メニューを作成
２．固定ページをすべて選択し、追加する
３．カスタムリンクをクリックし、URLに「HPのURL（例：https://homepage.beppu-tomoko-office.com/demo1/）」、リンク文字列に「Home」と入力し、メニューに追加する。必要に応じて順番を入れ替えましょう。最後に「メニューを保存」
📷 表示例（パン屋さんデモ）
ハンバーガーアイコンをタップすると、左側からメニューがスライド表示されます。
🪄 補足
SWELLの仕様では、
「ヘッダーのレイアウト（SP）」の設定位置がそのまま開閉方向を決める仕組みです。
| 設定項目 | ハンバーガー位置 | 開く方向 |
|---|---|---|
| ロゴ：中央／メニュー：左 | 左上 | 左から開く |
| ロゴ：中央／メニュー：右 | 右上 | 右から開く |
| ロゴ：左／メニュー：右 | 右上 | 右から開く |
つまり、
「メニューが右にあると右から開く」
「メニューが左にあると左から開く」
という直感どおりの動作です。
特別な「開閉方向を選ぶボタン」はなく、メニュー位置の指定が方向を兼ねています。
説明アイコンタイトル（ロゴ）をクリックすればトップページ（Home）に戻れますが、
意外と知らない方が多く「戻れない」と感じるケースがあります。
そのため、
ハンバーガーメニュー内や、次に設定するスマホ固定フッターにも
「🏠 Home」アイコンを設置しておくと、ユーザーが迷子になりにくくなります。
📲 スマホ固定フッターを設定しよう
スマホでは、画面下部に 常に表示されるメニュー を設置できます。
これが スマホ固定フッター（固定メニュー） です。
ユーザーがページをスクロールしても、下部に固定表示されるのが特徴です。
今回、パン屋さん向けデモサイトの固定フッター（SP)には
①メニュー
②Home
③お問合せ
④電話
⑤検索
⑥（目次）
⑦トップへ
を設置していきます。
説明アイコンこの固定フッター（SP）だけは、少し設定方法が違います。真似して作ってみてください
🔧 設定手順
📷 表示例
スマホ画面の下に、グレーやブラウン系の帯で
「🏠ホーム 📞お問合せ 📍アクセス」などが並びます。
ユーザーがページをスクロールしても常に表示され、
どのページからでも主要項目にすぐ戻れるようになります。
説明アイコンまずは②③④を設定していきましょう
１．WordPress管理画面 → 外観 → メニュー → 新しいメニューを作成→メニュー名「固定フッター（SP）」→メニュー位置「固定フッター（SP）」に✔→「メニューを作成」
２．②Home ③お問合せ ④電話 はここで設定します。
②Home
カスタムリンク→URLに「ホームページのURL」→リンク文字列に「Home」→「メニューに追加」
③お問合せ
固定ページ→「お問合せ」に✔→「メニューに追加」
④電話
カスタムリンク→URLに「tel:電話番号」→リンク文字列に「電話」→「メニューに追加」
説明アイコン④電話 について。
「カスタムリンク」を使います。
「URL」に電話番号を入力するだけでは登録できません。
「tel:」を付けてください。
３．忘れずに「メニューを保存」しましょう。
４．アイコンを設定します。ここではできないので、カスタマイズに移動します。
外観→カスタマイズ→メニュー→固定フッター（SP）をクリック
▼をクリックすると、下に展開されます。「説明」の欄に「icon-home」と記入。最後に右上の「公開⚙」をクリックします。
説明アイコン同様に
②Home icon-home
③お問合せ icon-mail
④電話 icon-phone
を、「説明」欄に同様に記入し、「公開⚙」をクリックします。
他にもアイコンがたくさんあります。他のアイコンが知りたい方はこちらのホームページを参考にしてください👇
次に、
①メニュー
⑤検索
⑥目次
⑦トップへ
を設定していきましょう。
５．外観→カスタマイズ→サイト全体設定→下部固定ボタン・メニュー
赤枠の部分を同じように設定してください。これで完成です。スマホで表示を確認してみましょう。
説明アイコン固定フッター（SP）は、
①メニュー設定
②アイコン設定
③固定フッターメニュー設定
と、3か所で設定する必要があり、混乱しがちですが、記事を見ながら設定してみてください。
💡 ポイント
- スマホでの操作性を高めるため、4〜5項目に絞るのがベスト。
- よく使うページを優先して配置します：
例）ホーム／メニュー一覧／アクセス／問い合わせ - アイコンも設定できるため、見た目を分かりやすくできます。
💬 ワンポイント
固定フッターを入れると、
「どこを見ても戻れる」安心感が生まれます。
ただし項目を詰め込みすぎると文字が小さくなるため、
スマホ実機で見ながら調整しましょう。
🔽次に読むならこちら！
これでTopページに各種ナビゲーションの設定が完了しました。
次の記事では、SWELLの着せ替えテーマを利用してもっと簡単にTopページを作る方法をご紹介します。
コメント