AFFINGER メニューをヘッダー画像に透過させる
メニューをヘッダー画像上にのせてメニューの回りを透過させる設定は結構複雑ですね。同じ設定がいろいろな所に点在しているせいでしょうね。まずは一番先にチェックするポイントは【AFFINGER5管理】→【ヘッダー】で【下層ページにもヘッダー画像を表示する】にチェックを入れる。
ヘッダー画像を入れるところに注意
続いて確認するところは、【外観】→【カスタマイズ】→【ヘッダー画像】の項目でこちらには一切ヘッダー画像をいれてはダメ ヘッダー画像の高さだけ入れときましょう。
続いて【基本エリア設定】で【headerエリア】のところにヘッダー画像を挿入
メニュー背景を透明にするのがポイント
一つ前のメニューに戻り【メニューのカラーの設定】の項目へここがいろんなサイトを見てもなかなか理解が難しかったのですが【ヘッダーメニュー】の【背景色】を【透明】にするのですがもちろんカラーの中には【透明】はないので色のコードの所を空白にてオッケーボタンがないので欄外をクリックして色コードを空白で確定するとメニューバーが透過するはずです。
これでアイキャッチ画像のようなヘッダー画像上にメニューが透過されると思います。
これでできたサイトがこちら
