こんにちは "osaboo"
です。"@osaboo_Bot"
この記事で解決できる悩み
この記事では、これらのお悩みを解決します。
「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。
関連記事 AFFINGER7を導入したばかりの方は、まず初期設定を済ませておきましょう。
-
-
AFFINGER7の初期設定完全ガイド｜導入後に最初にやるべき設定を初心者向けに解説
AFFINGER7の初期設定を初心者向けにわかりやすく解説。設定画面の場所から導入後に最初にやるべき設定、おすすめ設定、SEOやアフィリエイトに役立つ設定まで順番に紹介します。
AFFINGER7のメニュー設定とは？
メニュー設定では、ヘッダー・フッター・スマホメニューに表示するページやカテゴリーを設定できます。
読者が目的のページへ迷わずアクセスできるよう、見やすく整理されたメニューを作ることが大切です。
まずは、AFFINGER7のメニュー設定の基本を確認していきましょう。
AFFINGER7で設定できるメニューの種類
AFFINGER7では、用途に応じてさまざまなメニューを設定できます。
まずは、どのようなメニューを設置できるのかを確認しておきましょう。
| メニュー | 用途 |
|---|---|
| ヘッダーメニュー | サイト上部に表示されるメインメニュー |
| ヘッダーナビゲーション | ヘッダー上部に表示される補助メニュー |
| スマホメニュー | スマートフォンで表示されるスライドメニュー |
| フッターメニュー | サイト下部に表示されるメニュー |
メニューを作成する方法
まずは、WordPressでメニューを作成します。
メニューの新規作成から項目の追加、表示位置の設定まで、基本的な手順を順番に解説します。
① メニュー設定画面を開く
Menu『WordPress管理画面 → 外観 → メニュー』をクリックします。
ここでは、新しいメニューの作成や編集、表示位置の設定ができます。
② 新しいメニューを作成する
メニュー名は管理用なので、「ヘッダーメニュー」や「フッターメニュー」など、あとから見てわかりやすい名前を付けるのがおすすめです。
③ メニュー項目を追加する
メニューを作成したら、表示したいページを追加します。
画面左側の『メニュー項目を追加』から、『固定ページ・投稿・カスタムリンク・カテゴリー』などを選択できます。
追加したい項目に『チェック』を入れ、『メニューに追加』をクリックすると、右側のメニューへ追加されます。
④ メニューの並び順・階層を変更する
追加したメニュー項目は、そのまま使うこともできますが、表示する順番や階層を整えることで、より使いやすいナビゲーションになります。
メニュー項目の並び順を変更する場合は、「メニュー構造」内の項目をドラッグ＆ドロップして移動します。
例えば、ヘッダーメニューでは以下のような並びにすると分かりやすくなります。項目を少し右へ移動すると、親子関係を作成できます。
このようにカテゴリーを親メニュー、その下に関連する項目を配置すると、サブメニューとして表示できます。
ただし、メニュー項目を増やしすぎると読者が迷いやすくなるので、よく利用されるページを中心にシンプルな構成にするのがおすすめです。
⑤ 表示位置を設定する
メニュー項目の追加や並び替えが完了したら、次に表示する場所を設定します。
作成したメニューを以下の場所へ表示できます。
- ヘッダーメニュー → サイト上部に表示されるメインメニュー
- ヘッダーメニュー（横列）→ サイトの右上（最上部）に表示されるメニュー
- フッターメニュー → サイト下部に表示されるメニュー
- スマホスライドメニュー → スマートフォン表示時のメニュー
表示位置は、メニュー編集画面下部にある『メニュー設定 → メニューの位置』から指定できます。
表示したい場所にチェックを入れて設定します。
また、メニュー画面の「位置を管理」タブを開くと、ヘッダーやフッターなどの表示位置ごとにメニューを割り当てることもできます。
例えば、ブログサイトの場合は以下のような設定がおすすめです。
- ヘッダーメニュー → 読者がよく使うページ（カテゴリー・お問い合わせなど）
- フッターメニュー → プライバシーポリシー・免責事項など
- スマホ用メニュー → ヘッダーと同じ主要ページを表示
設定が完了したら、実際にPCとスマホの両方で表示を確認しておきましょう。表示位置によって見え方が異なる場合があります。
⑥ メニューを保存する
メニュー項目の追加や表示位置の設定が完了したら、最後に設定を保存します。
画面下にある『メニューを保存』をクリックすると、作成したメニューがサイトへ反映されます。
保存後は、実際のサイトを表示して以下の点を確認しましょう。
- メニュー項目が正しく表示されているか
- 順番や階層が意図した通りになっているか
- PCとスマホで見やすく表示されているか
もし表示されない場合は、メニューの表示位置が正しく設定されているか確認してください。
これで基本的なメニュー作成は完了です。
関連記事 サイト全体のカラーやデザインを整える場合は、AFFINGER管理の全体設定も確認しましょう。
-
-
AFFINGER7の全体設定を解説｜サイト全体の初期設定とカスタマイズ方法
AFFINGER7の全体設定を初心者向けに解説。カラーパターンやデザインパターン、レイアウト、フォントなど、サイト全体の初期設定とおすすめのカスタマイズ方法を画像付きでわかりやすく紹介します。
ヘッダーメニューを設定する方法
ヘッダーメニューは、サイト上部に表示されるメニューで、読者が目的のページへスムーズに移動するための大切な役割があります。
サイト全体の印象にも影響するので、「見やすく、使いやすく」なるように設定していきましょう。
AFFINGER7にはさまざまな設定がありますが、まずはこの記事で紹介する基本設定だけで十分です。
ヘッダーメニューの表示位置を設定する
ヘッダーメニューは、表示する位置によってサイトの印象や使いやすさが変わります。
AFFINGER7では、複数の表示位置を選べるので、それぞれの特徴を確認しながら、自分のサイトに合った配置を設定しましょう。
ヘッダーの上に表示する（デフォルト）
「ヘッダーの上に表示する」は、AFFINGER7の初期設定です。
サイト上部にメニューが表示されるので、多くのサイトで使いやすく、初心者にもおすすめの表示位置です。
まず、「外観 → メニュー」で作成したメニューを「ヘッダーメニュー → 表示位置の設定」に割り当てます。
次に、
Menu『WordPress管理画面 → AFFINGER管理 → メニュー』をクリックし、『 PC ヘッダーメニューを上に表示する（デフォルト）』を有効にします。
ヘッダーの下に表示する
「ヘッダーの下に表示する」は、ヘッダー画像や動画などのコンテンツがある場合、その下にヘッダーメニューが表示されます。
コンテンツを設定していない場合は、「ヘッダーの上に表示する」とほぼ同じ表示になります。
まず、「外観 → メニュー」で作成したメニューを「ヘッダーメニュー → 表示位置の設定」に割り当てます。
次に、
Menu『WordPress管理画面 → AFFINGER管理 → メニュー』をクリックし、『 PC ヘッダーメニューを下に表示する』を有効にします。
ヘッダーの右上（最上部）に表示する
ヘッダーメニュー（横列）は、ヘッダーの右上（最上部）に横並びで表示されるメインメニューです。
グローバルナビゲーションとも呼ばれ、読者がカテゴリーや重要ページへアクセスするための基本的なメニューになります。
通常のヘッダーメニューとは別に配置できるので、お問い合わせやプロフィールなど、読者がよく利用するページへのリンクを設置するのに適しています。
まず、「外観 → メニュー」で作成したメニューを「ヘッダーメニュー（横列）→ 表示位置の設定」に割り当てます。次に、
Menu『WordPress管理画面 → AFFINGER管理 → メニュー』をクリックし、『ヘッダーメニュー（横列）を有効化（960px以上）』を有効にします。
サブメニューの表示あり
項目は増やしすぎず、3〜5個程度にまとめると見やすいメニューになります。
※ ヘッダーメニュー（横列）は、初期設定ではサブメニューが表示されません。
代表的なメニューの表示位置は以上です。
サイトのデザインや目的に合わせて、使いやすい表示位置を選んでみてください。
ヘッダーメニューのデザインを整える
ヘッダーメニューの表示位置を決めたら、次は見た目を整えていきましょう。
AFFINGER7では、メニューの横幅や色、サブメニューの表示などを簡単に変更できます。
すべてを設定する必要はないので、まずは初心者におすすめの設定から試してみましょう。
これからの設定は、すべてカスタマイザーで行います。まずは、カスタマイザーを起動します。
Menu『WordPress管理画面 → 外観 → カスタマイズ』をクリックします。
カスタマイザーで、『メニュー → PCヘッダーメニュー / 横列』をクリックし、詳細設定項目を開きます。
メニュー
➡︎
PCヘッダーメニュー / 横列
➡︎
詳細設定項目
⬇︎
次は、「PCヘッダーメニュー / 横列」の詳細設定項目の中から、初心者におすすめの設定を紹介します。
メニューの横幅を設定する
サイト幅を変更している場合や、メニュー項目が多い場合は、メニューが2行に折り返されることがあります。その際は、この設定で横幅を調整しましょう。
基本的には初期設定（デフォルト）のままで問題なく、必要な場合のみ調整するのがおすすめです。
PCヘッダーメニュー / 横列
- メニューをセンター寄せにする → ON（デフォルト）
- メニューの横幅を100%にする → OFF（デフォルト）
- 角丸にする → OFF（デフォルト）
- メニューの最小幅（px）
- 160（デフォルト）
メニューが横並びにならなかった場合は縮小します。
目安 → 120〜160「おすすめ幅」
- 160（デフォルト）
- メニューの最大幅（px）
- 160（デフォルト）
ほとんどの場合デフォルトでOKです。
- 160（デフォルト）
- 下層メニューにも反映する → OFF（デフォルト）
- メニューの上下に隙間を作る → 設定しない（デフォルト）
メニューの色を変更する
サイト全体のカラーに合わせて調整できます。
サイト全体を白系でまとめている場合は、基本的に初期設定（デフォルト）のままでOKです。
また、AFFINGER管理の「カラーパターン」や「デザインパターン」を適用している場合は、メニューの色も自動で最適化されます。そのまま使い始めて、必要に応じて調整しましょう。
文字色
- 第一階層 → クリア（デフォルト）
- 下層ドロップダウンメニュー → クリア（デフォルト）
- 記事に重なるので見にくい場合は調整します。
- 第一階層メニューを太字にする（サイドメニュー連動）→ OFF（デフォルト）
背景色
- 第一階層 → クリア（デフォルト）
- グラデーション上部 → クリア（デフォルト）
- グラデーションを横向きにする → OFF（デフォルト）
- 下層ドロップダウンメニュー → クリア（デフォルト）
ボーダー
- 上下 → クリア（デフォルト）
- 左右 → クリア（デフォルト）
- セパレート → クリア（デフォルト）
サブメニューを表示する
サブメニューを表示するには、「下層メニューも表示する（横列・PC）」をONにする必要があります。
初期設定ではOFFになっているので、サブメニューを使う場合は忘れずに設定しましょう。
ヘッダーメニュー（横列）
- 文字色 → クリア（デフォルト）
- 下層メニューも表示する（横列・PC）
- ON（チェックを入れます）
- 下層ドロップダウンメニュー背景色 → クリア（デフォルト）
関連記事 ヘッダーメニューと合わせて、トップページのデザインも合わせて整えましょう。
-
-
AFFINGER7でトップページを固定ページにする方法｜ブログ型からサイト型へ変更
AFFINGER7でトップページを固定ページにする方法を解説。ブログ型からサイト型へ変更する手順や、ホームページ表示設定、固定ページ作成のポイントまで初心者向けにわかりやすく紹介します。
フッターメニューを設定する方法
フッターメニューは、サイト下部に表示されるメニューです。
お問い合わせやプライバシーポリシーなど、補足ページへのリンクをまとめることで、読者が必要な情報を見つけやすくなります。
AFFINGER7にはさまざまな設定がありますが、まずはこの記事で紹介する基本設定だけで十分です。
フッターメニューの表示位置を設定する
作成したメニューをフッターに表示するには、表示位置の設定が必要です。
ここでは、フッターエリアへの設定方法を解説します。
ポイント
フッターメニューには、読者が確認する重要なページを設定しましょう。
「外観 → メニュー」で作成したメニューを「フッターメニュー → 表示位置の設定」に割り当てます。
設定が完了したら、プレビューで表示を確認しましょう。以下のように表示されていればOKです。
フッターメニューのデザインを整える
フッターメニューの表示が確認できたら、次は見た目を整えていきましょう。
AFFINGER7では、色や表示方法を調整できるので、サイトに合わせて設定しましょう。
フッターメニューは、サイト下部に表示されるので、全体のデザインに合わせて整えることが大切です。
これからの設定は、すべてカスタマイザーで行います。まずは、カスタマイザーを起動します。
Menu『WordPress管理画面 → 外観 → カスタマイズ』をクリックします。
カスタマイザーで、『フッター → フッターエリア』をクリックし、詳細設定項目を開きます。
フッター
➡︎
フッターエリア
➡︎
詳細設定項目
⬇︎
次は、「フッターエリア」の詳細設定項目の中から、初心者におすすめの設定を紹介します。
メニューの色を変更する
サイト全体のカラーに合わせて調整できます。
サイト全体を白系でまとめている場合は、基本的に初期設定（デフォルト）のままでOKです。
また、AFFINGER管理の「カラーパターン」や「デザインパターン」を適用している場合は、メニューの色も自動で最適化されます。そのまま使い始めて、必要に応じて調整しましょう。
フッターエリア
- 横幅を100%にする → OFF（デフォルト）
- フッターエリアの背景色を変更する場合や、スマホでも同じ表示にしたい場合はONがおすすめです。
- 文字色 → クリア（デフォルト）
- 背景色
- グラデーション上部 → クリア（デフォルト）
- グラデーションを横向きにする → OFF（デフォルト）
スマホメニューを設定する方法
スマホからアクセスする読者が増えているので、スマホメニューの設定も重要です。
スマートフォンでは、ハンバーガーメニュー（スライドメニュー）からメニューを表示するのが一般的です。
スマホ専用のメニューを設定することで、スマホ画面でも目的のページへ移動しやすくできます。
AFFINGER7にはさまざまな設定がありますが、まずはこの記事で紹介する基本設定だけで十分です。
スマホメニューの表示位置を設定する
作成したメニューをスマホで表示するには、表示位置の設定が必要です。
ここでは、スマホメニューを表示するための設定方法を解説します。
ポイント
スマホメニューは、ヘッダーメニューと同じ内容にしておくと、読者が迷いにくくなります。
「外観 → メニュー」で作成したメニューを「スマホスライドメニュー → 表示位置の設定」に割り当てます。
設定が完了したら、プレビューで表示を確認しましょう。以下のように表示されていればOKです。
スマホハンバーガーアイコン
（左上）をクリック
➡︎
スマホスライドメニュー が
開く
➡︎
スマホスライドメニューの
サブメニューを開く
⬇︎
スマホメニューのデザインを整える
スマホメニューは、見やすさや操作のしやすさにも影響します。
AFFINGER7では、アイコンや表示方法、色などを設定できますが、初心者は基本設定のままで十分です。
必要な項目だけ設定していきましょう。
これからの設定は、すべてカスタマイザーで行います。まずは、カスタマイザーを起動します。
Menu『WordPress管理画面 → 外観 → カスタマイズ』をクリックします。
カスタマイザーで、『メニュー → スマホスライドメニュー / 検索』をクリックし、詳細設定項目を開きます。
メニュー
➡︎
スマホスライドメニュー / 検索
➡︎
詳細設定項目
⬇︎
次は、「スマホスライドメニュー / 検索」の詳細設定項目の中から、初心者におすすめの設定を紹介します。
スライドメニューの色を変更する
スライドメニューは独立して表示されるため、サイト全体のデザインに縛られず、自由に色を設定できます。
スマホで目立つ色に変更するのもおすすめです。慣れてきたら、自分好みのデザインに挑戦してみましょう。
スライドメニュー（OPEN時）
- テキストリンク色 → クリア（デフォルト）
- リンクボーダー色 → クリア（デフォルト）
- 背景色 → クリア（デフォルト）
検索メニュー（スライドOPEN時）
- 背景色 → クリア（デフォルト）
メニュー設定のポイント
メニューは、たくさん設置すれば使いやすくなるわけではありません。
読者が迷わず目的のページへたどり着けるよう、シンプルで分かりやすい構成を意識することが大切です。
メニュー項目は増やしすぎない
メニューには、読者がよく利用するページだけを表示するのがおすすめです。
項目が多すぎると、目的のページを見つけにくくなり、かえって使いづらくなってしまいます。
5〜7項目程度を目安に、シンプルで分かりやすいメニューを意識しましょう。
おすすめの項目例
- ホーム
- カテゴリー
- おすすめ記事
- プロフィール
- お問い合わせ
ヘッダー・スマホメニューは同じ内容がおすすめ
ヘッダーメニューとスマホメニューは、できるだけ同じ内容にしておくのがおすすめです。
PCとスマホでメニュー構成が異なると、読者が目的のページを探しにくくなることがあります。
特別な理由がなければ、同じメニューを設定しておくと、どの端末でも迷わず利用できます。
設定後はPCとスマホで表示を確認する
メニューの設定が完了したら、PCとスマホの両方で表示を確認しましょう。
表示位置や文字の折り返し、サブメニューの表示などは、端末によって見え方が異なる場合があります。
実際に操作しながら確認し、読者が使いやすいメニューになっているかチェックしておくと安心です。
よくある質問（FAQ）
AFFINGER7のメニュー設定について、初心者からよくある疑問をまとめました。
設定時に迷った場合は、こちらを参考にしてください。
ヘッダーメニューとスマホメニューは別々に作る必要がありますか？
基本的には、同じメニューを使用するのがおすすめです。
ヘッダーメニューとスマホメニューを同じ内容にすると、PCとスマホで表示が変わらず、読者が迷いにくくなります。
ただし、スマホでは項目を減らしたい場合などは、サイトの構成に合わせて別のメニューを作成することもできます。
サブメニューが表示されない場合はどうすればいいですか？
サブメニューを作成していても、AFFINGER7側の設定がOFFになっていると表示されません。
「外観 → メニュー」やカスタマイザーの設定を確認し、「下層メニューも表示する（横列・PC）」が有効になっているか確認してください。
フッターメニューには何を設定すればいいですか？
読者が確認する重要なページを設定するのがおすすめです。
フッターメニューには、以下のようなページを設定すると便利です。
- プライバシーポリシー
- お問い合わせ
- プロフィール
- サイトマップ
特に、プライバシーポリシーやお問い合わせページは、サイト運営に必要な項目なので設定しておきましょう。
メニューの色やデザインは変更した方がいいですか？
基本的には、サイト全体のデザインに合わせれば問題ありません。
AFFINGER7では細かなデザイン設定ができますが、最初からすべて変更する必要はありません。
まずはサイトカラーに合わせた設定にして、必要に応じて色や表示方法を調整していきましょう。
メニュー項目はいくつくらいがおすすめですか？
メニュー項目が多すぎると、目的のページを探しにくくなります。
まずは5〜7項目程度を目安に、よく利用されるページを設定すると、見やすく使いやすいメニューになります。
関連記事 記事作成を快適にするには、Gutenberg（ブロックエディター）の設定も確認しておきましょう。
-
-
AFFINGER7のGutenberg設定方法｜記事を書きやすく・見やすくする初期設定
AFFINGER7のGutenberg設定方法を初心者向けに解説。投稿画面の幅調整やブロック設定、マイブロックなど記事作成を快適にするおすすめ初期設定を紹介します。
まとめ！AFFINGER7のメニュー設定方法｜ヘッダー・フッター・スマホメニューを解説
メニューは、読者が目的のページへスムーズに移動するための大切な要素です。
AFFINGER7では、ヘッダー・フッター・スマホメニューなど、サイトに合わせてさまざまな表示方法を設定できます。
ただし、最初からすべての機能を使いこなす必要はありません。まずは基本的なメニュー設定を行い、サイト運営に慣れてから細かなデザインを調整していきましょう。
