ゴールデンウィーク真っ只中、皆さんはどこへ行かれていますか？
このブログを期間中に見ているということは、あなた…
ということで、今回はDawnがVer9.0.0の最新バージョンにアップグレードされて、大きく中身が変わりましたので、スライドショーの画像にリンクをつけなおそうと思います。
無料のテンプレートをしっかりアップグレードしてくれるShopify流石でございます。
一生ついていくから一株ゆずってくれぇ！
以前にもブログで紹介しましたが、あのまま新しいテンプレートにコードをコピペするとレイアウトが崩れます。
なぜなら、スライドショーが一新されておしゃれになったからです。
しかし、相変わらず標準で画像自体にリンクをつけさせてくれません。
なんで？
スライドショーの画像にリンクをつける！
前回のようにセクションのslideshow.liquidを編集します。
以下のコードをスキーマーのblocks内、type: urlの下に分かりやすく設置しましょう。
{
"type": "url",
"id": "image_link",
"label": "Image Link"
}そして次にhtmlをコーディングします。
以下のコードをいれます。
{% if block.settings.image_link %}
<a href="{{ block.settings.image_link }}" class="slideshow__slide grid__item">
{% endif %}
{% if block.settings.image_link %}</a>{% endif %}
{%- for block in section.blocks -%}
<style>
#Slide-{{ section.id }}-{{ forloop.index }} .banner__media::after {
opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }};
}
</style>
<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.image_link %}
<a href="{{ block.settings.image_link }}" class="slideshow__slide grid__item">
{% endif %}
<!--△ここにコーディング△-->
<div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
{%- if block.settings.image -%}
{%- liquid
assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round
if section.settings.image_behavior == 'ambient'
assign sizes = '120vw'
assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
else
assign sizes = '100vw'
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
endif
-%}
{{
block.settings.image
| image_url: width: 3840
| image_tag:
loading: 'lazy',
height: height,
sizes: sizes,
widths: widths
}}
{%- else -%}
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
</div>
<div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }} page-width{% if block.settings.show_text_box == false %} banner--desktop-transparent{% endif %}">
<div class="slideshow__text banner__box content-container content-container--full-width-mobile color-{{ block.settings.color_scheme }} gradient slideshow__text--{{ block.settings.text_alignment }} slideshow__text-mobile--{{ block.settings.text_alignment_mobile }}">
{%- if block.settings.heading != blank -%}
<h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}">
{{ block.settings.heading }}
</h2>
{%- endif -%}
{%- if block.settings.subheading != blank -%}
<div class="banner__text rte" {{ block.shopify_attributes }}>
<p>{{ block.settings.subheading }}</p>
</div>
{%- endif -%}
{%- if block.settings.button_label != blank -%}
<div class="banner__buttons">
<a
{% if block.settings.link %}
href="{{ block.settings.link }}"
{% else %}
role="link" aria-disabled="true"
{% endif %}
class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}"
>
{{- block.settings.button_label | escape -}}
</a>
</div>
{%- endif -%}
</div>
</div>
<!--▽ここにコーディング▽-->
{% if block.settings.image_link %}</a>{% endif %}
<!--△ここにコーディング△-->
</div>
{%- endfor -%}
</div>
これでカスタマイズページで画像にリンクを設定できるようになりましたので、カスタマイズページを確認してみましょう。
これでリンク先を設定してあげればOKです。
たまに、設置ミスでレイアウトが崩れてしまいますので気を付けてください。
微妙にかゆいところに手が届かないShopifyの無料テーマ…
まぁ、無料だから仕方ないですね…
