【Dawnテーマ】で、指定の画像バナーをデスクトップ上のみ非表示（スマホ上では表示）したいのですが、どのようにすればいいでしょうか？
Topic summary
Dawnテーマで特定の画像バナーをデスクトップのみ非表示にする方法についての質問です。
解決方法:
image-banner.liquidにコードを追記することで対応可能- 参考記事のリンクが提供されている
実装の経過:
質問者はチャットGPTを活用しながら以下を実施:
- チェックボックス設定(
"type": "checkbox", "id": "hide_desktop")の追加箇所が不明だったため、AIに相談しながら進行 - クラスを付与するコードを記述した箇所では、デスクトップとスマホで画像バナーがズレる問題が発生
- 管理画面で表示・非表示を選択できるチェックボックスの実装は完了
現在の状況:
- 基本機能は実装できたが、「ズレ」の具体的な状況について回答者が詳細確認を求めている
- 画像やコード、画面の共有があれば原因特定に役立つ可能性がある
image-banner.liquidにコードを追記することで対応可能です。
具体的な方法はこちらの記事にまとめました。
回答有難うございます。
{ “type”: “checkbox”, “id”: “hide_desktop”, “default”: false, “label”: “デスクトップでは表示しない” },の入力箇所が分からなかったので、チャットGPTに聞きながら進めてみました。
“default”: “center”, “label”: “t:sections.image-banner.settings.desktop_content_alignment.label” }, { “type”: “checkbox”, “id”: “hide_desktop”, // ここに追加！ “default”: false, “label”: “デスクトップでは表示しない” },
ここまでは問題なく完了し、管理画面に表示・非表示を選択するチェックボックスができました。
その後、指定通りにチェックが入っているときだけクラスを付与するコードを記述した所、バナー画像がデスクトップとスマホ共にズレてしまいまして進めることが出来ませんでした。
「ズレてしまい」とは、具体的にどのような状況でしょうか？
画面やコードの画像があれば原因がわかるかもしれません。