見出し画像

【Shopify】九十九悪嵐のうぇぶでざいんびぼうろく。〜スライダー画像を入れられるようにしてみる編〜【解説編】

悪嵐

解説とかどうでもいいからコードだけくれよって人はこちら↓

まずは仕様から解説します。

カスタマイズ項目_スライダー_3

自動再生：スライダーを自動再生するかどうかのチェックボックス。初期値はチェックあり。チェックを入れると自動でスライドし、チェックを外すと自動でスライドしません。

速度：スライダーがスライドする速度を決めるレンジスライダー。初期値は200。最小値は100、最大値は1000、左右に100刻みで動きます。数値が大きければ大きいほどスライドするのが遅くなり、小さければ小さいほど速くなります。この数値の単位はミリ秒なので、秒にしたい場合は脳内で÷1000をしてください。
※レンジスライダー：つまみ部分をドラッグすることで左右にずらすことができるスライダーのこと。指定されている数値を直感的に変更することができる。

フェード：スライドのアニメーションのチェックボックス。初期値はチェックあり。チェックを入れるとふわっとしたスライドのアニメーションになり、チェックを外すとそのまま普通にスライドします。

ページ送りボタン：ページ送りボタンを表示するかどうかのチェックボックス。初期値はチェックあり。チェックを入れるとページ送りボタンが表示表示され、チェックを外すとページ送りボタンが非表示になります。
※ページ送りボタン：押すことで次の画像や前の画像が見られるようなボタンのこと。矢印や＜＞などで表現されていることが多い

ページ送りボタンの色：ページ送りボタンの色を決められるカラーピッカー。初期値は#000（＝黒）。スライダーに使っている画像に対して見やすい色を設定することをおすすめします。
※カラーピッカー：色が選択できるやつ。16進数で色を指定することもできるけど、大体の人は好きな色を選ぶ方が楽だから、わざわざ16進数で指定することはしないと思う。

ページネーション：ページネーションを表示するかどうかのチェックボックス。初期値はチェックあり。チェックを入れるとページネーションが表示され、チェックを外すとページネーションが非表示になります。
表示されている場合、・をクリックするとその番号（？）に対応した画像が表示されます（その番号（？）の画像が登録されている場合のみ）。
※ページネーション：画像の下にある・・・のやつ。クリックを押すと、その番号（？）に対応した画像が表示される。スライダーによっては数字だったり、丸の代わりに四角で表現されていたりしている。また、クリックしても反応しないものもある。

ページネーションの色：ページネーションの色を決められるカラーピッカー。初期値は#000（＝黒）。スライダーに使っている画像に対して見やすい色を設定することをおすすめします。

続いて、コードの解説をします。
（これから解説するのはimage-slider.liquidのみです。他のコードも解説しろよって人はコメントしてください。他のコードの解説をこちらに追記します）

<style>
.swiper-container {
  height: 500px;
}
.swiper-slide img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 750px) {
  .swiper-container {
    height: 250px;
  }
}
</style>

ここで、スライダーの大きさを設定しています。
@media〜はタブレット端末以下のときのスタイル。いわゆる、レスポンシブ用。
大きさは適当に設定したので、お好みで調整してください。

{%- if section.settings.arrow -%}
<style>
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
  display: inline !important;
  color: {{ section.settings.arrow_color }};
}
</style>
{%- endif -%}

ここでは、ページ送りボタンのスタイルを設定しています。
ページ送りボタンが表示されている場合、このコードが検証ツール（デベロッパーツール）に表示されるようになり、そうでなければ表示されないようになっています。

color: {{ section.settings.arrow_color }};

ここで、決めたページ送りボタンの色が反映するようになっています。

{%- if section.settings.pagination -%}
<style>
.swiper-pagination-bullet {
  background: {{ section.settings.pagination_color }};
}
</style>
{%- endif -%}

ここでは、ページネーションのスタイルを設定しています。
ページネーションが表示されている場合、このコードが検証ツール（デベロッパーツール）に表示されるようになり、そうでなければ表示されないようになっています。

background: {{ section.settings.pagination_color }}

ここで、決めたページネーションの色が反映するようになっています。

<div class="slider__content page-width">
<div class="slider__box">
  {%- for block in section.blocks -%}
  {%- case block.type -%}
  {%- when 'heading' -%}
  <!-- 見出し -->
  <h2 class="slider__heading">
    <span>{{ block.settings.heading }}</span>
  </h2>
  {%- endcase -%}
  {%- endfor -%}
  </div>

ここでは、スライダーのclassの指定や、見出しの設定をしています。

  {%- for block in section.blocks -%}
  {%- case block.type -%}
  {%- when 'heading' -%}
  <!-- 見出し -->
  <h2 class="slider__heading">
    <span>{{ block.settings.heading }}</span>
  </h2>
  {%- endcase -%}
  {%- endfor -%}

ここで、決めた見出しが反映するようになっています。

<!-- スライダー -->  
<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- スライダー1 -->
    {%- for block in section.blocks -%}
    {%- case block.type -%}
    {%- when 'slide_img_1' -%}
    <div class="swiper-slide">
      {% if block.settings.slide_link_1 %}
        <a href="{{ block.settings.slide_link_1 }}">
      {% endif %}
      {% if block.settings.slide_img_1 %}
        <img src="{{ block.settings.slide_img_1  | img_url: '2800x' }}">
      {% else %}
         <img src="//cdn.shopify.com/shopifycloud/shopify/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_2800x.gif">
      {% endif %}
      {% if block.settings.slide_link_1 %}
        </a>
      {% endif %}
    </div>
    {%- endcase -%}
    {%- endfor -%}
    <!-- .スライダー1 -->
    <!-- スライダー2 -->
    {%- for block in section.blocks -%}
    {%- case block.type -%}
    {%- when 'slide_img_2' -%}
    <div class="swiper-slide">
      {% if block.settings.slide_link_2 %}
        <a href="{{ block.settings.slide_link_2 }}">
      {% endif %}
      {% if block.settings.slide_img_2 %}
        <img src="{{ block.settings.slide_img_2  | img_url: '2800x' }}">
      {% else %}
        <img src="//cdn.shopify.com/shopifycloud/shopify/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_2800x.gif">
      {% endif %}
      {% if block.settings.slide_link_2 %}
        </a>
      {% endif %}
    </div>
    {%- endcase -%}
    {%- endfor -%}
    <!-- .スライダー2 -->
    <!-- スライダー3 -->
    {%- for block in section.blocks -%}
    {%- case block.type -%}
    {%- when 'slide_img_3' -%}
    <div class="swiper-slide">
      {% if block.settings.slide_link_3 %}
        <a href="{{ block.settings.slide_link_3 }}">
      {% endif %}
      {% if block.settings.slide_img_3 %}
        <img src="{{ block.settings.slide_img_3  | img_url: '2800x' }}">
      {% else %}
        <img src="//cdn.shopify.com/shopifycloud/shopify/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_2800x.gif">
      {% endif %}
      {% if block.settings.slide_link_3 %}
        </a>
      {% endif %}
    </div>
    {%- endcase -%}
    {%- endfor -%}
    <!-- .スライダー3 -->
  </div>
  <!-- ページネーション -->
  <div class="swiper-pagination"></div>
  <!-- ページ送りボタン -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
</div>

ここでは、HTML側のスライダーを設定しています。細かい解説はコメントの通りです。

<script type="text/javascript">  
const swiper = new Swiper('.swiper-container', {
  // 自動再生（true:自動再生する、false:自動再生しない）
  autoplay: {% if section.settings.autoplay %}true{% else %}false{% endif %},
  // スライド方向（水平方向）
  direction: 'horizontal',
  // エフェクト（true:フェードアニメーション、false:スライドアニメーション）
  effect: {% if section.settings.fade %}'fade'{% else %}'slide'{% endif %},
  // ループ
  loop: true,
  // 表示枚数
  slidesPerView: 1,
  // 速度（初期値:200ミリ秒）
  speed: {{ section.settings.speed }},
  // ページネーション（true:表示、false:非表示）
  {% if section.settings.pagination %}
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  },
  {% endif %}
  // ページ送りボタン（true:表示、false:非表示）
  {% if section.settings.arrow %}
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  {% endif %}
});
</script>

ここでは、JavaScript側のスライダーの設定をしています。細かい解説はコメントの通りです。

{% schema %}
{
"name": "t:sections.image-slider.presets.name",
"settings": [
  {
    "type": "checkbox",
    "id": "autoplay",
    "label": "t:sections.image-slider.settings.slider_settings.autoplay.label",
    "default": true
  },
  {
    "type": "range",
    "id": "speed",
    "min": 100,
    "max": 1000,
    "step": 100,
    "unit": "ミリ秒",
    "label": "t:sections.image-slider.settings.slider_settings.speed.label",
    "default": 200
  },
  {
    "type": "checkbox",
    "id": "fade",
    "label": "t:sections.image-slider.settings.slider_settings.fade.label",
    "default": true
  },
  {
    "type": "checkbox",
    "id": "arrow",
    "label": "t:sections.image-slider.settings.slider_settings.arrow.label",
    "default": true
  },
  {
    "type": "color",
    "id": "arrow_color",
    "label": "t:sections.image-slider.settings.slider_settings.arrow_color.label",
    "default": "#000"
  },
  {
    "type": "checkbox",
    "id": "pagination",
    "label": "t:sections.image-slider.settings.slider_settings.pagination.label",
    "default": true
  },
  {
    "type": "color",
    "id": "pagination_color",
    "label": "t:sections.image-slider.settings.slider_settings.pagination_color.label",
    "default": "#000"
  }
],
"blocks": [
  {
    "type": "heading",
    "name": "t:sections.image-slider.blocks.heading.name",
    "limit": 1,
    "settings": [
      {
        "type": "richtext",
        "id": "heading",
        "default": "<p>Image slider</p>",
        "label": "t:sections.image-slider.blocks.heading.settings.heading.label"
      }
    ]
  },
  {
    "type": "slide_img_1",
    "name": "t:sections.image-slider.blocks.slide_img_1.name",
    "limit": 1,
    "settings": [
      {
        "type": "image_picker",
        "id": "slide_img_1",
        "label": "t:sections.image-slider.blocks.slide_img_1.settings.slide_img_1.label"
      },
      {
        "type": "url",
        "id": "slide_link_1",
        "label": "t:sections.image-slider.blocks.slide_link_1.settings.slide_link_1.label"
      }
    ]
  },
  {
    "type": "slide_img_2",
    "name": "t:sections.image-slider.blocks.slide_img_2.name",
    "limit": 1,
    "settings": [
      {
        "type": "image_picker",
        "id": "slide_img_2",
        "label": "t:sections.image-slider.blocks.slide_img_2.settings.slide_img_2.label"
      },
      {
        "type": "url",
        "id": "slide_link_2",
        "label": "t:sections.image-slider.blocks.slide_link_2.settings.slide_link_2.label"
      }
    ]
  },
  {
    "type": "slide_img_3",
    "name": "t:sections.image-slider.blocks.slide_img_3.name",
    "limit": 1,
    "settings": [
      {
        "type": "image_picker",
        "id": "slide_img_3",
        "label": "t:sections.image-slider.blocks.slide_img_3.settings.slide_img_3.label"
      },
      {
        "type": "url",
        "id": "slide_link_3",
        "label": "t:sections.image-slider.blocks.slide_link_3.settings.slide_link_3.label"
      }
    ]
  }
],
"presets": [
  {
    "name": "t:sections.image-slider.presets.name",
    "category": "t:sections.image-slider.presets.category"
  }
]
}
{% endschema %}

ここでは、コレクションのセクションやブロックの設定をしています。​これを設定しないと、セクションから『スライダー画像』が選択できないので、必ず設定します。

"settings": [
  {
    "type": "checkbox",
    "id": "autoplay",
    "label": "t:sections.image-slider.settings.slider_settings.autoplay.label",
    "default": true
  },
  {
    "type": "range",
    "id": "speed",
    "min": 100,
    "max": 1000,
    "step": 100,
    "unit": "ミリ秒",
    "label": "t:sections.image-slider.settings.slider_settings.speed.label",
    "default": 200
  },
  {
    "type": "checkbox",
    "id": "fade",
    "label": "t:sections.image-slider.settings.slider_settings.fade.label",
    "default": true
  },
  {
    "type": "checkbox",
    "id": "arrow",
    "label": "t:sections.image-slider.settings.slider_settings.arrow.label",
    "default": true
  },
  {
    "type": "color",
    "id": "arrow_color",
    "label": "t:sections.image-slider.settings.slider_settings.arrow_color.label",
    "default": "#000"
  },
  {
    "type": "checkbox",
    "id": "pagination",
    "label": "t:sections.image-slider.settings.slider_settings.pagination.label",
    "default": true
  },
  {
    "type": "color",
    "id": "pagination_color",
    "label": "t:sections.image-slider.settings.slider_settings.pagination_color.label",
    "default": "#000"
  }
],

"settings"で下の画像の部分を設定しています。自動再生やページ送りボタンの設定など、全体の設定などを入れておくといいかもしれないです。

画像2


  {
    "type": "checkbox",
    "id": "autoplay",
    "label": "t:sections.image-slider.settings.slider_settings.autoplay.label",
    "default": true
  },

ここで、『自動再生』のチェックボックスを設定しています。
【必須項目】
・type
・id
・label
【任意項目】
・default

画像3

設定すると上の画像みたいになります。
"type"でチェックボックスが表示されるようになります。
"label"で『自動再生』が表示されるようになります（schema.jsonで設定した値が入るような設計になっています）。
"default"は初期値です。trueにしているので、チェックありになります。


  {
    "type": "range",
    "id": "speed",
    "min": 100,
    "max": 1000,
    "step": 100,
    "unit": "ミリ秒",
    "label": "t:sections.image-slider.settings.slider_settings.speed.label",
    "default": 200
  },

ここで、『速度』のレンジスライダーを設定しています。
【必須項目】
・type
・id
・min
・max
・step
・label
・default
【任意項目】
・unit

画像4

設定すると上の画像みたいになります。
"type"でレンジスライダーが表示されるようになります。
"min"で最小値が設定されます。100にしているので、最小値は100となり、99以下の数値を指定することができなくなります。
"max"で最大値が設定されます。1000にしているので、最大値は1000となり、1001以上の数値を指定することができなくなります。
"step"で数値の変化の単位が設定されます。100にしているので、100刻みで数値を変更することができます。簡単に説明すると、100、200、300、400、500、600、700、800、900、1000の中からしか数値の指定ができないということです。
"unit"で単位を指定します。"ミリ秒"にしているので、レンジスライダーの隣の数値の隣に『ミリ秒』と表示されています。これを書かないと、ユーザーは秒なのかミリ秒なのかはたまた別の単位なのか分からなくなるので、任意ではありますが、書くようにしておいた方がいいです。
"label"で『速度』が表示されるようになります（schema.jsonで設定した値が入るような設計になっています）。
"default"は初期値です。200にしているので、設置したばかりで何もいじっていないスライドの速度は200ミリ秒になります。


  {
    "type": "checkbox",
    "id": "fade",
    "label": "t:sections.image-slider.settings.slider_settings.fade.label",
    "default": true
  },

ここで、『フェード』のチェックボックスを設定しています。
【必須項目】
・type
・id
・label
【任意項目】
・default

画像5

設定すると、上の画像みたいになります。
"type"でチェックボックスが表示されるようになります。
"label"で『フェード』が表示されるようになります（schema.jsonで設定した値が入るような設計になっています）。
"default"は初期値です。trueにしているので、チェックありになります。


  {
    "type": "checkbox",
    "id": "arrow",
    "label": "t:sections.image-slider.settings.slider_settings.arrow.label",
    "default": true
  },

ここで、『ページ送りボタン』のチェックボックスを設定しています。
【必須項目】
・type
・id
・label
【任意項目】
・default

画像6

設定すると、上の画像みたいになります。
"type"でチェックボックスが表示されるようになります。
"label"で『ページ送りボタン』が表示されるようになります（schema.jsonで設定した値が入るような設計になっています）。
"default"は初期値です。trueにしているので、チェックありになります。


  {
    "type": "color",
    "id": "arrow_color",
    "label": "t:sections.image-slider.settings.slider_settings.arrow_color.label",
    "default": "#000"
  },

ここで、『ページ送りボタンの色』のカラーピッカーを設定しています。
【必須項目】
・type
・id
・label
【任意項目】
・default

画像7

設定すると、上の画像みたいになります。
"type"でカラーピッカーが表示されるようになります。
"label"で『ページ送りボタンの色』が表示されるようになります（schema.jsonで設定した値が入るような設計になっています）。
"default"は初期値です。#000にしているので、四角は黒色に塗りつぶされ、隣の値は#000になっています。


  {
    "type": "checkbox",
    "id": "pagination",
    "label": "t:sections.image-slider.settings.slider_settings.pagination.label",
    "default": true
  },

ここで、『ページネーション』のチェックボックスを設定しています。
【必須項目】
・type
・id
・label
【任意項目】
・default

画像8

設定すると、上の画像みたいになります。
"type"でチェックボックスが表示されるようになります。
"label"で『ページネーション』が表示されるようになります（schema.jsonで設定した値が入るような設計になっています）。
"default"は初期値です。trueにしているので、チェックありになります。


  {
    "type": "color",
    "id": "pagination_color",
    "label": "t:sections.image-slider.settings.slider_settings.pagination_color.label",
    "default": "#000"
  }

ここで、『ページネーション』のカラーピッカーを設定しています。
【必須項目】
・type
・id
・label
【任意項目】
・default

画像9

設定すると、上の画像みたいになります。
"type"でチェックボックスが表示されるようになります。
"label"で『ページネーション』が表示されるようになります（schema.jsonで設定した値が入るような設計になっています）。
"default"は初期値です。trueにしているので、チェックありになります。


"blocks"で下の画像の部分を設定しています。スライダーの画像の設定など、増えたり減ったりするものなどを入れておくといいかもしれません。

画像10


    "type": "heading",
    "name": "t:sections.image-slider.blocks.heading.name",
    "limit": 1,

ここで『ブロック』の中の『見出し』を設定しています。limitで1個しか入れられないように設定しています（limitを入れなければ無限に入れられるようになります）。参考画像は下にあります。

画像11


    "type": "slide_img_1",
    "name": "t:sections.image-slider.blocks.slide_img_1.name",
    "limit": 1,

ここで『ブロック』の中の『画像1』を設定しています。limitで1個しか入れられないように設定しています（limitを入れなければ無限に入れられるようになります）。参考画像は下にあります。

画像12


    "type": "slide_img_2",
    "name": "t:sections.image-slider.blocks.slide_img_2.name",
    "limit": 1,

ここで『ブロック』の中の『画像2』を設定しています。limitで1個しか入れられないように設定しています（limitを入れなければ無限に入れられるようになります）。参考画像は下にあります。

画像13


    "type": "slide_img_3",
    "name": "t:sections.image-slider.blocks.slide_img_3.name",
    "limit": 1,

ここで『ブロック』の中の『画像3』を設定しています。limitで1個しか入れられないように設定しています（limitを入れなければ無限に入れられるようになります）。参考画像は下にあります。

画像14


    "settings": [
      {
        "type": "richtext",
        "id": "heading",
        "default": "<p>Image slider</p>",
        "label": "t:sections.image-slider.blocks.heading.settings.heading.label"
      }
    ]

ここで『見出し』を設定しています。
【必須項目】
・type
・id
・label
【任意項目】
・default

画像15

設定すると、上の画像みたいになります。
"type"でリッチテキストが表示されるようになります。
※リッチテキスト：書いた通りにテキストが表示されるやつ。太字にしたり、斜字にしたり、リンクを貼ることができる。HTMLを知らない人向け。
"label"で『見出し』が表示されるようになります（schema.jsonで設定した値が入るような設計になっています）。
"default"は初期値です。"<p>Image slider</p>"を入れているので、ボックス内にImage sliderが入っています。


     "settings": [
      {
        "type": "image_picker",
        "id": "slide_img_1",
        "label": "t:sections.image-slider.blocks.slide_img_1.settings.slide_img_1.label"
      },

ここで『画像1』を設定しています。
【必須項目】
・type
・id
・label

画像16

設定すると、上の画像みたいになります（上の画像は、画像を選択した状態です。選択しなければ代用画像が入るようになります）。
"image_picker"でイメージピッカーが表示されるようになります。
※イメージピッカー：画像を選択することができるやつ。これ1つで、画像の選択、画像の削除、画像のアップロードができる。便利。
"label"で『画像1』が表示されるようになります（schema.jsonで設定した値が入るような設計になっています）。


      {
        "type": "url",
        "id": "slide_link_1",
        "label": "t:sections.image-slider.blocks.slide_link_1.settings.slide_link_1.label"
      }

ここで『画像1のリンク』を設定しています。
【必須項目】
・type
・id
・label
【任意項目】
・default

画像17

設定すると、上の画像みたいになります。
"url"でリンクを入れられるテキストボックスが表示されるようになります。
※URLを指定しなくてもスライダーとして使えます。URLを指定するとスライダーの画像をクリックしたときにそのリンク先に飛ぶようになります。
"label"で『画像1のリンク』が表示されるようになります（schema.jsonで設定した値が入るような設計になっています）。

画像2、画像3は、画像1を流用しているだけなのて解説は省略します。

ここまでお付き合いいただき、ありがとうございました！
お疲れ様でした～。


この記事が気に入ったらサポートをしてみませんか？