PR 設定

AFFINGER6でヘッダーメニュー(横列)を表示させる方法

ここでは、ヘッダーの右上にある「ヘッダーメニュー(横列)」を表示させるための手順を解説します。

「ヘッダーメニュー(横列)」とは、ヘッダーの右サイドにあるメニューのことです。

ここにメニューを表示させるには、

  • ヘッダー横に表示するメニューを作成する
  • AFFINGER管理設定でヘッダーメニュー(横列)を有効化する
  • カスタマイズにて色を設定する

この3つが必要です。

それぞれの手順を詳しく解説していきます。

ヘッダー横に表示するメニューを作成する

まずはじめに、ヘッダー横に表示するメニューを作成します。

1.左メニューの「外観」① →「メニュー」② の順にクリックし、メニュー編集画面を開きます。

2.メニューの編集画面にある「新しいメニューを作成しましょう」をクリックします。

3.新しいメニュー編集画面が開くので、まずはメニュー名を入力し③、右下の「メニューを作成」④をクリックします。

ここでは「ヘッダー横サンプル」という名前で進めていきます。

4.ヘッダー横に表示するメニューを「メニュー項目を追加」から選んで追加していきます。

5.ここではわかりやすいように、固定ページをメニューに追加していきます。

  • まずは「すべて表示」⑤ のタブをクリックし、固定ページをすべて表示する
  • 追加したい固定ページ⑥ を選択し、「メニューに追加」⑦ をクリックします

6.すると「メニュー構造」の方に、追加した固定ページが表示されました。

7.次に、メニュー設定の「ヘッダーメニュー(横列)」⑧ にチェックを入れ、「メニューを保存」⑨ をクリック。

これで、ヘッダー横に表示するメニューの作成は終了です。

これだけではまだヘッダー横にメニューを表示できません。

次の手順は、AFFINGER管理の設定です。

AFFINGER管理でヘッダーメニュー(横列)を有効化する

ヘッダーメニュー(横列)を有効にするために、AFFINGER管理で設定を変更します。

1.左メニューの下の方にある「AFFINGER 管理」をクリックし、AFFINGERの管理画面を開きます。

2.管理メニューの「メニュー」① をクリックすると「メニュー設定」が開きます。

PC用グローバルメニューの項目の中にある「ヘッダーメニュー(横列)を有効化」にチェックを入れます(デフォルトではチェックが入っていません)。

3.下までスクロールすると、「その他のスマホメニュー」という項目があります。

スマホのヘッダーにも「ヘッダーメニュー(横列)」を表示させたい場合は、「ヘッダーメニュー(横列)を有効化」にチェックを入れて「Save」を押してください。

スマホではこんな感じで表示されます。

これでヘッダー横にメニューが表示されるようになりました。

あとは色の設定や、サブタイトルの設定、WEBアイコンの設定などをするだけです。

ヘッダーメニュー(横列)の文字色を変更する

ヘッダーメニュー(横列)の文字色の変更は、カスタマイズの「基本エリア設定」で行います。

これはけっこうわかりにくいと思うので、ここで変更手順を紹介しておきます。

1.「外観」→「カスタマイズ」→「基本エリア設定」→「ヘッダーエリア」の順にクリック。

2.ヘッダーエリア設定の一番下に「電話番号とヘッダーリンク」の設定があります。

ここの色を変更することで、ヘッダーメニュー(横列)の文字色が変更できます。

ヘッダーメニュー(横列)が表示されない場合

メニューも作成し、AFFINGER管理で有効化もした。

・・・なのにメニューが表示されない。

という場合に考えられるのは、

「ヘッダーを分割しない」にチェックが入ってる

ということです。

ここを一度チェックしてみてください。

AFFINGER管理メニューの「ヘッダー」を開き、ヘッダーエリアの項目の「PCのみ」の下にある「ヘッダーを分割しない」にチェックが入っていないか確認してください。

「チェックを外して「Save」を押しても、チェックがまた復活しているんです・・・(泣)」

という場合は、アフィンガーの子テーマ「AFFINGER JET」の設定が影響している可能性があります。

解決方法

JETの管理画面を開き、「JETによる親テーマ管理設定の上書きを解除する」にチェックを入れて「Save」クリックする。

次にAFFINGER管理を開き、「ヘッダーを分割しない」のチェックを外してセーブみてください。

これでチェックが外れているはずです。

-設定
-

PAGE TOP