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

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

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

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

1 Like
2

質問拝見しました。

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 の タグに class=“custom-banner” を追加して調整しております。

### 2. 画像にリンクを設定

sections/image-banner.liquid を開き、画像を タグで囲むように変更します。

下記例になります。

{% 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": "画像のリンク"
}

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

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

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

株式会社フルバランス

3

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

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

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