こんにちは "osaboo"
です。"@osaboo_Bot"
AFFINGER6のメニュー設定を完全攻略！初心者でも迷わない“使いやすい導線”の作り方ガイド
AFFINGER6のメニュー設定？どうする…
それではご覧ください。
そもそもAFFINGER6のメニュー設定とは？
AFFINGER6 のメニュー設定とは、サイト内の「グローバルナビゲーション（上部メニュー）」や、スマホ専用メニューなど、訪問者がサイトを移動するための導線をカスタマイズできる機能です。
通常の WordPress メニュー機能に加えて、AFFINGER6 では以下のような細かい設定が可能になります。
- PC とスマホで別メニューを表示
- メニューの色・背景・高さ・枠線などデザイン調整
- スクロールに追従する固定メニュー設定
- ハンバーガーメニュー（スライドメニュー）の詳細設定
- 下部固定メニューの設定（スマホ向け）
AFFINGER 管理の「メニュー」 タブは、テーマ独自のナビゲーション操作をまとめて管理できる機能 です。
メニューの見た目や使いやすさは 回遊率や滞在時間アップにも直結するため、初心者であっても最初に整えておくことで、より読みやすいサイトを作れるようになります。
AFFINGER 管理【メニュー】タブの基本構成
AFFINGER 管理 の「メニュー」タブは、サイトのナビゲーションを細かくカスタマイズできる専用エリアです。
WordPress標準のメニュー設定では触れられない、テーマ独自のデザイン・表示形式・動作をコントロールできます。
Menu 『WordPress管理＞ダッシュボード＞AFFINGER 管理＞メニュー（タブ）』をクリックします。
- 赤枠の設定項目を解説します。
それでは順番に見ていきましょう。
PC ヘッダーメニュー
PCのヘッダーメニューは、ユーザーがサイト内を簡単に移動できるようにするために設置します。
また、ヘッダー部に画像を設置することで、画像の上側や下側に表示させたり、非表示にする表示設定が可能です。
ウィジェットやフッターを連携して、PCヘッダーメニューをサイトタイトルと同じ高さ（上側）に表示させる「 ヘッダーメニュー（横列）を有効化（960px以上）」という方法もあり、電話番号やフッターと同じメニューを表示させることも可能です。
スマホスライドメニュー
スマホでサイトを観覧する際のメニュー表示設定ができます。
アイコンデザインの選択やメニューの表示位置（左右）など、スマートフォン専用の表示スタイルを設定できます。
検索アイコン
スマホヘッダーに『 』検索アイコンの表示設定ができます。
また、検索画面の表示スタイルの設定もできます。
追加メニュー
スマホヘッダーに追加できるメニューです。
2つまで作成することが可能です。「使っているサイトさんは？あまりいない？見かけない…」
その他のスマホメニュー
「ヘッダーメニュー（横列）・スマホミドルメニュー・画像表示位置・スマホフッターメニュー」などの項目を設定できます。
WordPressでメニューを作成
次の章から AFFINGER6 の各メニュー設定を詳しく解説していきますが…
まだ WordPress 側でメニューを作っていない場合は、先に作成しておきましょう。
AFFINGER 管理【メニュー】タブは “デザインや表示方法を調整する場所” なので、ベースとなるメニューが存在しないと設定が反映されません。
Menu 『WordPress管理＞ダッシュボード＞外観＞メニュー』を空以下のメニューを作成。
- ヘッダーメニュー
- フッターメニュー
- スマホ用メニュー（ハンバーガーメニュー用）
サイトで使用するメニューをあらかじめ作成しておくとスムーズです。
メニューについて こちらの記事で詳しくご紹介しています。「あわせてご覧ください」
-
-
AFFINGER6のカスタマイズ徹底解説！メインカラー・デザイン・メニュー設定
「AFFINGER6のカスタマイズ徹底解説！メインカラー・デザイン・メニュー設定」では、WordPressテーマAFFINGER6の配色変更やデザイン調整、メニュー設定の方法を詳しく解説。初心者でも簡単におしゃれなサイトに仕上げるコツをご紹介します！
-
-
AFFINGER6 フッターの設定方法｜定番カスタマイズを初心者向けに解説！
AFFINGER6を使った「フッターのカスタマイズ」をご紹介。定番とされる基本的なフッターの形（サイトタイトル・メニュー・検索・コピーライト）の設定を初心者目線で掘り下げて解りやすく解説。フッターの設定が未設定または迷ったら是非をご覧ください。
AFFINGER 管理【メニュー】タブの各設定項目を徹底解説
ここでは、AFFINGER 管理の【メニュー】タブで設定できる項目と、それぞれの表示イメージを紹介します。
それでは順番に見ていきましょう。
PC ヘッダーメニューの注意事項
PC ヘッダーメニューの設定項目で以下のように赤字表示されている場合は、カスタマイザーでメニューの設定を確認しておきましょう。
カスタマイザーの設定が干渉している場合は、以下のように表示されます。（赤字）
カスタマイザーの設定が干渉していない場合は、以下のように表示されます。
PCヘッダーメニューの設定と表示イメージ（画像あり）
ヘッダー画像を設定している場合のPCヘッダーメニューの表示を確認してみましょう。
ヘッダ画像の設定は後述します。
ヘッダー画像あり：PC ヘッダーメニューを上に表示する（デフォルト）
ヘッダー画像あり：PC ヘッダーメニューを下に表示する
ヘッダー画像あり：PC ヘッダーメニューを表示しない
ヘッダー画像ありPCヘッダーメニューにナビゲーションメニューを表示する場合
ヘッダー画像あり：PC ヘッダーメニューを表示しない｜ヘッダーメニュー（横列）を有効化（960px以上）
ヘッダーナビゲーション（右※PCのみ）
- 上記サンプルの場合『ヘッダーメニュー（横列）を有効化（960px以上）』 のチェックは、
ON/OFF どちらでも表示に影響は出ません。（通常はチェックOFF）
- ヘッダーメニューを表示する場合は、ウィジェットの「ヘッダーナビゲーション（右※PCのみ）」エリアに「ナビゲーションメニュー」ウィジェット を追加し、表示したい ヘッダーメニュー（任意のメニュー名） を選択します。（以下参考）
Menu 『WordPress管理＞ダッシュボード＞外観＞ウィジェット』で設定します。
ウィジェットについて こちらの記事で詳しくご紹介しています。あわせてご覧ください。
-
-
【AFFINGER6】利用できるウィジェット一覧＆設定・活用法を徹底解説【WordPress対応】
AFFINGER6の専用ウィジェットとWordPress標準ウィジェットをすべて解説！設定方法や削除方法を詳しく説明し、初心者にもわかりやすく用途を紹介。ウィジェット活用ガイドを作りました！
ヘッダー画像は、カスタマイザー内の以下のメニューから設定できます。
Menu 『WordPress管理＞ダッシュボード＞外観＞カスタマイズ＞ヘッダー画像』で設定します。
PCヘッダーメニューの設定と表示イメージ（画像なし）
ヘッダー画像を設定していない場合のPCヘッダーメニューの表示を確認してみましょう。
ヘッダー画像なし：PC ヘッダーメニューを上に表示する（デフォルト）｜下に表示する
または
ヘッダー画像なし：PC ヘッダーメニューを表示しない
ヘッダー画像なしPCヘッダーメニューにナビゲーションメニューを表示する場合
ヘッダー画像なし：PC ヘッダーメニューを表示しない｜ヘッダーメニュー（横列）を有効化（960px以上）
ヘッダーナビゲーション（右※PCのみ）
- 上記サンプルの場合『ヘッダーメニュー（横列）を有効化（960px以上）』 のチェックは、
ON/OFF どちらでも表示に影響は出ません。（通常はチェックOFF）
- ヘッダーメニューを表示する場合は、ウィジェットの「ヘッダーナビゲーション（右※PCのみ）」エリアに「ナビゲーションメニュー」ウィジェット を追加し、表示したい ヘッダーメニュー（任意のメニュー名） を選択します。（以下参考）
Menu 『WordPress管理＞ダッシュボード＞外観＞ウィジェット』で設定します。
PCヘッダーメニューの表示位置（まとめ）
ヘッダー部に表示できるメニューをすべて有効にすると、以下のように表示されます。
PCヘッダーメニューがどの位置に表示されるか確認する際の参考としてご利用ください。
- 旧式のナビを使用する※表示は第一層のみですが文字数制限がありません ←「省略します」
スマホスライドメニューの設定と表示イメージ
ここでは、スマホスライドメニューの設定と表示イメージをご紹介します。
スマホメニューの設定項目は「表示・非表示」「アイコンデザインの選択」「表示位置（左右）」の3つだけなので、迷うことなく簡単に設定できます。
スマホスライドメニュー（クローズ）
スマホスライドメニュー（オープン）
- 上記設定項目を変更する前に メニュー位置（表示させる場所）を以下で設定しておきます。
Menu 『WordPress管理＞ダッシュボード＞外観＞メニュー』をクリックします。
AFFINGER管理画面で設定するメニューにあわせてチェックを入れ、表示できる状態にします。
この記事のサンプルでは、『ヘッダーメニュー』を『スマホスライドメニュー』に設定しています。
- 『スマホスライドメニュー』にチェックを入れます。
検索アイコンの設定と表示イメージ
ここでは、検索アイコンの設定と表示イメージをご紹介します。
スマホメニューの設定項目は「検索アイコンの表示とスタイル選択」」といずれも簡単で迷わないと思います。（検索アイコンは右上に表示されます）
オーバレイは全画面が検索画面に切り替わります。スライドは右側から中央までスライド画面が現れます。
検索アイコン（オーバーレイ）
検索アイコン（スライド）
追加メニューの設定と表示イメージ
ここでは、追加メニューの設定と表示イメージをご紹介します。
追加メニューは、スマホ表示時のヘッダー最上部（検索アイコンの左側）に配置され、全ページで共通表示されます。
任意の「アイコン・テキスト・リンク」を設定できます。電話番号を登録しておけば、タップで発信できる仕組みにすることも可能です。
- 追加メニューの色はカスタマイザーから変更できます。（後述）
- 『リンク先URL』を入力しない限り、メニューは表示されないので注意しましょう。
追加メニュー（トップページ）
追加メニュー（下層ページ）
上記サンプルで使用している追加メニューの色は、カスタマイザー内の以下のメニューから設定します。
Menu 『WordPress管理＞ダッシュボード＞外観＞カスタマイズ＞メニュー＞スマホスライドメニュー / 検索』で設定します。
その他のスマホメニューの設定と表示イメージ
ここでは、その他のスマホメニューの設定と表示イメージをご紹介します。
- ミドルメニューは、以下サンプルの赤枠です。
ヘッダーメニュー（横列）を有効化
スマホミドルメニュー無し
スマホミドルメニュー（TOP）
スマホミドルメニュー
フッターメニュー（TOP）
フッターメニュー
- 上記設定項目を変更する前に メニューの位置（表示させる場所）を以下で設定しておきます。
Menu 『WordPress管理＞ダッシュボード＞外観＞メニュー』をクリックします。
AFFINGER管理画面で設定するメニューにあわせてチェックを入れ、表示できる状態にします。
この記事のサンプルでは、『フッターメニュー』を『スマホフッターメニュー』に設定しています。
- 『スマホフッターメニュー』にチェックを入れます。
まとめ！AFFINGER6の管理画面「メニュー」タブでできる設定を完全解説！
AFFINGER6の管理画面「メニュー」タブでは、PC・スマホともに、ユーザーが使いやすいメニューを細かくカスタマイズできます。
表示・非表示の切り替え、アイコンデザインの選択、追加メニューの設定など、初心者でも扱いやすい項目が中心です。
特に、スマホメニューや追加メニューは、アクセスの多いスマホユーザー向けに操作性を高めるための重要ポイント。
適切に設定することで、回遊率アップやユーザー体験の向上にもつながります。
AFFINGER6の拡張機能を上手に活用して、あなたのサイトに合った最適なメニュー配置を整えていきましょう。
この記事がお役に立てば嬉しいです。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／
