Liquid、JavaScriptなどに関する質問
質問拝見しました。
Dawnテーマの「画像バナー」セクションにて、画像のサイズ指定とリンクの設定を行うには、sections/image-banner.liquid をカスタマイズする必要があります。
デフォルトでは、Dawnの画像バナーは適切な高さがCSSで調整されます。
サイズを指定する場合、CSSで設定していただければと思います。
CSSで指定する base.css などのスタイルシートに以下を追加します。
.custom-banner img {
width: 800px;
height: auto;
max-width: 100%;
}
以上のパターンでは、image-banner.liquid の <img> タグに class="custom-banner" を追加して調整しております。
sections/image-banner.liquid を開き、画像を <a> タグで囲むように変更します。
下記例になります。
{% if section.settings.image_link != blank %}
<a href="{{ section.settings.image_link }}">
{% endif %}
<img
src="{{ section.settings.image | img_url: 'master' }}"
alt="{{ section.settings.image.alt }}"
width="800" height="400"
>
{% if section.settings.image_link != blank %}
</a>
{% endif %}
ファイルの最後にある schema の settings に以下を追加してください。これにより、管理画面のセクション設定で「画像のリンク」を追加できます。
{
"type": "url",
"id": "image_link",
"label": "画像のリンク"
}
一般例になるのでファイル内の詳細のクラスや設置箇所に関してはご確認ください。
参考程度にしていただけますと幸いです。
なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。
株式会社フルバランス
画像バナーサイズ設定が出来ません。
リンクはほかの記事を参考に行いましたので
画像バナーサイズ設定をもう少し詳細に教えていただきたいです
Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024