AFFINGER6 管理【メニュータブ】メニュー設定を完全解説！

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER 管理の「メニュータブ」メニューで出来る詳細設定の内容を初心者さん向けにわかりやすくご紹介します。

AFFINGER 管理の「メニュー設定」では、「PCヘッダーメニュー・スマホスライドメニュー・その他のスマホメニューの設定」の「設置位置・表示・非表示・デザイン」が設定できます。

初心者さんにとっては「設定内容がどの箇所に反映されているのかわからない」逆に言えば…「この部分の色や形を変えたいのにどこで設定すれば良いのかわからない」ということが多々あります。

この記事では、このような悩みを解決するお手伝いをします。

こんな方におすすめ！

AFFINGER6の初心者さん
PCやスマホのメニューをカスタマイズしたい

この記事でわかること！

AFFINGER 管理：メニュータブ（メニュー設定）の概要
メニュー設定：PC ヘッダーメニュー
メニュー設定：スマホスライドメニュー
メニュー設定：検索アイコン
メニュー設定：追加メニュー
メニュー設定：その他のスマホメニュー
まとめ！

それではご覧ください！

当サイトでは、以下の有料 WordPressテーマ『AFFINGER6』を使用しています。
初心者さんでも安心！稼ぐために必要な機能満載です。

＼初心者でも安心！コスパ最強の洗練されたWordPressテーマ／

AFFINGER6 購入 ▶︎ 詳しくはこちら

＼＼『すごいもくじLITE』が付いてくる！限定特典キャンペーン実施中！／／

- 少しづつ増え続ける当サイトオリジナル特典付！-

AFFINGER 管理：メニュータブ（メニュー設定）の概要

この章では、AFFINGER 管理：メニュータブ（メニュー設定）の概要をご紹介します。

『AFFINGER管理＞メニュー』をクリックします。

※ ピンク色の破線部の設定項目を解説します。

※ 本記事の設定では『AFFINGER管理』のメニューを編集します。

ロリポップレンタルサーバーをお使いの方は、ドメインの『WAFの設定』を一時的に無効にしてください。◀︎『403 Error』が出た場合。

『AFFINGER管理』▶︎『Save』時に『403 Error』が出て対処方法がわからない方は
　こちらをご覧ください。

: AFFINGER6＆ロリポップ！レンタルサーバー『403 Error』が出た時の対処方法！

ロリポップ！レンタルサーバーを使用してAFFINGER6（ACTION)のヘッダー等の表示系をカスタマイズするとセーブ時に『403 Error』が表示されセーブできない！こんな時はロリポップユーザー専用ページにログインしてWAFの設定を無効にするだけ！

各設定項目で、できることを以下に整理しました。^^／

・PC ヘッダーメニュー

PCのヘッダーメニューは、ユーザーがサイト内を簡単に移動できるようにするために設置します。
また、ヘッダー部に画像を設置することで、画像の上側や下側に表示させたり、非表示にする表示設定が可能です。

ウィジェットやフッターを連携して、PCヘッダーメニューをサイトタイトルと同じ高さ（上側）に表示させる「ヘッダーメニュー（横列）を有効化（960px以上）」という方法もあり、電話番号やフッターと同じメニューを表示させることも可能です。

・スマホスライドメニュー

スマホでサイトを観覧する際のメニュー表示設定ができます。

アイコンデザインの選択やメニューの表示位置（左右）など、スマートフォン専用の表示スタイルが設定できます。

・検索アイコン

スマホヘッダーに『』検索アイコンの表示設定ができます。

また、検索画面の表示スタイルの設定もできます。

・追加メニュー

スマホヘッダーに追加できるメニューです。

2つまで作成することが可能です。「使っているサイトさんは？あまりいない？見かけない…」

・その他のスマホメニュー

「ヘッダーメニュー（横列）・スマホミドルメニュー・画像表示位置・スマホフッターメニュー」などの項目が設定できます。

メニュー設定：PC ヘッダーメニュー

この章では、PC ヘッダーメニューの設定と表示イメージをご紹介します。

「ヘッダーメニュー・フッターメニュー・スマホ用メニュー」など必要なメニューはあらかじめ作成しておきましょう。

対象メニューのメニュー位置（表示する場所）は「WordPress管理とAFFINGER管理」双方で設定する必要があります。

メニューの表示設定には、優先される設定項目があり、設定不備により、反映されない箇所があるので注意しましょう。

基本的には「WordPress管理で対象メニューのメニュー位置の設定をしてから、AFFINGER管理で追加の表示設定をする」イメージです。

メニューについては…以下の記事で詳しくご紹介しています。「あわせてご覧ください」

: AFFINGER6 カスタマイズ！メインカラーとデザイン＆メニュー編
AFFINGER6をインストールしたけど、どこからカスタマイズすれば良く解らないという方必見です。インストール直後の画面から「サイト全体のデザイン」や「メニュー」等、AFFINGER6標準のテンプレート機能を使って簡単デザイン！カスタマイズ手順をご紹介。

: AFFINGER6 カスタマイズ【フッターの定番設定やってみた！】
AFFINGER6を使った「フッターのカスタマイズ」をご紹介。定番とされる基本的なフッターの形（サイトタイトル・メニュー・検索・コピーライト）の設定を初心者目線で掘り下げて解りやすく解説。フッターの設定が未設定または迷ったら是非をご覧ください。

設定項目は、以下の通りです。

PC ヘッダーメニューの設定項目で以下のように赤字表示されている場合は、カスタマイザーでメニューの設定を確認しておきましょう。

カスタマイザーの設定が干渉している場合は、以下のように表示されます。（赤字）

カスタマイザーの設定が干渉していない場合は、以下のように表示されます。

それでは順番に見ていきましょう。

PCヘッダーメニューの表示イメージと設定項目

ヘッダ画像の有無によるPCヘッダーメニューの表示を確認してみましょう。

ヘッダ画像の設定は後述します。

ヘッダー画像あり：PC ヘッダーメニューを上に表示する（デフォルト）

ヘッダー画像あり：PC ヘッダーメニューを下に表示する

ヘッダー画像あり：PC ヘッダーメニューを表示しない

ヘッダー画像あり：PC ヘッダーメニューを表示しない｜ヘッダーメニュー（横列）を有効化（960px以上）ヘッダーナビゲーション（右※PCのみ）

※ 上記サンプルの場合『ヘッダーメニュー（横列）を有効化（960px以上）』のチェックは、
ON/OFF どちらでも表示に影響は出ません。（通常はチェックOFF）

ヘッダーメニュー（横列）を有効にする場合、上の画面のように設定します。

ヘッダーメニュー（横列）を有効化（960px以上）
- ON：ヘッダーナビゲーションは太字表示になりメニュー幅が狭くなります。
  プルダウンメニューは非表示になります。

上の設定とあわせて、以下の設定が必要です。
WordPress管理：『外観＞メニュー』でメニュー位置→『ヘッダーメニュー（横列）』にチェックON

※ 横列を有効化していないヘッダーナビゲーションではプルダウンメニューが表示できます。

※ ヘッダーメニューは『ヘッダーナビゲーション（右※PCのみ）』ウィジェットに『ナビゲーションメニュー』を追加し、ヘッダーメニュー（任意名称）を選択します。（以下参考）

『WordPress管理＞ダッシュボード＞外観＞ウィジェット』で設定します。

ヘッダー画像の設定：補足

ヘッダー画像が設定されている場合のみ上下表示の違いが確認できます。

ヘッダー画像は、以下のメニューからカスタマイザーで設定します。

『WordPress管理＞ダッシュボード＞外観＞カスタマイズ＞ヘッダー画像』で設定します。

ヘッダー画像なし：ヘッダーメニューの「上・下」表示どちらでも変化しません。

ヘッダー画像なし：PC ヘッダーメニューを上に表示する（デフォルト）｜下に表示する

ヘッダー画像なし：PC ヘッダーメニューを表示しない

ヘッダー画像なし：PC ヘッダーメニューを表示しない｜ヘッダーメニュー（横列）を有効化（960px以上）

※ 上記サンプルの場合は『ヘッダーメニュー（横列）を有効化（960px以上）』のチェックは、
ON/OFF どちらでも表示に影響は出ません。（通常はチェックOFF）

ヘッダーメニュー（横列）を有効にする場合、上の画面のように設定します。

ヘッダーメニュー（横列）を有効化（960px以上）
- ON：ヘッダーナビゲーションは太字表示になりメニュー幅が狭くなります。
  プルダウンメニューは非表示になります。

上の設定とあわせて、以下の設定が必要です。
WordPress管理：『外観＞メニュー』でメニュー位置→『ヘッダーメニュー（横列）』にチェックON

※ 横列を有効化していないヘッダーナビゲーションではプルダウンメニューが表示できます。

『WordPress管理＞ダッシュボード＞外観＞ウィジェット』で設定します。

PCヘッダーメニューの表示位置

ヘッダー部に表示できるメニューをすべて表示させると以下のようになります。

PCヘッダーメニューの表示位置を確認する際の参考にしてください。

割愛 旧式のナビを使用する※表示は第一層のみですが文字数制限がありません

色々な表示パターンが工夫できると思います。
表示される位置に適したメニューを作成して工夫してみてください。

メニュー設定：スマホスライドメニュー

この章では、スマホスライドメニューの設定と表示イメージをご紹介します。

スマホメニューの設定項目は「表示・非表示」「アイコンデザインの選択」「表示位置（左右）」といずれも簡単で迷わないと思います。

以下の表示イメージと設定項目を参考に設定してみてください。

スマホスライドメニュー（クローズ）

スマホスライドメニュー（オープン）

※上記設定項目を変更する前にメニュー位置（表示させる場所）を以下で設定しておきます。

『WordPress管理＞ダッシュボード＞外観＞メニュー』をクリックします。

AFFINGER管理画面で設定するメニューにあわせてチェックを入れ、表示できる状態にします。

※ サンプルでは『ヘッダーメニュー』を対象メニューとしています。

※『スマホスライドメニュー』にチェックを入れます。

メニュー設定：検索アイコン

この章では、検索アイコンの設定と表示イメージをご紹介します。

スマホメニューの設定項目は「検索アイコンの表示とスタイル選択」」といずれも簡単で迷わないと思います。（検索アイコンは右上に表示されます）

オーバレイは全画面が検索画面に切り替わります。スライドは右側から中央までスライド画面が現れます。

以下の表示イメージと設定項目を参考に設定してみてください。

検索アイコン（オーバーレイ）

検索アイコン（スライド）

メニュー設定：追加メニュー

この章では、追加メニューの設定と表示イメージをご紹介します。

追加メニューは何れもスマホのヘッダー最上部に表示されます。（検索アイコンの左側）すべてのページに表示されます。

任意の『アイコン・テキスト・リンク』が設定できます。電話番号を登録し、タップしてかけられる設定も可能です。（追加メニューの色はカスタマイザーで設定します。後述）

追加メニュー（トップページ）

追加メニュー（下層ページ）

※『リンク先URL』を入力しないとメニューは表示されません。

※ 上記サンプルの追加メニューの色設定は、以下のメニューからカスタマイザーで設定します。

『WordPress管理＞ダッシュボード＞外観＞カスタマイズ＞メニュー＞スマホスライドメニュー / 検索』で設定します。

メニュー設定：その他のスマホメニュー

この章では、その他のスマホメニューの設定と表示イメージをご紹介します。

ミドルメニューは、以下サンプルのピンク枠にです。

ヘッダーメニュー（横列）を有効化

スマホミドルメニュー（TOP）

スマホミドルメニュー無し

スマホミドルメニュー

フッターメニュー（TOP）

フッターメニュー

※ スマホフッターメニューは、上記フッターメニューとは別に表示されます。

その他のスマホメニュー：補足

ヘッダーメニュー（横列）を有効化
- 「AFFINGER管理・WordPress管理」両方にチェックを入れます。
- WordPress管理：『外観＞メニュー』でメニュー位置→『ヘッダーメニュー（横列）』にチェックON
スマホミドルメニューを表示する（※メニュー設定で「スマホミドルメニュー」を設定して下さい）
- 「AFFINGER管理・WordPress管理」両方にチェックを入れます。
- WordPress管理：『外観＞メニュー』でメニュー位置→『スマホミドルメニュー』にチェックON

スマホフッターメニューを表示する（※「広告・フッター（固定） ※スマホのみ」使用時は表示されません。スマホ閲覧時の「ページTOPへのボタン」は自動で非表示になります）
- 「AFFINGER管理・WordPress管理」両方にチェックを入れます。
- WordPress管理：『外観＞メニュー』でメニュー位置→『スマフォフッターメニュー』にチェックON

※ スマホフッタメニューはスマホを少しスクロールすると表示されます。
※ PC用フッターメニューは、スマホでも表示されます。（ページの最下部）

※上記設定項目を変更する前にメニューの位置（表示させる場所）を以下で設定しておきます。

『WordPress管理＞ダッシュボード＞外観＞メニュー』をクリックします。