スライドショーの画像全体にリンクを貼りたい

[mira0]

スライドショーの画像全体にリンクを貼りたいです。

しかし、リンクを指定したい画像が、特定の1枚のみです。

特定の画像のみ、全体にリンクを持たせる方法を教えていただきたいです。

テーマはDawnを使用しています。

[Qcoltd · Accepted solution]

@mira0様

ご質問いただいている、スライドショーの画像全体にリンクを貼りたい件ですが、

画像全体にリンクを貼りたいもの以外は、ボタンのリンクもない場合は、下記の方法で画像全体にリンクを貼ることが可能です。

前提条件

１．Dawnテーマの『Slideshow.liquid』に変更が加えられていない。

２．スライドショーの設定、モバイルのレイアウトで『モバイルで画像の下にコンテンツを表示する』のチェックは外す

テンプレート修正方法

１．Shopify管理画面の『コード編集』より『Slideshow.liquid』を開きます。

２．『Slideshow.liquid』の下記コード（121行目〜129行目あたり）の下に

      <div
        class="slideshow__slide grid__item grid--1-col slider__slide"
        id="Slide-{{ section.id }}-{{ forloop.index }}"
        {{ block.shopify_attributes }}
        role="group"
        aria-roledescription="{{ 'sections.slideshow.slide' | t }}"
        aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
        tabindex="-1"
      >

下記コードを追加

{%- if block.settings.link != blank -%}<a href="{{ block.settings.link }}" class="slider__link">{%- endif -%}

３．『Slideshow.liquid』の下記コード（185行目〜197行目あたり）の上に

      </div>
    {%- endfor -%}
  </div>

  {%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}
    <div class="slideshow__controls slider-buttons no-js-hidden{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}">
      <button
        type="button"
        class="slider-button slider-button--prev"
        name="previous"
        aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
        aria-controls="Slider-{{ section.id }}"
      >

下記コードを追加

{%- if block.settings.link != blank -%}</a>{%- endif -%}

css追加方法

１．管理画面の『カスタマイズ』よりサイドメニューのスライドショーをクリック

２．カスタムCSSに下記CSSを追加し、保存ボタンをクリック

.slider__link {
  height: 100%;
}

以上で、ボタンのリンク部分にリンクを設定した画像のみ画像全体にリンクが貼られ、ボタンのリンク部分にリンクが設定されていない画像はリンクは貼られません。

※画像全体にリンクを貼る場合は、ボタンのラベルは未入力にしてください。

ご参考まで。

（キュー小坂）