テーマ「dawn」のヘッダーに関して

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

Topic summary

Dawnテーマでサイト構築中、ファーストビューのヘッダー透過は実装できたが、スクロール時に背景色とヘッダー文字色が重なり視認性が低下している問題が発生。

求めている機能:

  • ファーストビュー以下でスクロールした際、ヘッダー背景を白色に変化させたい
  • 参考サイトはDebutテーマ用のため、Dawnテーマでは少しコードが異なる

提案された解決策:

  • 有料記事に実装方法が記載されている（note.com）
  • HTML、CSS、Liquid、JavaScriptを使用する必要がある
  • コード知識がない場合は実装が難しい
  • Shopifyパートナーや制作会社への相談も検討すべき

技術的な難易度が高く、専門知識が必要な案件として位置づけられている。

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

現在、テーマ「DAWN」を使用してサイト構築中です。

下記サイトを参考にファーストビューのヘッダー透過まではできているのですが、

ページをスクロールする中で背景カラーとヘッダー上の文字の色が被って見えづらい状態です。

https://dtnavi.tcdigital.jp/shopify/shopify-header-customize/

ファーストビュー以下までスクロースするとヘッダーの背景が白色に変化するようにしたいのですが、

どうも上手くいかず困っています。

（上記サイトはテーマ「Debut」をベースにしているため「DAWN」とは少しコードが違うのかもしれません）

どなたか解決するための糸口をご教示いただけますと幸いです。よろしくお願いいたします。

2

TKB2様

ご質問を確認いたしました。

こちらの実装でしたら、以下の記事に方法が記載されておりました（一部有料）

https://note.com/tech_malin/n/n790fe984404b#ceeea0b1-d703-49b8-b15a-be7a38664eeb

本機能の実装はhtml,css,liquid,Javascriptを使用しますので、

ある程度コードの知識がないと実装は難しいです。

もし対応が難しいようでしたら、コードを書ける方や制作会社、

shopifyパートナー等にご相談することもご検討いただけましたらと存じます。

ご参考までに。

私たちの励みにもなりますので、 お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス 園畑

1 Like