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

日本語 ディスカッション 技術的なQ＆A
,
1

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

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

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

2

@mira0 さま

初めまして。新垣です。

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

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

#header要素

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

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

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