Chapter 07

Part 5 テーマ改修 ~新規セクションを作成(モックアップ編)~

hiroki
hiroki
2021.12.14に更新
このチャプターの目次
このキャプチャーから、新規セクションを追加する方法を解説します。本書では、Dawnにスライダーセクションを追加します。スライダーセクションのHTML,CSS,JSのみで雛形までを解説します。
Shopify Online Store 2.0からセクションの需要は上がりました。いままでのセクションは、ホームページに限定されていました。2.0からアプリ不要で全ページのセクションが変更することができるようになり、かなりのカスタマイズ性が上がりました。

新規セクションを追加する

このキャプチャーでは、Dawnに新規セクションを追加します。追加するセクションは、スライダーのセクションです。Dawnではスライダーのセクションが存在しません。1.0のデフォルトテーマであるDebutのスライダーのセクションを参考にしたいと思います。

本書でShopify-CLIを導入したので、ローカル環境からスライダーを作成していきます。

  1. コマンドプロントでGitの作業用ブランチを作成します。
git checkout -b feature-slider
  1. [sections]内に新規ファイルを作成します。今回は、slider.liquidにします。
  2. {% schema %}から記述したいと思います。以下のJSONをschema内に追加してください。
    <h1>スライダー</h1>は、表示確認するために記述しておいてください。
    JSONは、Debutのスライダーとほとんど変わりません。違う点は以下です。
  • テキストアラインメントは、中央、右中央、左中央のみにしています。Debutのスライダーは、9カ所(左上、中央上など)ありますがコードが複雑になりますので3カ所のみにしています。
  • 画像アラインメントは削除しています。
  • 他言語の表示は削除しています。
<h1>スライダー</h1>
{% schema %}
    {
        "name": "スライダーsample",
        "class": "slide-wrap",
        "settings": [
            {
                "type": "select",
                "id": "slide_height",
                "label": "スライドの高さ",
                "default": "adapt",
                "options": [
                    {
                        "label": "最初の画像の高さに対応",
                        "value": "adapt"
                    },
                    {
                        "label": "小",
                        "value": "small"
                    },
                    {
                        "label": "中",
                        "value": "medium"
                    },
                    {
                        "label": "大",
                        "value": "large"
                    }
                ]
            },
            {
                "type": "select",
                "id": "text_size",
                "label": "文字サイズ",
                "options": [
                    {
                        "label": "中",
                        "value": "medium"
                    },
                    {
                        "label": "大",
                        "value": "large"
                    }
                ]
            },
            {
                "type": "select",
                "id": "text_alignment",
                "label": "テキストアラインメント",
                "default": "center center",
                "options": [
                    {
                        "label": "中心",
                        "value": "center center"
                    },
                    {
                        "label": "左中央",
                        "value": "left center"
                    },
                    {
                        "label": "右中央",
                        "value": "right center"
                    }
                ]
            },
            {
                "type": "checkbox",
                "id": "show_overlay",
                "label": "オーバーレイを表示する",
                "default": true
            },
            {
                "type": "checkbox",
                "id": "auto",
                "label": "スライドの自動切り替え",
                "default": false
            },
            {
                "type": "range",
                "id": "speed",
                "label": "スライドの変更する間隔",
                "max": 9,
                "min": 3,
                "step": 2,
                "unit": "秒",
                "default": 5
            }
        ],
        "blocks": [
            {
                "type": "slide",
                "name": "画像スライド",
                "limit": 3,
                "settings": [
                    {
                        "type": "image_picker",
                        "id": "image",
                        "label": "画像"
                    },
                    {
                        "type": "text",
                        "id": "slide_title",
                        "default": "見出しが入ります。",
                        "label": "見出し"
                    },
                    {
                        "type": "text",
                        "id": "subheading",
                        "default": "あなたのブランドのストーリーをビデオや画像で伝える",
                        "label": "小見出し"
                    },
                    {
                        "type": "text",
                        "id": "button_label",
                        "default": "Button label",
                        "label": "ボタンのラベルが入ります",
                        "info": "ボタンのラベルのインフォメーション"
                    },
                    {
                        "type": "url",
                        "id": "button_link",
                        "label": "URL"
                    }
                ]
            }
        ],
        "presets":[
            {
                "name": "スライダー画像",
                "category": "画像",
                "settings": {
                    "auto": false,
                    "speed": 5
                }
            }
        ]
    }
{% endschema %}
  1. slider.liquidを保存してください。その後コマンドプロントでShopify theme serveを実行します。
┏━━ Viewing theme… ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ * Syncing theme #124493758511 on *****.myshopify.com
┃                                                                           100%
┃ Serving .
┃ Please open this URL in your browser:
┃ http://127.0.0.1:9292
┃
┃ Customize this theme in the Online Store Editor:
┃ https://*****.myshopify.com/admin/themes/124493758511/editor
┃
┃ Share this theme preview:
┃ https://*****.com/?preview_theme_id=124493758511
┃
┃ (Use Ctrl-C to stop)
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (2.17s) ━━━
  1. [Customize this theme in the Online Store Editor:]のURLを開いてください。
  2. 管理画面が表示されます。[セクションの追加]をクリックして。
  3. 本書通りの場合は、[スライダーsample]を追加してください。schema内のnameに設定した名前になります。
  4. [画像スライド]も追加して、要素がちゃんと表示されているか確認してください。以下に完成形を添付しておきます。照らし合わせてみてください。
  • スライダーセクション
  • 画像ブロック(スライダー内のブロックです。上限3つまで追加できます。)
schemaの設定は完了です。次はスライダーの雛形を作成したいと思います。
  1. スライダープラグインのswiper.jsをダウンロードしてください。

https://github.com/nolimits4web/swiper/tree/Swiper5
  1. ダウンロードしたフォルダの2つのファイルを取り出して、テーマの[assets]内に格納してください。
  • [package]フォルダ > [css]フォルダ > [swiper.min.css]
  • [package]フォルダ > [js]フォルダ > [swiper.min.js]
  1. [layouts]フォルダ内のtheme.liquidを修正します。格納したswiperを読み込んでください。
    {% render 'meta-tags' %}

    <script src="{{ 'global.js' | asset_url }}" defer="defer"></script>
+   <script src="{{ 'swiper.min.js' | asset_url }}"></script>
   {{ 'base.css' | asset_url | stylesheet_tag }}
+  {{ 'swiper.min.css' | asset_url | stylesheet_tag }}
  1. slider.liquidにHTMLを貼り付けます。Liquidコードは入れていません。
- <h1>スライダー</h1>
+ <div class="swiper-container slideshow--small">
+   <div class="swiper-wrapper">
+     <div class="swiper-slide">
+		<div class="slide-overlay">
+		</div>
+            <img src="https://picsum.photos/500/300">
+            <div class="slide-content center">
+                <h2 class="mega-title--large">Slide Title 1</h2>
+                <p class="mega-desc--large">Lorem ipsum dolor sit amet, 
+  consectetur</p>
+           <a href="#" class="btn slideshow__btn">ボタンのラベル</a>
+            </div>
+     </div>
+     <div class="swiper-slide">
+                <div class="slide-overlay">
+                </div>
+           <img src="https://picsum.photos/500/301">
+            <div class="slide-content center">
+                <h2 class="mega-title--large">Slide Title 2</h2>
+                <p class="mega-desc--large">Lorem ipsum dolor sit amet, +consectetur</p>
+                <a href="#" class="btn slideshow__btn">ボタンのラベル+ </a>
+            </div>
+     </div>
+     <div class="swiper-slide">
+                <div class="slide-overlay">
+                </div>
+            <img src="https://picsum.photos/500/302">
+            <div class="slide-content center">
+                <h2 class="mega-title--large">Slide Title 3</h2>
+              <p class="mega-desc--large">Lorem ipsum dolor sit amet, +consectetur</p>
+           <a href="#" class="btn slideshow__btn">ボタンのラベル</a>
+            </div>
+     </div>
+   </div>
+ </div>
{% sechema %}
**** 省 ****
{% endschema %}
  1. HTMLの下に、プラグインのJSを追加してください。
   </div>
 </div>
+ <script type="text/javascript">  
+  const swiper = new Swiper('.swiper-container', {
+    // 自動再生(true:自動再生する、false:自動再生しない)
+     autoplay: {
+         delay: 9000,
+     },
+    // スライド方向(水平方向)
+    direction: 'horizontal',
+    // エフェクト(true:フェードアニメーション、false:スライドアニメーション)
+    effect: 'fade',
+    // ループ
+    loop: true,
+    // 表示枚数
+    slidesPerView: 1,
+    // ページネーション(true:表示、false:非表示)
+    pagination: false,
+    // ページ送りボタン(true:表示、false:非表示)
+    navigation: false
+  });
+ </script>
{% sechema %}
**** 省 ****
{% endschema %}
  1. コマンドプロントでShopify theme serveを実行します。[Customize this theme in the Online Store Editor:]のURLを開いてください。

スライダーが正常に動作していることを確認してください。見出しなどのテキスト部分は、スタイルを適応していないので重なって表示されています。重なっていても気にしないでください。
補足:画像は、サンプルURLなのでブラウザを再読み込みするたびに変わります。

  1. HTMLの上に、CSSを貼り付けてください。後に解説するので安心してください。
+<style>
+.swiper-container{
+    max-height: 100vh;
+    transition: height .6s cubic-bezier(.44, .13, .48, .87);
+}
+.swiper-slide{
+    position: relative;
+}
+.swiper-slide img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    vertical-align: bottom;
+}
+.slide-overlay::before{
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(204,204,204,0.8);
+}
+.swiper-slide .slide-content{
+    position: absolute;
+    top: 50%;
+    padding: 20px;
+}
+@media only screen and (max-width: 750px) {
+    .swiper-slide .slide-content{
+        padding: 0px;
+    }
+}
+.swiper-slide .slide-content.center{
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    text-align: center;
+}
+.swiper-slide .slide-content.left{
+    left: 0%;
+    transform: translateX(0%) translateY(-50%);
+    text-align: left;
+}
+.swiper-slide .slide-content.right{
+    right: 0%;
+    transform: translateX(0%) translateY(-50%);
+    text-align: right;
+}
+.swiper-slide .slide-content h2{
+    color: #FFF !important;
+    margin: 0px;
+}
+.swiper-slide .slide-content p{
+    margin: 0px;
+}
+.slideshow--small {
+  height: 175px; 
+}
+@media only screen and (min-width: 750px) {
+    .slideshow--small{
+      height: 475px; 
+    } 
+}
+.slideshow--medium {
+    height: 270px; 
+}
+@media only screen and (min-width: 750px) {
+    .slideshow--medium{
+      height: 650px; 
+    }
+}
+.slideshow--large{
+    height: 375px; 
+}
+@media only screen and (min-width: 750px) {
+    .slideshow--large {
+      height: 775px; 
+    } 
+}
+.swiper-slide .slide-content h2.mega-title--large{
+    font-size: 45px;
+}
+.swiper-slide .slide-content p.mega-desc--large{
+    font-size: 22px;
+}
+@media only screen and (max-width: 750px) {
+    .swiper-slide .slide-content h2{
+        font-size: 18px;
+    }
+    .swiper-slide .slide-content p{
+        font-size: 12px;
+    }
+    .swiper-slide .slide-content h2.mega-title--large{
+        font-size: 22px;
+    }
+    .swiper-slide .slide-content p.mega-desc--large{
+        font-size: 14px;
+    }
+}
+.slideshow__btn{
+    display: inline-block;
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: red;
+    color: #fff;
+    text-decoration: none;
+}
+@media only screen and (max-width: 750px) {
+    .slideshow__btn{
+        display: inline-block;
+        margin-top: 10px;
+        padding: 5px 10px;
+    }
+ }
+ </style>

 <div class="swiper-container slideshow--small">
    <div class="swiper-wrapper">
  1. 表示を確認してみてください。まだ、Shopifyの管理画面の設定を変更してもスライダーセクションに反映されません。続きのPart6で紐付けていきます。