当ページのリンクには広告が含まれています。

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

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

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

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

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

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

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

こんな方におすすめ!

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

この記事でわかること!

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

それではご覧ください!

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

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

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

AFFINGER 管理:メニュータブ(メニュー設定)の概要

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

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

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

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

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

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

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

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

・PC ヘッダーメニュー

PCのヘッダー部に読者を誘導するためのメニューが設定できます。ヘッダー部に画像を設置することで画像の「上・下・非表示」の表示設定が可能です。

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

スマホスライドメニュー

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

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

検索アイコン

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

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

追加メニュー

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

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

その他のスマホメニュー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AFFINGER 管理:メニュータブ|スマホスライドメニュー
設定項目

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

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

外観:メニュー|ヘッダーメニュー表示
yajirusi-sita-80x40

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

外観:メニュー|メニュー設定

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

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

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

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

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

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

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

AFFINGER 管理:メニュータブ|検索アイコン

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

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

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

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

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

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

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

WordPress管理>ダッシュボード>外観>カスタマイズ>メニュー>スマホスライドメニュー / 検索

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

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

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

スマホトップページ:フッターメニュー
表示イメージ
スマホトップページ:フッターメニュー2
表示イメージ

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

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

  • ヘッダーメニュー(横列)を有効化
    • 「AFFINGER管理・WordPress管理」両方にチェックを入れます。
    • WordPress管理:『外観>メニュー』でメニュー位置→『ヘッダーメニュー(横列)』にチェックON
  • スマホミドルメニューを表示する(※メニュー設定で「スマホミドルメニュー」を設定して下さい)
    • 「AFFINGER管理・WordPress管理」両方にチェックを入れます。
    • WordPress管理:『外観>メニュー』でメニュー位置→『スマホミドルメニュー』にチェックON
  • スマホフッターメニューを表示する(※「広告・フッター(固定) ※スマホのみ」使用時は表示されません。スマホ閲覧時の「ページTOPへのボタン」は自動で非表示になります)
    • 「AFFINGER管理・WordPress管理」両方にチェックを入れます。
    • WordPress管理:『外観>メニュー』でメニュー位置→『スマフォフッターメニュー』にチェックON

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

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

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

yajirusi-sita-80x40

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

外観:メニュー|メニュー設定

※ サンプルでは『フッターメニュー』を対象メニューとしています。
(スマホフッターメニューは非表示にしています)

※『フッターメニュー』にチェックを入れます。

AFFINGER管理側のメニュー表示設定とWordPress管理側のメニュー位置をあわせて設定しないと、うまく表示できません。

表示できない時は、以下のメニュー先で設定項目を再確認してみてください。

メニューは以下の2箇所です。

『AFFINGER管理>メニュー』

『WordPress管理>ダッシュボード>外観>メニュー>メニュー設定>メニューの位置』

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

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

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

まとめ!AFFINGER6 管理【メニュータブ】メニュー設定を完全解説!

AFFINGER6 管理画面で行う『メニュータブ:メニュー設定』の各設定項目について初心者さん向けにご紹介しました。WordPressテーマ AFFINGER6専用の拡張機能を有効に使うために、お役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/

-Basic setting AFFINGER
-,

PAGE TOP