FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

DAWN 15.2.0の画像バナーにて画像サイズの指定と画像にリンクを設定したい

DAWN 15.2.0の画像バナーにて画像サイズの指定と画像にリンクを設定したい

skt
観光客
5 0 1

DAWN 15.2.0の画像バナーにて画像サイズの指定と画像にリンクを設定したいです

よろしくお願いいたします。

  • CSS
2件の返信2

株式会社フルバランス
Shopify Partner
1676 591 774

質問拝見しました。

 

Dawnテーマの「画像バナー」セクションにて、画像のサイズ指定リンクの設定を行うには、sections/image-banner.liquid をカスタマイズする必要があります。

1. 画像のサイズ指定

デフォルトでは、Dawnの画像バナーは適切な高さがCSSで調整されます。
サイズを指定する場合、CSSで設定していただければと思います。

CSSで指定する base.css などのスタイルシートに以下を追加します。

.custom-banner img {
width: 800px;
height: auto;
max-width: 100%;
}

以上のパターンでは、image-banner.liquid の <img> タグに class="custom-banner" を追加して調整しております。

 

2. 画像にリンクを設定

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 にリンクの設定を追加

ファイルの最後にある schema の settings に以下を追加してください。これにより、管理画面のセクション設定で「画像のリンク」を追加できます。

 

{
  "type": "url",
  "id": "image_link",
  "label": "画像のリンク"
}

 

 

 

 

一般例になるのでファイル内の詳細のクラスや設置箇所に関してはご確認ください。

参考程度にしていただけますと幸いです。

 

なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

株式会社フルバランス

 
株式会社フルバランス
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『つくる人、売る人の成長と成功を最大化する。』 株式会社フルバランス
skt
観光客
5 0 1

画像バナーサイズ設定が出来ません。

リンクはほかの記事を参考に行いましたので

画像バナーサイズ設定をもう少し詳細に教えていただきたいです