特定のページのみヘッダーのカラーを変更したい

[mira0]

特定のページのみ、ヘッダーのカラーを変更したいのですが、どのようにすれば実装できるか教えていただきたいです。

テーマはDawnを使用しています。

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

[NIIGAKI_HYUGA]

@mira0 さま

初めまして。新垣です。

CSSクラスの作成と特定のページの時にheaderにクラスを追加する条件分岐を作成すれば実装できるかと思います。

コードは擬似的な例です。

#header要素
<header class="main-header {% if page.handle == "該当ページのhandle名" %}custom-page-header-color" {% elsif collection.handle == "該当コレクションのhandle名" %}custom-collection-header-color{% endif %}>
</header>

#CSSファイル
.custom-page-header-color {
  background-color: #yourColorCode; /* ここに希望の色コードを入力 */
}
.custom-collection-header-color {
  background-color: #yourColorCode; /* ここに希望の色コードを入力 */
}

または、header.liquidをいくつか作成しておき、上記と同様の条件分岐でheader自体を出し分ける方法も考えられます。

以上、参考になりましたら幸いです。