概要
設定方法
新規追加セクション（featured-banner.liquid）用コード
{%- style -%}
.featured-banner-{{ section.id }} ul,
.featured-banner-{{ section.id }} li {
margin: 0;
padding: 0;
}
.featured-banner-{{ section.id }} ul {
width: {{ section.settings.width_desktop }}%;
display: grid;
grid-template-columns:
{%- case section.settings.columns_desktop -%}
{%- when 1 -%}
1fr
{%- when 2 -%}
1fr 1fr
{%- when 3 -%}
1fr 1fr 1fr
{%- when 4 -%}
1fr 1fr 1fr 1fr
{%- endcase -%};
gap: {{ section.settings.gap_desktop }}px;
margin: 0 auto;
}
.featured-banner-{{ section.id }} li {
list-style-type: none;
text-align: center;
}
.featured-banner-{{ section.id }} li a {
width: 100%;
}
.featured-banner-{{ section.id }} li img {
width: 100%;
height: 100%;
}
.featured-banner-{{ section.id }} li img:hover {
opacity: {{ section.settings.mouse_overlay_opacity }}%;
}
.featured-banner-{{ section.id }}.center {
text-align: center;
}
.featured-banner-{{ section.id }}.center > ul {
margin: 0 auto;
}
.featured-banner-{{ section.id }} .item-empty {
display: flex;
justify-content: center;
align-items: center;
}
.featured-banner-{{ section.id }} .item-empty svg {
width: 100%;
}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
@media screen and (max-width: {{ section.settings.break_point }}px) {
.featured-banner-{{ section.id }} ul {
width: {{ section.settings.width_mobile }}%;
display: grid;
grid-template-columns:
{%- case section.settings.columns_mobile -%}
{%- when 1 -%}
1fr
{%- when 2 -%}
1fr 1fr
{%- when 3 -%}
1fr 1fr 1fr
{%- when 4 -%}
1fr 1fr 1fr 1fr
{%- endcase -%};
gap: {{ section.settings.gap_mobile }}px;
}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
}
{%- endstyle -%}
<div class="featured-banner-{{ section.id }} section-{{ section.id }}-padding{% if section.settings.column_alignment == 'center' %} center{% endif %}{% unless section.settings.full_width %} page-width{% endunless %} scroll-trigger animate--slide-in">
<ul
id="banner-list-{{ section.id }}"
class="scroll-trigger"
role="list"
>
{%- for block in section.blocks -%}
<li
id="banner-{{ section.id }}-{{ forloop.index }}"
class="banner-list__item scroll-trigger animate--slide-in{% if block.settings.image == blank and block.settings.image_mobile == blank %} item-empty{% endif %}"
style="--animation-order: {{ forloop.index }}"
{{ block.shopify_attributes }}
>
<a
{% if block.settings.link == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.link }}"
{% endif %}
{% if block.settings.window_open_mode == "new" %}
target="_blank"
{% endif %}
>
{% if block.settings.image != blank %}
<picture>
<source media="(max-width: {{ section.settings.break_point }}px)" srcset="{% if block.settings.image_mobile != blank %}{{ block.settings.image_mobile | image_url: width: section.settings.break_point }}{% else %}{{ block.settings.image | image_url: width: section.settings.break_point }}{% endif %} {{ section.settings.break_point }}w">
<img src="{{ block.settings.image | image_url: width: block.settings.image.width }}" loading="lazy" alt="{{ block.settings.heading }}" style="object-fit: {{ block.settings.image_object_fit }};">
</picture>
{% else %}
{{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
</a>
</li>
{%- endfor -%}
</ul>
</div>
{% schema %}
{
"name": "特集バナー",
"tag": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "checkbox",
"id": "full_width",
"label": "バナー表示領域を全幅にする",
"default": false
},
{
"type": "range",
"id": "mouse_overlay_opacity",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "マウスオーバー時の不透明度",
"default": 80
},
{
"type": "range",
"id": "break_point",
"min": 300,
"max": 1000,
"step": 20,
"unit": "px",
"default": 700,
"label": "モバイルに切り替わる画面幅"
},
{
"type": "header",
"content": "デスクトップ"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 4,
"step": 1,
"default": 2,
"label": "デスクトップの列数"
},
{
"type": "range",
"id": "width_desktop",
"min": 50,
"max": 100,
"step": 1,
"unit": "%",
"default": 80,
"label": "デスクトップのバナーエリア幅"
},
{
"type": "range",
"id": "gap_desktop",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"default": 10,
"label": "デスクトップのバナー間の余白"
},
{
"type": "header",
"content": "モバイル"
},
{
"type": "range",
"id": "columns_mobile",
"min": 1,
"max": 4,
"step": 1,
"default": 2,
"label": "モバイルの列数"
},
{
"type": "range",
"id": "width_mobile",
"min": 50,
"max": 100,
"step": 1,
"unit": "%",
"default": 80,
"label": "モバイルのバナーエリア幅"
},
{
"type": "range",
"id": "gap_mobile",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"default": 10,
"label": "モバイルのバナー間の余白"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "banner",
"name": "バナー",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "デスクトップ画像"
},
{
"type": "image_picker",
"id": "image_mobile",
"label": "モバイル画像",
"info": "未設定の場合はデスクトップの画像を表示"
},
{
"type": "text",
"id": "heading",
"label": "画像ALTテキスト"
},
{
"type": "select",
"id": "image_object_fit",
"options": [
{
"value": "cover",
"label": "余白なしで表示"
},
{
"value": "contain",
"label": "画像全体を表示"
}
],
"default": "contain",
"label": "画像の表示方法"
},
{
"type": "url",
"id": "link",
"label": "リンクURL"
},
{
"type": "select",
"id": "window_open_mode",
"options": [
{
"value": "self",
"label": "同一ウィンドウ"
},
{
"value": "new",
"label": "新しいウィンドウ"
}
],
"default": "self",
"label": "リンク先の開き方"
}
]
}
],
"presets": [
{
"name": "特集バナー"
}
]
}
{% endschema %}
