FROM CACHE - jp_header
解決済

テーマDAWNのスライドショーの各画像のテキストボックスとボタンを削除して画像全体にリンクを張りたい

Test-1-pta
Shopify Partner
7 0 0

slideshow.liquidを編集してテーマDAWNのスライドショーの各画像のテキストボックスとボタンを削除して画像全体にリンクを張りたいのですがなかなかうまくいきません。

 

下記のページも試しましたがうまくいきません。

どうやればできますでしょうか?

 

https://community.shopify.com/1111 

https://community.shopify.com/22222 

1 件の受理された解決策

Qcoltd
Shopify Partner
1015 412 388

成功

ご質問いただいているスライドショーの画像にリンクを設定し、ボックスとボタンやテキストを消す件ですが、liquidファイルのコード修正および、スライドショーの設定で対応することが可能です。

 

調整内容

1.管理画面の『コードを編集』よりslideshow.liquidを開きます。

 

2.122行目に下記コードを追加してください。(添付画像参照)

{% if block.settings.link %}<a href="{{ block.settings.link }}" class="slider-box"></a>{% endif %}

Qcoltd_0-1679914759943.png

 

3.管理画面のカスタマイズよりスライドショーを選択してください。

Qcoltd_1-1679914759868.png

 

4.スライドショーのカスタムCSSに下記を追加してください。

.slider-box {
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  z-index: 2;
}

Qcoltd_2-1679914759870.png

 

5.スライドショーの各スライドを選択し、『見出し』『小見出し』『ボタンのラベル』に入力されているテキストを削除、『デスクトップ上にコンテナを表示』のチェックボックスを外してください。

Qcoltd_3-1679914760020.png

 

6.画像のリンクはスライドショーの各スライドを選択し、『ボタンのリンク』に設定したものが表示されます。

 『ボタンのリンク』が設定されてない場合は、スライドショーの画像にリンクは設定されません。

 

ご参考まで。

(キュー小坂)

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

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1015 412 388

成功

ご質問いただいているスライドショーの画像にリンクを設定し、ボックスとボタンやテキストを消す件ですが、liquidファイルのコード修正および、スライドショーの設定で対応することが可能です。

 

調整内容

1.管理画面の『コードを編集』よりslideshow.liquidを開きます。

 

2.122行目に下記コードを追加してください。(添付画像参照)

{% if block.settings.link %}<a href="{{ block.settings.link }}" class="slider-box"></a>{% endif %}

Qcoltd_0-1679914759943.png

 

3.管理画面のカスタマイズよりスライドショーを選択してください。

Qcoltd_1-1679914759868.png

 

4.スライドショーのカスタムCSSに下記を追加してください。

.slider-box {
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  z-index: 2;
}

Qcoltd_2-1679914759870.png

 

5.スライドショーの各スライドを選択し、『見出し』『小見出し』『ボタンのラベル』に入力されているテキストを削除、『デスクトップ上にコンテナを表示』のチェックボックスを外してください。

Qcoltd_3-1679914760020.png

 

6.画像のリンクはスライドショーの各スライドを選択し、『ボタンのリンク』に設定したものが表示されます。

 『ボタンのリンク』が設定されてない場合は、スライドショーの画像にリンクは設定されません。

 

ご参考まで。

(キュー小坂)

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

ご回答ありがとうございます。成功しました。