ヘッダーメニュー透過

Server WordPress

WordPressテーマ AFFINGER6 でメニューの背景を透明に ヘッダー画像に透過させるのは

※アフェリエイト広告を利用してます。

AFFINGER メニューをヘッダー画像に透過させる

メニューをヘッダー画像上にのせてメニューの回りを透過させる
設定は結構複雑ですね。同じ設定がいろいろな所に点在しているせいでしょうね。
まずは一番先にチェックするポイントは【AFFINGER5管理】→【ヘッダー】で
【下層ページにもヘッダー画像を表示する】にチェックを入れる。


ヘッダー画像を入れるところに注意

続いて確認するところは、【外観】→【カスタマイズ】→【ヘッダー画像】の
項目でこちらには一切ヘッダー画像をいれてはダメ ヘッダー画像の高さだけ入れときましょう。



続いて【基本エリア設定】で【headerエリア】のところにヘッダー画像を挿入


メニュー背景を透明にするのがポイント

一つ前のメニューに戻り【メニューのカラーの設定】の項目へ
ここがいろんなサイトを見てもなかなか理解が難しかったのですが
【ヘッダーメニュー】の【背景色】を【透明】にするのですが
もちろんカラーの中には【透明】はないので色のコードの所を
空白にてオッケーボタンがないので欄外をクリックして色コードを
空白で確定するとメニューバーが透過するはずです。



これでアイキャッチ画像のようなヘッダー画像上にメニューが透過されると思います。


これでできたサイトがこちら


このエントリーをはてなブックマークに追加 ブログランキング・にほんブログ村へ