Dawnのスライドショー画像にリンクを飛ばしたい

[kazuki2]

お世話になります。

Dawnのテーマを使用し、ショップを構築中です。

そこで、表題の件、画像にリンクを付けたいのですが、ボタンはつけずに、

画像をクリック(タップ)することでリンクに飛ばす方法はありますでしょうか？

下記URL2案件確認しましたがわからず、、、、

アプリは使用せずコードのみで導入できればと考えています。

お手数ですが、ご教示いただけますと幸いです。

[Qcoltd · Accepted solution]

ご質問いただいているスライドショーの画像にリンクを設定することは可能です。

リンクを設定するには、管理画面の『コードを編集』よりslideshow.liquidを変更します。

添付ファイルの水色字部分が追加箇所となります。

84行目追加コード

{% if block.settings.link %}<a href="{{ block.settings.link }}" class="slideshow__slide grid__item">{% endif %}

124行目追加コード

{% if block.settings.link %}</a>{% endif %}

画像に設定するリンク先は、各スライドの『ボタンのリンク』に設定されたリンクを設定しています。

『ボタンのリンク』が設定されていない場合は、画像にリンクは設定されません。

また、画像をクリックできるように改修したことにより、『見出し』『小見出し』を使用した際テキストに下線が引かれてしまいますので、添付画像のようにスライドショーを選択し、カスタムCSSエリアへ下記CSSを追加することで下線を消す事が可能です。

追加CSS

.slideshow__slide {
  text-decoration: none;
}

ご参考まで。

(キュー小坂)

[ucch111]

キュー 小坂様

上記でいただいた解決策を適用したところ、

スライドショーが自動で動かなくなってしまいました。

解決する方法はございますでしょうか。

[Qcoltd]

@ucch111様

ご連絡いただきました、スライドショーを自動で動かす場合ですが、

ご説明させて頂いていた画像をもとに追記させていただきます。

下記コードを92行目と93行目の間に

{% if block.settings.link %}<a href="{{ block.settings.link }}" class="slideshow__slide grid__item">{% endif %}

 下記コードを 122行目と123行目の</div>と</div>の間に

{% if block.settings.link %}</a>{% endif %}

追加箇所を変更いただければ自動で動くようになるかと思われます。

テーマのバージョンにより追加箇所が変更となっている場合がありますので、その際はご了承ください。

カスタムCSSに追加いただくCSSは下記にご変更ください。

.slideshow__text-wrapper {
  max-width: 100%;
}
.slideshow__slide {
  text-decoration: none;
}

ご参考まで。

(キュー小坂)

[ucch111]

解決できました！誠にありがとうございます。

[GM14]

解決済のためご返信不要となります。