マルチカラムセクションの画像にリンクをつけたいです。
簡単な方法などあれば教えていただきたいです。
テーマはDawnです。
Topic summary
マルチカラムセクションの画像にリンクを追加する方法についての質問と回答。
質問内容:
- マルチカラムセクションの画像にリンクを設定したい
解決方法:
multicolumn.liquidファイルを編集する必要がある- コードを編集 > セクション > multicolumn.liquidファイルを開く
- 画像を囲む
<div>要素を<a>タグに置き換える - リンクが設定されている場合は
<a>タグで囲み、設定されていない場合は<div>で囲むように条件分岐を追加
技術的なポイント:
block.settings.linkの有無で条件分岐を行う- 既存のコード構造を維持しながら、画像部分のみをリンク化できる
回答者(Takase_R)が具体的なコード例を提示し、実装方法を詳しく説明している。
お世話になっております。 Takaseと申します。
マルチカラムセクションの画像にリンクをつける方法ですが、
コードを編集 > セクション > multicolumn.liquidファイルを開いて
- {%- if block.settings.image != blank -%}
{% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %}
{% assign spaced_image = true %}
{% endif %}
{%- endif -%}
{%- if block.settings.title != blank -%}
### {{ block.settings.title | escape }}
{%- endif -%}
{%- if block.settings.text != blank -%}
{{ block.settings.text }}
{%- endif -%}
{%- if block.settings.link_label != blank -%}
{{ block.settings.link_label | escape }} {% render 'icon-arrow' %}
{%- endif -%}
とある箇所を
- {%- if block.settings.image != blank -%}
{% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %}
{% assign spaced_image = true %}
{% endif %}
{%- if block.settings.link != blank -%}
{%- else -%}
{%- endif -%}
{%- if block.settings.link != blank -%}
{%- else -%}
{%- endif -%}
{%- endif -%}
{%- if block.settings.title != blank -%}
### {{ block.settings.title | escape }}
{%- endif -%}
{%- if block.settings.text != blank -%}
{{ block.settings.text }}
{%- endif -%}
{%- if block.settings.link_label != blank -%}
{{ block.settings.link_label | escape }} {% render 'icon-arrow' %}
{%- endif -%}
に差し替えることで可能になります。
具体的な変更内容としては、
画像を囲っているdiv要素の
を、リンクが設定してある場合はdivではなくaで囲うように変更しています。
※Dawnのバージョンは11.0.0の想定です