【Cocoonカスタマイズ】ヘッダー固定のときカラーを変更する方法

はじめに
完成イメージ
実装手順
さいごに

はじめに

以下の質問に回答します。

ヘッダーが上部に表示されているときのみ背景透明にしたい

お世話になっております。こちらのサイトのように、・追従時のヘッダーは白塗りの背景・上部表示時(ページ開いたときの状態)のみ、背景を透明にする・上部表示時と追従時でそれぞれ異なる文字色を使用するということは可能でしょうか？

完成イメージ

実装手順

以下の手順で実装します。

ラベル
Cocoon設定

表1に示す項目を設定します。

Cocoon設定
設定大項目項目設定値
ヘッダーヘッダー設定ヘッダーを固定するオン

設定	大項目	項目	設定値
ヘッダー	ヘッダー設定	ヘッダーを固定する	オン

ラベル

CSSを追加タイトル

以下のコードをstyle.cssに追加します。

:root {
  --color: #0000ff;       /* テキストカラー */
  --fix-color: #ff0000;   /* 固定テキストカラー */
  --fix-bgcolor: #ffffff; /* 固定背景カラー */
}

.header-container,
.navi {
  background-color: transparent;
}

.site-name-text-link,
.navi-in a {
  color: var(--color);

  &:hover {
    color: var(--color);
  }
}

/* 固定時 */
.body:has(.fixed-header) {
  :is(.header-container, .navi) {
    background-color: var(--fix-bgcolor);
  }

  :is(.site-name-text-link, .navi-in a) {
    color: var(--fix-color);

    &:hover {
      color: var(--fix-color);
    }
  }
}

ヘッダーが固定されると、CSSクラスheader-containerにfixed-headerが追加されます。

さいごに

今回紹介した方法を使えば、ヘッダーが固定される際に背景カラーとテキストカラーを簡単に変更できます。
Chromeデベロッパーツールを使用すれば、各CSSクラスを把握するのも簡単です。