ここでは、ヘッダーの右上にある「ヘッダーメニュー（横列）」を表示させるための手順を解説します。
「ヘッダーメニュー（横列）」とは、ヘッダーの右サイドにあるメニューのことです。
ここにメニューを表示させるには、
- ヘッダー横に表示するメニューを作成する
- AFFINGER管理設定でヘッダーメニュー（横列）を有効化する
- カスタマイズにて色を設定する
この3つが必要です。
それぞれの手順を詳しく解説していきます。
ヘッダー横に表示するメニューを作成する
まずはじめに、ヘッダー横に表示するメニューを作成します。
１．左メニューの「外観」① →「メニュー」② の順にクリックし、メニュー編集画面を開きます。
２．メニューの編集画面にある「新しいメニューを作成しましょう」をクリックします。
３．新しいメニュー編集画面が開くので、まずはメニュー名を入力し③、右下の「メニューを作成」④をクリックします。
ここでは「ヘッダー横サンプル」という名前で進めていきます。
４．ヘッダー横に表示するメニューを「メニュー項目を追加」から選んで追加していきます。
５．ここではわかりやすいように、固定ページをメニューに追加していきます。
- まずは「すべて表示」⑤ のタブをクリックし、固定ページをすべて表示する
- 追加したい固定ページ⑥ を選択し、「メニューに追加」⑦ をクリックします
６．すると「メニュー構造」の方に、追加した固定ページが表示されました。
７．次に、メニュー設定の「ヘッダーメニュー（横列）」⑧ にチェックを入れ、「メニューを保存」⑨ をクリック。
これで、ヘッダー横に表示するメニューの作成は終了です。
これだけではまだヘッダー横にメニューを表示できません。
次の手順は、AFFINGER管理の設定です。
AFFINGER管理でヘッダーメニュー（横列）を有効化する
ヘッダーメニュー（横列）を有効にするために、AFFINGER管理で設定を変更します。
１．左メニューの下の方にある「AFFINGER 管理」をクリックし、AFFINGERの管理画面を開きます。
２．管理メニューの「メニュー」① をクリックすると「メニュー設定」が開きます。
PC用グローバルメニューの項目の中にある「ヘッダーメニュー（横列）を有効化」にチェックを入れます（デフォルトではチェックが入っていません）。
３．下までスクロールすると、「その他のスマホメニュー」という項目があります。
スマホのヘッダーにも「ヘッダーメニュー（横列）」を表示させたい場合は、「ヘッダーメニュー（横列）を有効化」にチェックを入れて「Save」を押してください。
これでヘッダー横にメニューが表示されるようになりました。
あとは色の設定や、サブタイトルの設定、WEBアイコンの設定などをするだけです。
ヘッダーメニュー（横列）の文字色を変更する
ヘッダーメニュー（横列）の文字色の変更は、カスタマイズの「基本エリア設定」で行います。
これはけっこうわかりにくいと思うので、ここで変更手順を紹介しておきます。
１．「外観」→「カスタマイズ」→「基本エリア設定」→「ヘッダーエリア」の順にクリック。
２．ヘッダーエリア設定の一番下に「電話番号とヘッダーリンク」の設定があります。
ここの色を変更することで、ヘッダーメニュー（横列）の文字色が変更できます。
ヘッダーメニュー（横列）が表示されない場合
メニューも作成し、AFFINGER管理で有効化もした。
・・・なのにメニューが表示されない。
という場合に考えられるのは、
「ヘッダーを分割しない」にチェックが入ってる
ということです。
ここを一度チェックしてみてください。
AFFINGER管理メニューの「ヘッダー」を開き、ヘッダーエリアの項目の「PCのみ」の下にある「ヘッダーを分割しない」にチェックが入っていないか確認してください。
「チェックを外して「Save」を押しても、チェックがまた復活しているんです・・・（泣）」
という場合は、アフィンガーの子テーマ「AFFINGER JET」の設定が影響している可能性があります。
JETの管理画面を開き、「JETによる親テーマ管理設定の上書きを解除する」にチェックを入れて「Save」クリックする。
次にAFFINGER管理を開き、「ヘッダーを分割しない」のチェックを外してセーブみてください。
これでチェックが外れているはずです。
