以下の手順をお試しください。
なお、コードを編集するので意図せず表記が崩れる等のエラーが発生する場合があります。事前にバックアップを取るなどのリスク対策が必要です。
1.管理画面にログインし、[オンラインストア] > [テーマ] に移動します。
2.「カスタマイズ」の隣の[…] から[コードを編集] をクリックします。
3.「セクション」フォルダ内のimage-banner.liquidファイルを選択します。
4.「image-banner-section」という独自のクラス名を追加しておきます(この後の工程でスタイルをあてるためです)。また、{% schema %}以下にリンク設定を追加します。これにより、Shopify管理画面からリンクURLを設定できるようになります。
{% 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 %}
5.画像にリンクを貼るためのスタイルを追記します。
{%- 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 %}
<style>
.image-banner-section {
position: relative;
}
#shopify-section-header {
z-index: 4 !important;
}
.image-banner-section a.custom-link {
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 3;
}
</style>
{% endif %}
//ここまで追記
{%- liquid
assign full_width = '100vw'
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
6.「最初の画像」にリンクが挿入されるように、aタグを追記します。
{%- if section.settings.image != blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
<a class="custom-link" href="{{ section.settings.link-image1 }}"></a>//この行を追記
{%- liquid
assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
if section.settings.image_2 != blank
7.「2番目の画像」にリンクが挿入されるように、aタグを追記します。
{%- if section.settings.image_2 != blank -%}
<div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
<a class="custom-link" href="{{ section.settings.link-image2 }}"></a>//この行を追記
{%- liquid
assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
if section.settings.image != blank
8.最後に「保存」をクリックして完了です。