コレクションリストの画像が少し暗い

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

AI-generated summary

主題: Shopify「Debut」テーマで、トップのコレクションリスト画像だけが他より暗く表示される問題。

背景/原因: 画像上のテキスト可読性を高めるため、CSSの擬似要素::beforeで半透明の色（暗いオーバーレイ）が敷かれている設計。

技術的詳細: 対象は「Assets/theme.scss」にある .collection-grid-item__title-wrapper::before のルール（背景色 #685f58 と opacity: 0.34）。テーマのバージョンにより記述場所は異なる可能性あり。

対処法: 上記CSSルールを削除またはコメントアウトすると、コレクションリスト画像が他の画像と同じ明るさになる。

結果/現状: 提案どおりの修正で問題は解決。質問者が動作確認済み。未解決の論点はなし。

1

現在DEBUTにてトップページを作成していますが、コレクションリストの画像だけ他より少し暗く表示されます。

他と同じ明るさで表示するにはどうしたらよいか分かる方いらっしゃればぜひ教えてください。

2

Debutのコレクションリストというのはこれのことですよね？
https://debut-theme-default.myshopify.com/collections

画像と重なってるテキストを読みやすくするためのデザインだと思います。

テーマのバージョンによって異なるかもしれませんが、現バージョンの場合は「Assets/theme.scss」に書いてある以下のCSSを削除、またはコメントアウトすれば他と同じになります。

.collection-grid-item__title-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #685f58;
  opacity: 0.34; }
3

早速の返信ありがとうございます！

簡単にできました、丁寧にありがとうございます(^^