はじめに

前回の記事でDawnのスライドショーにスマホ用画像を追加する方法をご紹介しましたが、このスライドショーは実はさらに色々なカスタマイズが可能です。
Dawnのスライドショーはビジュアルで訴求を行うことができる便利なセクションですが、一方で、画像にボタンを追加しないとリンクが設定できないという仕様に悩まされている方も多いのではないでしょうか。
実際、「スライドショーの画像全体をクリックできるようにしたい」「ボタンを使わずに、もっとシンプルでスタイリッシュに見せたい」といったご相談をいただくことが度々あります。

そこで今回は、たった2ステップでボタンを使わずスライドショーの画像全体にリンクを設定する方法をご紹介いたします。
ボタンの配置やデザインを考慮する必要がなくなり、さらに直観的で洗練されたデザインを作ることができますので、ぜひ取り入れていただきたいカスタマイズです！

実装方法

1. 「slideshow.liquid」にリンク適用のためのコードを追加

「slideshow.liquid」の114行目あたりに下記コードを追加し、ボタンリンクとして設定したリンクがスライド全体に適用されるようにします。（画像はクリックで拡大します）

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

また、上記aタグで囲ったdivの閉じタグの直後に下記コードを追加します。

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

2. スタイルを調整

スライド全体にリンクを適用させたことで、「見出し」「小見出し」を使用した場合テキストに下線が引かれてしまうため、「slideshow.liquid」内または別ファイルに下記CSSを追加してスタイルを調整します。

.slideshow__slide {
  text-decoration: none;
}

以上のステップで、テーマエディタにてボタンリンクを設定した際にスライドの画像全体がクリックできるようになります。
なお、この方法はボタンのラベルを設定しない場合に限りますので、用途に合わせて使い分けてみてくださいね。

まとめ

いかがでしたが？
「画像＝リンク」という直観的な動きは、今や多くのユーザーにとって当たり前の感覚です。
ちょっとした工夫でサイト全体の印象や操作性が大きく変わり、ブランドイメージの強化にも繋げることができます。
ぜひこのカスタマイズを取り入れて、よりスマートで使いやすいサイトを目指していきましょう！