# マルチカラムで画像リンクを設定したい **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [January 26, 2025, 10:34am UTC](https://community.shopify.com/t/topic/389840 "2025-01-26T10:34:41Z")\ **Posts on this page:** 4\ **Page:** 1 ## AI-generated summary Shopifyの「Dawn 15.2.0」テーマで、マルチカラムセクションに登録した画像にリンクを設定する方法についての質問と解決策。 **解決方法:** - `multicolumn.liquid`テンプレートファイルを編集することで対応可能 - 管理画面からコードエディタにアクセスし、該当ファイルを検索 - 79行目から120行目のコードを、画像タグを``タグで囲む形に変更 - 変更後、マルチカラムの「リンク」フィールドに入力したURLが画像に適用される **注意点:** - リンクラベルにテキストを入力すると、元々の機能によりテキストリンクも表示される - コード例とスクリーンショットが提供されている **結果:** 質問者および他のユーザーが無事にリンク設定に成功し、解決済み。
**Author:** ![Anonymous\_f5d68268123f260c27d58ef0efdb5916](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@Anonymous\_f5d68268123f260c27d58ef0efdb5916](https://community.shopify.com/u/Anonymous_f5d68268123f260c27d58ef0efdb5916)\ **Post date:** [January 26, 2025, 10:34am UTC](https://community.shopify.com/t/topic/389840/1 "2025-01-26T10:34:41Z")
dawn 15.2.0 で画像にリンクを設定したいです。 ---
**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\ **Post date:** [January 30, 2025, 9:11am UTC](https://community.shopify.com/t/topic/389840/2 "2025-01-30T09:11:27Z")
@Anonymous_f5d68268123f260c27d58ef0efdb5916 様 dawn 15.2.0のマルチカラムで登録した画像にリンクを設定する件ですが、 マルチカラムのテンプレート「multicolumn.liquid」を編集することで対応が可能かと思います。 multicolumn.liquidは下記手順となります。 １．管理画面 \> オンラインストア \> テーマ \>「・・・」 \> コードを編集をクリック ２．検索画面に「multicolumn.liquid」を入力 ３．デフォルト状態の79行目から120行目の下記コード ```markup {%- if block.settings.image != blank -%} {% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %} {% assign spaced_image = true %} {% endif %} {%- liquid assign number_of_columns = section.settings.columns_desktop assign number_of_columns_mobile = section.settings.columns_mobile assign grid_space_desktop = number_of_columns | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px' assign grid_space_tablet = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px' assign grid_space_mobile = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | divided_by: 2 | plus: 30 | append: 'px' if section.settings.image_width == 'half' assign image_width = 0.5 elsif section.settings.image_width == 'third' assign image_width = 0.33 else assign image_width = 1 endif -%} {% capture sizes %} (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}), (min-width: 990px) calc((100vw - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}), (min-width: 750px) calc((100vw - {{ grid_space_tablet }}) * {{ image_width }} / {{ number_of_columns_mobile }}), calc((100vw - {{ grid_space_mobile }}) * {{ image_width }} / {{ number_of_columns_mobile }}) {% endcapture %} {{ block.settings.image | image_url: width: 3200 | image_tag: widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200', sizes: sizes, class: 'multicolumn-card__image' }} {%- endif -%} ``` ４．下記コードに変更 ```markup {%- if block.settings.link != blank -%} {%- endif -%} {%- if block.settings.image != blank -%} {% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %} {% assign spaced_image = true %} {% endif %} {%- liquid assign number_of_columns = section.settings.columns_desktop assign number_of_columns_mobile = section.settings.columns_mobile assign grid_space_desktop = number_of_columns | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px' assign grid_space_tablet = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px' assign grid_space_mobile = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | divided_by: 2 | plus: 30 | append: 'px' if section.settings.image_width == 'half' assign image_width = 0.5 elsif section.settings.image_width == 'third' assign image_width = 0.33 else assign image_width = 1 endif -%} {% capture sizes %} (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}), (min-width: 990px) calc((100vw - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}), (min-width: 750px) calc((100vw - {{ grid_space_tablet }}) * {{ image_width }} / {{ number_of_columns_mobile }}), calc((100vw - {{ grid_space_mobile }}) * {{ image_width }} / {{ number_of_columns_mobile }}) {% endcapture %} {{ block.settings.image | image_url: width: 3200 | image_tag: widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200', sizes: sizes, class: 'multicolumn-card__image' }} {%- endif -%} {%- if block.settings.link != blank -%} {%- endif -%} ``` ５．保存ボタンをクリック 以上で、マルチカラムの列で追加した画像に、リンクで入力したURLを設定されます。 ![Qcoltd_0-1738228093374.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/5/9/5952cb3539f9e7b17d99cb2c60e6f1f6094135ab.jpeg) また、リンクラベルにテキストを入力すると元々の機能が残っておりますので、テキストリンクも表示されます。 ご参考まで。 （キュー小坂） ---
**Author:** ![Anonymous\_f5d68268123f260c27d58ef0efdb5916](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@Anonymous\_f5d68268123f260c27d58ef0efdb5916](https://community.shopify.com/u/Anonymous_f5d68268123f260c27d58ef0efdb5916)\ **Post date:** [January 30, 2025, 11:49am UTC](https://community.shopify.com/t/topic/389840/3 "2025-01-30T11:49:20Z")
キュー小坂 様 ご丁寧にご教授いただきありがとうございました。 無事にリンクを付けることができました。 ありがとうございました。 ---
**Author:** ![Eririeri](https://avatars.discourse-cdn.com/v4/letter/e/ecc23a/32.png) [@Eririeri](https://community.shopify.com/u/Eririeri)\ **Post date:** [March 25, 2025, 1:13am UTC](https://community.shopify.com/t/topic/389840/4 "2025-03-25T01:13:27Z")
ありがとうございます！できました！！！わかりやすい説明ありがとうございます。これからもよろしくお願いいたします。