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

Topic summary

ユーザーがDawnテーマのスライドショーで、特定の画像のみ全体にリンクを貼る方法を質問しています。

提案された解決方法:

  1. 前提条件:

    • DawnテーマのSlideshow.liquidが未編集であること
    • モバイルレイアウトで「モバイルで画像の下にコンテンツを表示する」のチェックを外す
  2. テンプレート修正:

    • Slideshow.liquidの121〜129行目付近と185〜197行目付近に特定のコードを追加
    • ボタンリンクが設定されている画像のみ全体にリンクが貼られ、設定されていない画像はリンクなしになる
  3. CSS追加:

    • カスタムCSSに.slider__link { height: 100%; }を追加

注意点: ボタンのラベルは未入力にする必要があります。画像付きの詳細な手順が提供されています。

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.

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

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

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

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

@mira0

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

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

前提条件

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

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

テンプレート修正方法

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

2.『Slideshow.liquid』の下記コード(121行目〜129行目あたり)の下に


下記コードを追加

{%- if block.settings.link != blank -%}{%- endif -%}

3.『Slideshow.liquid』の下記コード(185行目〜197行目あたり)の上に


    {%- endfor -%}
  

  {%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}
    
      

下記コードを追加

```markup
{%- if block.settings.link != blank -%}{%- endif -%}

css追加方法

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

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

.slider__link {
  height: 100%;
}

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

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

ご参考まで。

(キュー小坂)