FROM CACHE - jp_header
解決済

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

Bacchus
観光客
4 0 3

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

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

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

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

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

1 件の受理された解決策

Qcoltd
Shopify Partner
1051 429 417

成功

ご質問いただいているマルチカラムの画像にリンクを付ける件ですが、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 -%}

Qcoltd_0-1680779093942.png

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

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

Qcoltd_1-1680779093569.png

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

Qcoltd_2-1680779093758.png

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

Qcoltd_3-1680779093608.png

.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が設定されている場合は、画像間の余白は詰まったままとなります。

 

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1051 429 417

成功

ご質問いただいているマルチカラムの画像にリンクを付ける件ですが、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 -%}

Qcoltd_0-1680779093942.png

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

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

Qcoltd_1-1680779093569.png

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

Qcoltd_2-1680779093758.png

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

Qcoltd_3-1680779093608.png

.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が設定されている場合は、画像間の余白は詰まったままとなります。

 

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
Bacchus
観光客
4 0 3

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

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

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