現在Colorblockというテーマを使用しています。
マルチカラムの画像にリンクを付けているのですが、リンクラベルを付けずに画像に直接リンクを付ける事はできないでしょうか？リンクラベルを付けると画像どうしの余白ができてしまい気になります。
コードを編集する方法や良いアプリなどがありましたら教えてください。
こちらが現在のショップの状態です↓
Topic summary
Colorblockテーマを使用中のユーザーが、マルチカラムの画像に直接リンクを付ける方法を質問しました。リンクラベルを付けると画像間に余白ができてしまうことが問題でした。
解決方法:
multicolumn.liquidファイルを編集- 特定の位置に条件分岐コードを追加し、リンクラベルが空白でリンクURLが設定されている場合に、画像全体を
<a>タグで囲む仕様に変更 - 画像間の余白を削除するため、カスタムCSSも追加
- CSSでは列数に応じた幅の調整（デスクトップ3列想定）と、余白・マージンをゼロに設定
質問者は解決策に満足し、理想的なデザインが実現できたと感謝の意を表明しました。画像を含む詳細な手順が提供されており、技術的な問題は解決済みです。
2 Likes
ご質問いただいているマルチカラムの画像にリンクを付ける件ですが、liquidファイルを編集する事で調整は可能です。
また、テキストを無くし画像にリンクを貼った場合でも、デフォルトでは画像間の余白が残ってしまいますので、余白も無くした形で回答させていただきます。
設定方法
**1.**管理画面 > オンラインストア『・・・』をクリックし、『コードを編集』を選択。
**2.**左上の検索窓に『multicolumn.liquid』と検索し絞り込まれたファイルを開く。
**3.**ファイル内で『
』を検索し、その上の行に下記コードを追記。
{%- if block.settings.link_label == blank and block.settings.link != blank -%}
{%- endif -%}
**4.**ファイル内で『』を検索し、その下の行に下記コードを追記。
{%- if block.settings.link_label == blank and block.settings.link != blank -%}
{%- 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が設定されている場合は、画像間の余白は詰まったままとなります。
ご参考まで。
(キュー小坂)
4 Likes
ご丁寧に説明頂きありがとうございます。
理想的なデザインになりました！
本当に助かりました、ありがとうございます。