AFFINGER7のメニュー設定｜AFFINGER管理の設定項目と使い方

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

この記事で解決できる悩み

この記事では、AFFINGER7の「AFFINGER管理 → メニュー」で設定できる項目と、それぞれの設定方法を解説します。

「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。

AFFINGER7を導入したばかりの方は、まず初期設定を済ませておきましょう。

関連記事 詳しい設定方法は、以下の記事で解説しています。

AFFINGER7「メニュー」の基本構成

AFFINGER7の「メニュー」では、サイトに表示するメニューのデザインや表示方法などを設定できます。

WordPressの「外観 → メニュー」で作成したメニューをもとに、AFFINGER7独自の表示設定を行う場所です。

「メニュー」では、主に以下の項目を設定できます。

• PCヘッダーメニュー
• スマホスライドメニュー
• 検索アイコン
• 追加メニュー
• その他のスマホメニュー

それぞれ設定できる内容や表示される場所が異なるため、サイトの構成に合わせて必要な項目を設定します。

関連記事 メニューそのものの作成や表示位置の設定については、以下の記事で詳しく解説しています。

ここからは、「AFFINGER管理 → メニュー」にある各設定項目について詳しく見ていきましょう。

PCヘッダーメニュー

「PCヘッダーメニュー」では、PCで表示するヘッダーメニューの位置を設定できます。

AFFINGER7では、ヘッダーメニューをヘッダーの上または下に表示したり、表示しない設定にしたりできます。

WordPressでメニューを作成し、表示位置を設定したうえで、AFFINGER管理から表示方法を調整します。

PCヘッダーメニューの設定画面を開く

WordPress管理画面から、「AFFINGER管理 → メニュー」をクリックします。

「メニュー」画面を開くと、「PCヘッダーメニュー」の設定項目が表示されます。

ここでは、以下の項目からPCヘッダーメニューの表示方法を選択できます。

• PCヘッダーメニューを上に表示する（デフォルト）
• PCヘッダーメニューを下に表示する
• PCヘッダーメニューを表示しない
• ヘッダーメニュー（横列）を有効化（960px以上）
• ヘッダー上部にフッター用リンクと同じリンクを追加する（960px以上）

それぞれ表示される位置が異なるため、サイトのヘッダー構成に合わせて設定しましょう。

PCヘッダーメニューを上に表示する

「PCヘッダーメニューを上に表示する」は、AFFINGER7のデフォルト設定です。

ヘッダー画像などを使用していない場合は、サイト上部にメニューが表示されます。

基本的には、この設定のままで問題ありません。

特に表示位置を変更する必要がなければ、デフォルト設定を使用するのがおすすめです。

PCヘッダーメニューを下に表示する

「PCヘッダーメニューを下に表示する」を有効にすると、ヘッダー画像などの下にメニューを表示できます。

ヘッダーに画像や動画などを配置している場合は、コンテンツの下にメニューを配置したいときに利用できます。

サイトの構成によって見え方が変わるため、設定後は実際のサイトを確認しておきましょう。

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

PCでヘッダーメニューを使用しない場合は、「PCヘッダーメニューを表示しない」を有効にします。

たとえば、ヘッダーメニューの代わりに「ヘッダーメニュー（横列）」などを使用する場合は、通常のPCヘッダーメニューを非表示にすることもできます。

ただし、メニューを非表示にするとサイト上部からカテゴリーなどへ移動する導線がなくなるため、別のナビゲーションを用意しておくと安心です。

ヘッダーメニュー（横列）を有効化（960px以上）

「ヘッダーメニュー（横列）を有効化（960px以上）」をONにすると、PC表示時のヘッダーにメニューを横並びで表示できます。

通常のPCヘッダーメニューとは異なり、ヘッダー内にメニューを横並びで表示できます。

また、現在のAFFINGER7では下層メニューにも対応しており、親メニューにカーソルを合わせるとプルダウンで子メニューを表示できます。

• 「ヘッダーメニュー（横列）」を有効化できない場合は、「外観 → カスタマイズ → ヘッダーナビゲーション → ヘッダー（PC）」にある「ヘッダーを分割しない」の設定を確認してください。
  「ヘッダーを分割しない」が有効になっている場合は、「ヘッダーメニュー（横列）」を有効化できません。いったん「ヘッダーを分割しない」を無効にして保存してから、「ヘッダーメニュー（横列）」を有効化します。

ヘッダー上部にフッター用リンクと同じリンクを追加する（960px以上）

「ヘッダー上部にフッター用リンクと同じリンクを追加する（960px以上）」をONにすると、フッターメニューと同じリンクをPC表示時のヘッダー上部にも表示できます。

この設定を使うと、フッターに設定しているリンクをヘッダー上部にも表示できるので、サイトマップやお問い合わせ、プライバシーポリシーなどの補助的なリンクを配置したい場合に便利です。

ただし、フッターメニュー自体が設定されていない場合は、表示するリンクがありません。

また、「ヘッダーを分割しない」設定が有効になっている場合は表示されません。

基本的には、フッターに設定しているリンクをヘッダー上部にも表示したい場合だけONにすれば十分です。

フッター用リンクをヘッダーメニューと併用する

「ヘッダー上部にフッター用リンクと同じリンクを追加する（960px以上）」を有効にし、PCヘッダーメニューを表示すると、ヘッダー部分に2つのメニューを表示できます。

上部にサイトマップやお問い合わせなどの補助的なリンク、下部にカテゴリーなどの主要なメニューを配置することで、2段構成のヘッダーメニューとして利用できます。

PCヘッダーメニューの設定で注意したいポイント

PCヘッダーメニューの表示位置を変更しても、メニューそのものを作成・割り当てる設定とは別です。

メニューの作成や表示位置の設定はWordPress側で行い、AFFINGER管理ではPCヘッダーメニューの表示方法を設定します。

また、カスタマイザー側の設定によっては、PCヘッダーメニューの表示に影響する場合があります。

設定後にメニューが意図した位置に表示されない場合は、「外観 → カスタマイズ → メニュー」の設定も確認しておきましょう。

• AFFINGER公式でも、PCヘッダーメニューのカラーや幅などはカスタマイザーから設定できると案内されています。

スマホスライドメニュー

「スマホスライドメニュー」は、スマートフォンで表示するスライド式のメニューです。

ここでは、スマホスライドメニューの表示・非表示や表示位置などを設定できます。

スマホスライドメニューを表示する場合は、WordPress側で作成したメニューを「スマホスライドメニュー」に割り当てておく必要があります。

設定できる主な項目は、以下のとおりです。

• スマホスライドメニューの表示設定
• スマホスライドメニューのアイコンデザイン
• スマホスライドメニューの表示位置
• 検索アイコンの表示設定
• 追加メニューの設定

基本的には、スマートフォンでメニューを表示したい場合は有効化しておけば問題ありません。

メニューの内容はWordPress側で設定し、AFFINGER管理ではスマホスライドメニューの表示方法を設定します。

メニューアイコンの色やデザインなどは、「外観 → カスタマイズ → メニュー → スマホスライドメニュー / 検索」から設定できます。

表示設定

スマホスライドメニューの表示設定は、スマートフォンで表示するメニューの動作を設定できます。

以下の3項目を設定できます。

• スマホメニューを表示しない
• 下層リンクを最初から開く
• PC時はスマホメニューを出力しない

「スマホメニューを表示しない」を有効にすると、スマートフォンでスライドメニューを表示しない設定にできます。

「下層リンクを最初から開く」を有効にすると、親メニューの下にあるリンクを最初から展開した状態で表示できます。メニューの階層が多いサイトでは、目的のページを見つけやすくなります。

「PC時はスマホメニューを出力しない」を有効にすると、PC表示時にはスマホ用のスライドメニューを出力しないようにできます。

サイトの構成やメニューの使い方に合わせて、調整できます。

アイコンデザイン

「アイコンデザイン」では、スマホスライドメニューを開くためのメニューアイコンのデザインを設定できます。

スマートフォンのヘッダーに表示されるメニューアイコンを、サイトのデザインに合わせて変更できます。

• ノーマル・クール・リスト
•  アイコン下に「MENU」「CLOSE」を追加する
•  メニューアイコンを縦にする

アイコンの表示位置や色なども含めて、実際のスマートフォン表示を確認しながら調整しましょう。

メニューの位置

「メニューの位置」では、スマホでスライドメニューを開いたときに、メニューを表示する位置を設定できます。

スライドメニューは、画面の左右どちらから表示するかを選択できます。

• 左・右

サイトのレイアウトやヘッダーのデザインに合わせて、使いやすい位置に設定しましょう。

検索アイコン

「検索アイコン」では、ヘッダーに表示する検索アイコンの表示・非表示や検索画面の表示方法を設定できます。

設定できる主な項目は、以下のとおりです。

• スマホヘッダーに検索アイコンを追加する
• オーバーレイ・スライド

検索アイコンを表示すると、ヘッダーに検索アイコンが追加され、訪問者がサイト内を検索できるようになります。

検索機能を利用しやすくしたい場合は、検索アイコンを表示しておくのがおすすめです。

追加メニュー

「追加メニュー」では、スマートフォンのヘッダーに通常のメニューとは別のリンクを2つ追加できます。

必要な設定項目は、以下のとおりです。

• 追加メニューに表示するWebフォント
• 追加メニューに表示する文字（全角6文字）
• リンク先URL

サイト内の必要なページへのリンクなどを追加して、スマホから目的のページへ移動しやすくできます。

その他のスマホメニュー

「その他のスマホメニュー」では、スライドメニューとは別に表示するスマホ用メニューを設定できます。

たとえば、ヘッダーの上部や下部、画面内の固定位置などにメニューを表示したい場合に使用します。

スライドメニューとは別の場所に表示できるので、スマホ用のレイアウトに合わせて設定できます。

メニューの設定が完了したら、サイト全体のデザインやレイアウトも整えていきましょう。

関連記事 詳しい設定方法は、以下の記事で解説しています。

まとめ！AFFINGER7のメニュー設定｜AFFINGER管理の設定項目と使い方

AFFINGER7の「AFFINGER管理 → メニュー」では、PCやスマートフォンで表示するメニューの動作や表示方法を設定できます。

今回解説した主な設定は、以下のとおりです。

• PCヘッダーメニュー：PC表示時のヘッダーメニューの表示位置や表示・非表示を設定
• ヘッダーメニュー（横列）：PC表示時にメニューを横列で表示
• フッター用リンク：フッターメニューと同じリンクをヘッダー上部にも表示
• スマホスライドメニュー：スマートフォン用メニューの表示や動作を設定
• 検索アイコン：スマートフォンのヘッダーに検索アイコンを表示
• 追加メニュー：スマートフォンのヘッダーに個別のリンクを追加
• その他のスマホメニュー

メニューの内容そのものはWordPress側で設定し、AFFINGER管理では表示方法や動作を調整すると考えるとわかりやすいでしょう。
すべての設定を変更する必要はありません。
サイトの構成やデザインに合わせて、必要な項目だけ設定しておけば十分です。