特定のページのみ、ヘッダーのカラーを変更したいのですが、どのようにすれば実装できるか教えていただきたいです。
テーマはDawnを使用しています。
よろしくお願いいたします。
Topic summary
ユーザーが特定のページでのみヘッダーの色を変更する方法について質問しています。使用しているテーマはDawnです。
提案された解決方法:
- CSSクラスを作成する
- 特定のページでheader要素にクラスを追加する条件分岐を実装する
具体的なアプローチ:
.custom-page-header-colorのようなCSSクラスを定義し、background-colorで希望の色を指定- 条件分岐でheaderを出し分けるか、
header.liquidでクラスを動的に追加する方法が考えられる
コード例が提示されていますが、議論は継続中で、具体的な実装の詳細は未確定です。
@mira0 さま
初めまして。新垣です。
CSSクラスの作成と特定のページの時にheaderにクラスを追加する条件分岐を作成すれば実装できるかと思います。
コードは擬似的な例です。
#header要素
#CSSファイル
.custom-page-header-color {
background-color: #yourColorCode; /* ここに希望の色コードを入力 */
}
.custom-collection-header-color {
background-color: #yourColorCode; /* ここに希望の色コードを入力 */
}
または、header.liquidをいくつか作成しておき、上記と同様の条件分岐でheader自体を出し分ける方法も考えられます。
以上、参考になりましたら幸いです。