スライドショーに複数ボタンを配置したい

日本語 ディスカッション 技術的なQ＆A

Topic summary

DAWNテンプレートのスライドショーセクションに複数のボタンを配置する方法についての質問と解決。

質問内容:

  • 以前「複数列」セクションで教わったコードをスライドショーに応用しようとしたが、ボタンが複製されない
  • schemaにbutton_label-2、link-2を追加し、表示部分もbutton-areaで囲んだが動作しない

解決方法:
slideshow.liquidファイルの2箇所を修正:

  1. 173行目付近(表示部分): 既存のボタンコードの後に、2つ目のボタン用のコードブロックを追加(button_label2、link2を使用)

  2. 442行目付近(schema部分): button_style_secondaryの後に、2つ目のボタン用の設定項目を追加(button_label2、link2、button_style_secondary2)

注意点:

  • ボタンのラベルは任意のものに変更可能
  • ボタンの位置調整はCSSで対応

質問者は解決策を確認し、理解を深めることを表明して解決済み。

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

いつもご教示いただき有難うございます。

以前、セクション「複数列」のボタンを複数にするコードをお教えいただいたのですが

スライドショーで応用が出来ず、原因をお教えいただけたらと思い、投稿させていただきました。

使用テンプレートはDAWNです。

まず、schemaのbutton_label部分を以下のように記載しました。

「複数列」とは内容が異なる部分があったため、複製する部分を元のコードよりコピーし、

内容を"button_label-2"等に変更しました。

 {
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "url",
"id": "link",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "text",
"id": "button_label-2",
"default": "ボタン２のラベル",
"label": "ボタン２のラベル",
"info": "t:sections.slideshow.blocks.slide.settings.button_label-2.info"
},
{
"type": "url",
"id": "link-2",
"label": "ボタン２のリンク"
},

次に、表示部分についてです。

まず、"button-area"で囲む必要があると理解し、

を追加しました。

div class="button-area"の内容については元のコードを複製し、

変更が必要と思われる部分をbutton_label-2等へ変更しました。

<div class="button-area">
{%- 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 -%}

{%- if block.settings.button_label-2 != blank -%}
<div class="banner__buttons">
<a
{% if block.settings.link-2 %}
href="{{ block.settings.link-2 }}"
{% 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-2 | escape -}}
</a>
</div>
{%- endif -%}
</div><!-- /.button-area -->

ここまででプレビューしてみたのですが、ボタンが複製されない状況です。

ちなみに私自身はコードの理解がほぼ無いレベルです。

以前お教えいただいた内容から、多少コードの意味が読み取れるようになったものの

間違いが抽出出来ず困っております。

大変お手数をおかけしますが、お教えいただけましたら幸いです。

どうぞ宜しくお願いいたします。

2

@morita_2

スライドショーでリンクボタンを二つにする方法ですが、

slideshow.liquidの173行目あたりの下記コードを

{%- if block.settings.button_label != blank -%}
              
                
                  {{- block.settings.button_label | escape -}}
                
              

            {%- endif -%}

下記に変更

{%- if block.settings.button_label != blank -%}
              
                
                  {{- block.settings.button_label | escape -}}
                
              

            {%- endif -%}
            
            {%- if block.settings.button_label2 != blank -%}
              
                
                  {{- block.settings.button_label2 | escape -}}
                
              

            {%- endif -%}

442行目あたりの下記コードを

{
          "type": "text",
          "id": "button_label",
          "default": "t:sections.slideshow.blocks.slide.settings.button_label.default",
          "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
          "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.slideshow.blocks.slide.settings.link.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary",
          "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
          "default": false
        },

下記に変更

{
          "type": "text",
          "id": "button_label",
          "default": "t:sections.slideshow.blocks.slide.settings.button_label.default",
          "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
          "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.slideshow.blocks.slide.settings.link.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary",
          "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
          "default": false
        },
        {
          "type": "text",
          "id": "button_label2",
          "default": "t:sections.slideshow.blocks.slide.settings.button_label.default",
          "label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
          "info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
        },
        {
          "type": "url",
          "id": "link2",
          "label": "t:sections.slideshow.blocks.slide.settings.link.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary2",
          "label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
          "default": false
        },

button_label2、link2、button_style_secondary2のlabelは任意のものに変更ください。

以上でボタンを追加できるかと思われます。

ボタンの位置等につきましては、cssなどでご調整ください。

ご参考まで。

（キュー小坂）

3

ご丁寧にご回答いただき有難うございました！

しっかり内容を確認し、さらに理解を高めようと思います。

今後ともどうぞ宜しくお願いいたします。