# 画像バナーにリンクを貼る方法について。

**URL:** <https://community.shopify.com/t/topic/335174>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [June 28, 2024, 9:24am UTC](https://community.shopify.com/t/topic/335174 "2024-06-28T09:24:17Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

画像バナーにコレクションページへのリンクを設定する方法についての質問と解決策。

**質問内容:**
Dawnテーマで4枚の画像バナーを設置し、それぞれにShopifyのコレクションページへのリンクを貼りたい。スライドショーではなく、静止画像での実装を希望。

**提案された解決方法:**

1. **コード編集による対応:**
   - `image-banner.liquid`ファイルを編集
   - `{% schema %}`にURL設定項目を追加し、管理画面からリンクURLを設定可能に
   - aタグとCSSスタイルを追加して画像にリンクを実装
   - コードスニペットが詳細に提供されている
   - 事前のバックアップが推奨されている

2. **アプリ利用による対応:**
   - 「シンプル画像バナー」アプリの紹介
   - ノーコードで複数のリンク付き画像バナーを簡単に設置可能

**状況:**
質問者は回答に感謝し、解決に向けて取り組んでいる様子。技術的な解決策とノーコードソリューションの両方が提示された。

<div class="post-metadata">

**Author:** ![matsuri89](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@matsuri89](https://community.shopify.com/u/matsuri89)\
**Post date:** [June 28, 2024, 9:24am UTC](https://community.shopify.com/t/topic/335174/1 "2024-06-28T09:24:17Z")

</div>

お世話になります。  
現在、Dawnのテーマで海外向けのショップ開設をしています。  
画像バナーを４枚設置し、それぞれの画像にShopifyのCollectionのリンクを設置したいです。  
画像についてはスライドショーではありません。

こちら対応方法をご存知の方、教えて頂けますと幸いです。  
宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![Anonymous\_5168086324d6fa4637c896de39bb248c](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_5168086324d6fa4637c896de39bb248c/32/28647_2.png) [@Anonymous\_5168086324d6fa4637c896de39bb248c](https://community.shopify.com/u/Anonymous_5168086324d6fa4637c896de39bb248c)\
**Post date:** [July 3, 2024, 1:01am UTC](https://community.shopify.com/t/topic/335174/2 "2024-07-03T01:01:27Z")

</div>

以下の手順をお試しください。

なお、コードを編集するので意図せず表記が崩れる等のエラーが発生する場合があります。事前にバックアップを取るなどのリスク対策が必要です。

1.管理画面にログインし、[オンラインストア] \> [テーマ] に移動します。

2.「カスタマイズ」の隣の[…] から[コードを編集] をクリックします。

3.「セクション」フォルダ内のimage-banner.liquidファイルを選択します。

1. 「image-banner-section」という独自のクラス名を追加しておきます（この後の工程でスタイルをあてるためです）。また、{% schema %}以下にリンク設定を追加します。これにより、Shopify管理画面からリンクURLを設定できるようになります。

```markup
{% schema %}
{
  "name": "t:sections.image-banner.name",
  "tag": "section",
  "class": "section image-banner-section",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-banner.settings.image.label"
    },
    {
      "type": "url",
      "id": "link-image1",
      "label": "最初の画像のリンク先"
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "t:sections.image-banner.settings.image_2.label"
    },
    {
      "type": "url",
      "id": "link-image2",
      "label": "2番目の画像のリンク先"
    },
    {
      "type": "range",
      "id": "image_overlay_opacity",
      "min": 0,
      "max": 100,
      "step": 10,
      "unit": "%",
      "label": "t:sections.image-banner.settings.image_overlay_opacity.label",
      "default": 0
    },
    // 他の設定項目...
  ],
  "presets": [
    {
      "name": "t:sections.image-banner.presets.name",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "buttons"
        }
      ]
    }
  ]
}
{% endschema %}

```

1. 画像にリンクを貼るためのスタイルを追記します。

```markup
{%- style -%}
  #Banner-{{ section.id }}::after {
    opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
  }
{%- endstyle -%}

//ここから追記
{% if section.settings.link-image1 != blank or section.settings.link-image2 != blank %}

{% endif %}
//ここまで追記

{%- liquid
  assign full_width = '100vw'
  assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'

```

1. 「最初の画像」にリンクが挿入されるように、aタグを追記します。

```markup
{%- if section.settings.image != blank -%}
    

     //この行を追記

      {%- liquid
        assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
        if section.settings.image_2 != blank

```

1. 「2番目の画像」にリンクが挿入されるように、aタグを追記します。

```markup
{%- if section.settings.image_2 != blank -%}
    

    //この行を追記

      {%- liquid
        assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
        if section.settings.image != blank

```

1. 最後に「保存」をクリックして完了です。

---

<div class="post-metadata">

**Author:** ![matsuri89](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@matsuri89](https://community.shopify.com/u/matsuri89)\
**Post date:** [July 10, 2024, 12:38pm UTC](https://community.shopify.com/t/topic/335174/3 "2024-07-10T12:38:11Z")

</div>

遅くなりまして申し訳ありません。

詳細をご丁寧にお答えいただきありがとうございます。

頑張ってみます。

---

<div class="post-metadata">

**Author:** ![KazuhiroOgi](https://avatars.discourse-cdn.com/v4/letter/k/a183cd/32.png) [@KazuhiroOgi](https://community.shopify.com/u/KazuhiroOgi)\
**Post date:** [August 8, 2024, 10:47am UTC](https://community.shopify.com/t/topic/335174/4 "2024-08-08T10:47:02Z")

</div>

‎08-05-2024 09:12 PM

はじめまして

株式会社 UnReact の荻と申します。

既に解決済みではございますが、今後このスレッドをご覧になる方々に向けて、

弊社のアプリ「[シンプル画像バナー｜お手軽広告バナーアプリ](https://apps.shopify.com/sa-013-ur-banner-app?locale=ja)」も解決策の一つとしてご紹介させていただきます。

 ![KazuhiroOgi_0-1723113560167.webp](https://canada1.discourse-cdn.com/shopifyforum/original/4X/4/a/b/4abc02fda393f16b644b530f46c6f77547693305.webp)

こちらのアプリを使用すれば、リンク付きの画像バナーを設定することができます。

このアプリでバナーを複数設置し、それぞれにコレクションのリンクを設定することで、

ノーコードで簡単にご要望通りのストアを実現できます。

 ![KazuhiroOgi_1-1723113560192.webp](https://canada1.discourse-cdn.com/shopifyforum/original/3X/c/5/c5102cbb433de8e3a3fdd044fbd5fc507bde0a73.webp)

下記、参考情報です。

[シンプル画像バナー｜お手軽広告バナーアプリ](https://apps.shopify.com/sa-013-ur-banner-app?locale=ja)

[Shopifyに画像バナーを追加できるアプリについて徹底解説｜ご利用ガイド](https://unreact.jp/shopify-apps/sa-013-ur-banner-app/guide)

その他にも 46 個の Shopify アプリを開発しているので、ストア運用の際に参考にして頂ければ幸いです。

[参考アプリ一覧](https://apps.shopify.com/partners/unreact5?locale=ja&page=1)