- AFFINGER6のヘッダーメニューはどこで設定できるの？
- ヘッダーメニューの配置を変えたい…
- 設定箇所が多くて思うような設定ができない…
公式マニュアルを読んでも、PC用のヘッダーメニュー(グローバルメニュー)の設定方法が少しわかりにくいと感じました。
この記事ではAFFINGER6(アフィンガー6)のヘッダーメニューの設定方法についてわかりやすくまとめた。
ヘッダーメニューの設定方法がうまくいかない方は参考にしていただければ。
アフィンガー6でヘッダーメニューを設置できる場所
AFFINGER6(アフィンガー6)では次の3つの場所にヘッダーメニューを設置できます。
- ヘッダー画像の上(デフォルト設定)
- ヘッダー画像の下
- サイトタイトルの右
上の画像のように「ヘッダー画像の上下」と「サイトタイトル右」は併用可能です！
アフィンガー6でヘッダーメニューを設定する方法
アフィンガーでは次の5つの管理画面でヘッダーメニューをカスタマイズできます。
- メニューの作成：
外観 > メニュー - 表示位置：
AFFINGER管理 > メニュー > PCグローバルメニュー - ヘッダー画像上・下のメニュー色・幅：
外観 > カスタマイズ > 各メニュー設定 > PCヘッダーメニュー - サイトタイトル右のメニューを有効化する：
AFFINGER管理 > ヘッダー - サイトタイトル右のメニューの色：
外観 > カスタマイズ > 基本エリア設定 > ヘッダーエリア
アフィンガーは設定項目が多く混乱しがちですが、「ヘッダーメニューで操作するのは5ヶ所」と覚えておくと設定が捗ります。
【準備】メニューの作成
まずは外観 > メニューから以下の手順で表示するメニューを作ります。
- 新たにメニューを作成する
- メニュー名(任意)を入力
- メニューを表示したい場所を選択
- メニューを作成する
- メニューに表示したい項目にを選ぶ
- メニューに追加する
- 追加されたメニューを選択
- 実際のメニューに表示するラベル名を入力
ヘッダーメニューに限らず、サイドメニューやフッターメニューでも同じです。
ヘッダーメニューを設定する方法
ヘッダーメニューは、以下のステップで設定できます。
- 外観 > メニュー：「ヘッダーメニュー（PC※960px以上）」でメニューを作る
- AFFINGER管理 > メニュー > PCグローバルメニュー：ヘッダー画像の上・下の位置選択
外観 > メニューヘッダーメニュー(PC※960px以上)でメニューを作る
上記で解説したようにヘッダーメニュー(PC※960px以上)でメニューを作ります。
AFFINGER管理 > メニュー > PCグローバルメニューヘッダー画像の上・下の位置選択
AFFINGER管理 > メニュー > PCグローバルメニューからPC用メインメニューの表示場所を選択します。
初期値はヘッダー画像の上になっています。
これでヘッダーメニューをヘッダー画像の上下に設置完了です。
ヘッダーメニューのカラー変更方法
ヘッダー画像上・下のメニューの背景色や幅など詳細設定は以下から設定します。
外観 > カスタマイズ > 各メニュー設定 > PCヘッダーメニュー：メニューの背景色や幅などの詳細設定
ここで設定できる詳細内容は以下の項目です。
- ヘッダーメニュー全体の背景色
- メニュー間のボーダーカラー(区切り線の色)
- ヘッダーメニューの文字色
- 背景色のグラデーション向き
- 第一階層の文字太さ
- メニューのセンター寄せ
- メニューの横幅100％表示(画面幅いっぱいに表示)
- メニュー(項目)の幅
- ドロップダウンメニュー(第二階層以降)の背景色
- ヘッダーメニューの背景を画像に変更
項目が多いですが、カスタマイザーのプレビューで確認しながら設定できるので感覚的に操作できるはずです！
サイトタイトル右にメニューを表示する方法
ヘッダーメニューをサイトタイトルの右側に表示するには2つの方法があります。
- 方法1：フッター用メニューを表示する方法
- 方法2： ヘッダーメニュー（横列）設定で表示する方法
この2つの方法でヘッダーメニューを表示するには以下の設定が必要です。
タイトルの右横にメニューを表示するためには…
AFFINGER管理 > ヘッダー > PCのみから「ヘッダーを分割しない」のチェックを外す
サイトタイトル右にメニューを表示する方法【方法1】フッター用メニューを使う方法
フッター用メニューをヘッダーに設定する方法
フッターメニューがない場合は、外観 > メニューからフッターメニューを作ります。
作り方は【準備】ヘッダーメニューの作成と同じ手順で、メニューの位置をフッターメニューで作成できます。
フッター用メニューを利用したヘッダーメニューのカラー変更
フッター用メニューをヘッダーメニューに設定する場合の文字色は外観 > カスタマイズ > 基本エリア設定 > ヘッダーエリアの最下部「電話番号とヘッダーリンク」から設定できます。
ここがヘッダーメニューの設定で最もわかりづらいところだと思います！
電話番号やヘッダー右(フッター)ウィジェットと一緒に設定すると下の写真のうような表示にすることも可能です。
＼電話番号やちょっとしたキャッチを挿入できる／
サイトタイトル右にメニューを表示する方法【方法2】ヘッダーメニュー(横列)で設定する方法
この方法でメニューを表示すると下の画像のようにメニューの下にタイトル属性を表示することができます。
ヘッダーメニュー(横列)で設定する方法
ヘッダーメニュー(横列)ってどこで設定できるの？
まずは【準備】ヘッダーメニューの作成と同じ手順で、メニューの位置をヘッダーメニュー(横列)で作成します。
メニューが作成後、以下の手順でタイトル属性を付与することができます。
- 表示オプションのタブを開く
- タイトル属性の項目にチェックをつける
- タイトル属性が表示されるので、メニューにあった属性を付与する
最後にAFFINGER管理 > メニュー > PC用グローバルメニューから「ヘッダーメニュー(横列)を有効化」にチェックを入れてSaveしたら完了！
ヘッダーメニュー(横列)の文字色を変更する方法
ヘッダーメニュー(横列)の文字色を変更する場所か見つからない・・・
少しわかりにくいですが、方法1と同じく外観 > カスタマイズ > 基本エリア設定 > ヘッダーエリアの「電話番号とヘッダーリンク」で文字色を設定できます。
