Liquid、JavaScriptなどに関する質問
現在Colorblockというテーマを使用しています。
マルチカラムの画像にリンクを付けているのですが、リンクラベルを付けずに画像に直接リンクを付ける事はできないでしょうか?リンクラベルを付けると画像どうしの余白ができてしまい気になります。
コードを編集する方法や良いアプリなどがありましたら教えてください。
こちらが現在のショップの状態です↓
Bacchus 地酒とクラフトビールの専門店 (bacchus-onlineshop.com)
解決済! ベストソリューションを見る。
成功
ご質問いただいているマルチカラムの画像にリンクを付ける件ですが、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が設定されている場合は、画像間の余白は詰まったままとなります。
ご参考まで。
(キュー小坂)
成功
ご質問いただいているマルチカラムの画像にリンクを付ける件ですが、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が設定されている場合は、画像間の余白は詰まったままとなります。
ご参考まで。
(キュー小坂)
ご丁寧に説明頂きありがとうございます。
理想的なデザインになりました!
本当に助かりました、ありがとうございます。
いつもShopifyをご利用いただき、ありがとうございます。 Shopifyは、皆様の日本語での利用体験の向上に努めております。さらなる改善のために皆様のご意見をお寄せい...
By JasonH May 9, 2025Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025