Dawn 画像バナー リンク設定

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

Topic summary

Dawnテーマの画像バナーセクションで、画像自体にURLリンクを設定する方法についての質問と解決策。

実現方法：

  • 画像バナーの「ボタンのリンク」（1番目）に設定したURLが画像のリンク先として使用される
  • ボタンのリンクが未設定の場合、画像にリンクは付与されない
  • 2番目のボタンのリンクは無効化される

実装手順：

  1. 管理画面の「コードを編集」からimage-banner.liquidを開く
  2. 指定箇所に特定のコードスニペットを追加（div id="Banner-の上など）
  3. 既存コードを新しいコードに置き換え
  4. CSSを追加してリンクの装飾を調整

質問者は想定していた仕様に変更できたことを確認し、解決済み。コードの具体的な記述が提供されており、特集コレクションページへの遷移を想定した実装と思われる。

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Dawnテーマで作成しており画像バナーセクションで設定した画像自体にURLを設定したいのですが可能でしょうか？

画像をタップすると指定したページ（特集コレクションを予定）に遷移する仕様にしたいと考えております。

詳細をお伺いしたくご教示頂けますと幸いです。

何卒、よろしくお願い致します。

1 Like
2

ご質問いただいている画像バナーの画像にリンクを設定することは可能です。

リンクの設定については、元々画像バナーで用意されている、最初のボタンのリンク先を使用します。

『ボタンのリンク』が設定されていない場合は、画像にリンクは設定されません。

2番目のボタンのリンクについては入力しても下記の改修で無効となっています。

以下設定ファイルの変更方法となります。

**1．**管理画面の『コードを編集』よりimage-banner.liquidを開きます。

2．『div id="Banner-』の上の行に下記コードを追加してください。

{%- for block in section.blocks -%}{%- if block.settings.button_link_1 != blank -%}{%- endif -%}{%- endfor -%}

**3．**下記コードを

{%- if block.settings.button_label_1 != blank -%}
  
    {{- block.settings.button_label_1 | escape -}}
  
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
  
    {{- block.settings.button_label_2 | escape -}}
  
{%- endif -%}

下記コードに変更してください。

{%- if block.settings.button_label_1 != blank -%}
  
    {{- block.settings.button_label_1 | escape -}}
  
{%- endif -%}

**4．**ファイル内にある最後の『』の後ろに下記コードを追加してください。

{%- for block in section.blocks -%}{%- if block.settings.button_link_1 != blank -%}{%- endif -%}{%- endfor -%}

5．『#Banner-{{ section.id }}::after {』の上の行に下記CSSを追加してください。

.banner-link {text-decoration:none}

ご参考まで。

(キュー小坂)

2 Likes
3

迅速なご確認ご回答ありがとうございます！

想定していた仕様に変更できました！