ヘッダーの背景色を透明に設定したが、スクロールした後はヘッダーの背景色が白くなってしまいます。 - CSSカスタマイズ相談

RE: ヘッダーの背景色を透明に設定したが、スクロールした後はヘッダーの背景色が白くなってしまいます。

raido — Tue, 05 Dec 2023 05:54:31 +0000

chu-ya　様

お世話になります。

丁寧な解説、誠にありがとうございます！

ヘッダーの背景色は透明のまま維持できております。

ありがとうございました!

RE: ヘッダーの背景色を透明に設定したが、スクロールした後はヘッダーの背景色が白くなってしまいます。

大門未知子 — Mon, 04 Dec 2023 10:54:29 +0000

●対策

ヘッダーが固定になると、CSSクラスfixed-headerが付加される。（トップの時は無い）
この為、固定で無い時、importantを付け、重ねるようにする。
(インラインCSSで追加されるstaticを無効とする)

※ヘッダー幅がautoとなる為、100%とする。

.header-container:not(.fixed-header) {
position: absolute!important;
width:100%!important;
}

RE: ヘッダーの背景色を透明に設定したが、スクロールした後はヘッダーの背景色が白くなってしまいます。

大門未知子 — Mon, 04 Dec 2023 10:48:57 +0000

●原因

追加CSSに以下を記述し、ヘッダーをコンテンツの上に重ねている。

/* ヘッダーを絶対値とし背景透明 */
.header-container {
position:absolute;
}

→→ヘッダーの固定としている為、スクロールすると以下に変わり、固定される。

position: fixed

トップに戻った際、以下でインランCSSが、position: fixed→staticとなる。
この為、追加CSSで記述が無効となる。

結果、ヘッダーがコンテンツ上に重ならなず、ヘッダー高さ分、bodyの白地が見える。

https://github.com/xserver-inc/cocoon/blob/444828388499efa29400eacc341c640b9f8b9a81/tmp/footer-javascript.php#L144

ヘッダーの背景色を透明に設定したが、スクロールした後はヘッダーの背景色が白くなってしまいます。

raido — Mon, 04 Dec 2023 09:53:07 +0000

ヘッダーの背景色を透明に設定しました。

ある程度下へスクールして、追従ヘッダーに切り替わります。このときはまだヘッダーの背景色は透明です。

そして、再び上部へスクロールし、ヘッダーがページの最上部に位置すると、透明だった背景色が白になってしまいます。

ヘッダー自体も追従ヘッダーのままです。

ヘッダーの背景色は透明を維持したいのですが、どのようにしたらいいのでしょうか。

ちなみに、ヘッダーにはposition:absolute;を設定し、コンテンツとかぶるようにしておおります。（関係ないと思いますが念のため）

サイトのＵＲＬはこちらです。

https://washree.raidoindy.com/

以下環境情報です。

----------------------------------------------
サイト名：ワシュリー
サイトURL：https://washree.raidoindy.com
ホームURL：https://washree.raidoindy.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：6.4.1
PHPバージョン：7.4.33
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.9
カテゴリー数：2
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：845バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：http://washree.raidoindy.com/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Blocks Animation: CSS Animations for Gutenberg Blocks 2.5.2
Contact Form 7 5.8.4
GreenShift - Animation and Page Builder Blocks 7.5.3
----------------------------------------------

よろしくお願い致します。