WING(AFFINGER5)のヘッダーのカスタマイズをしました

今回からはWING(AFFINGER5)を導入して、NOTE.2020のデザインを適用した後、もう少し自分好みにカスタマイズしたいなと苦労しながら変更した点を何回かにわたって解説していきます。

ここまではスムースに来たんですが、最終的なカスタマイズは苦労しました。
Webで結構調べたので、自分自身への備忘録も兼ねてまとめました。

第1回目は『ヘッダーのカスタマイズ』になります。

ヘッダーのカスタマイズ

ヘッダーのメニューの位置を変更します。
サイトロゴの下 → サイトロゴの右に変更します。

ヘッダーをサイトロゴの右横へ変更

AFFINGER5管理 > メニュー

『PC用メインメニューを表示しない』と『 ヘッダー用メニュー（横列）を有効化（960px以上）』にチェックを入れます。
すると、以下のように表示が変わります。
※あれ、メニューがなくなりました？？？

メニューはなくなっていませんので、次を参考にして対応していきましょう。

ヘッダーの文字色の変更

外観 > カスタマイズ > 基本エリア設定 > ヘッダーエリア

【電話番号とヘッダーリンク】の色を変更します。
※現状はメニューがなくなったわけではなく、背景と文字色が同色のため見えなくなっている状態でした。

ここを黒色に変更すると、メニューが見えるようになります。

これで『ヘッダーのカスタマイズ』は終わりになります。
同じところで困っている方は参考にしてください。