マルチカラムの画像に直接リンクを付けたい

[Bacchus]

現在Colorblockというテーマを使用しています。

マルチカラムの画像にリンクを付けているのですが、リンクラベルを付けずに画像に直接リンクを付ける事はできないでしょうか？リンクラベルを付けると画像どうしの余白ができてしまい気になります。

コードを編集する方法や良いアプリなどがありましたら教えてください。

こちらが現在のショップの状態です↓

Bacchus 地酒とクラフトビールの専門店 (bacchus-onlineshop.com)

[Qcoltd · Accepted solution]

ご質問いただいているマルチカラムの画像にリンクを付ける件ですが、liquidファイルを編集する事で調整は可能です。

また、テキストを無くし画像にリンクを貼った場合でも、デフォルトでは画像間の余白が残ってしまいますので、余白も無くした形で回答させていただきます。

設定方法

1.管理画面 > オンラインストア『・・・』をクリックし、『コードを編集』を選択。

2.左上の検索窓に『multicolumn.liquid』と検索し絞り込まれたファイルを開く。

3.ファイル内で『<div class="multicolumn-card content-container">』を検索し、その上の行に下記コードを追記。

{%- if block.settings.link_label == blank and block.settings.link != blank -%}
  <a href="{{ block.settings.link }}">
{%- endif -%}

4.ファイル内で『</li>』を検索し、その下の行に下記コードを追記。

{%- if block.settings.link_label == blank and block.settings.link != blank -%}
  </a>
{%- endif -%}

5.管理画面 > オンラインストア > カスタマイズ > ホームページのマルチカラムを選択

6.カスタムCSSに下記CSSを追加

.grid:last-child {
  row-gap: 0;
  column-gap: 0;
}
.background-none .multicolumn-card__image-wrapper {
  margin: 0;
}
@media screen and (min-width: 990px) {
  .grid--3-col-desktop .grid__item {
    width: calc(100% / 3);
    max-width: calc(100% / 3);
  }
}
@media screen and (max-width: 989px) {
  .grid--2-col-tablet-down .grid__item {
    width: calc(100% / 2);
    max-width: calc(100% / 2);
  }
}

デスクトップの列数は3で想定していますが、3以外を設定されている場合は、下記の『3』となっている数字3箇所を列数の数字に変更してください。

  .grid--3-col-desktop .grid__item {

    width: calc(100% / 3);

    max-width: calc(100% / 3);

  }

以上で、マルチカラムで画像とリンクのURLのみ設定した場合、画像にリンクが設定されます。

リンクラベルにテキストが入力されている場合は、画像にリンクは設定されずデフォルトの設定で表示されますが、カスタムCSSが設定されている場合は、画像間の余白は詰まったままとなります。

ご参考まで。

(キュー小坂)

[Bacchus]

ご丁寧に説明頂きありがとうございます。

理想的なデザインになりました！

本当に助かりました、ありがとうございます。