ストーリーブログのカスタマイズ | SkillhubAI（スキルハブエーアイ）

file

作成したブログ記事を使って、Shopifyのテーマをカスタマイズしていきましょう。

storyブログ用のセクションを作る

storyブログの表示をカスタマイズするために、新しいセクションを作成しましょう。

新規セクション作成

コード編集画面で、セクションの下の「新しいセクションを追加する」をクリック。 main-article-story.liquidを作成してください。

file

セクションディレクトリの中から、main-article.liquidを探して開きます。 main-article.liquid中のコードをすべて選択してコピー。新しく作ったmain-article-story.liquidに貼り付けて、保存してください。

file

storyブログに適用

最初に作ったテンプレートファイルarticle.story.jsonを開きます。

file

4行目、main > typeの値をmain-article-storyに変更してください。

file

変更したら、保存ボタンで上書き保存。これで、カスタマイズ用のセクションファイルの作成・適用は完了です。

article.story.jsonと、main-article.liquidはもう使用しません。
紛らわしいので、 `×` を押してコード編集のタブを閉じておいてください。

ブログ記事のトップにサムネイルを表示

main-article-story.liquidで、ブログ記事ページの見た目をカスタマイズします。

1.ページトップに表示する画像を調整

1-1.デフォルトの表示から、修正箇所を探す

デフォルトのブログ記事セクションでも、記事のサムネイルを上部に表示はできます。ただ、サイドバーの設定で「画像に合わせる」を選択しても、表示幅が限られています。大きな画像を用意しても、一定のサイズ以上にはならない形です。

file

確認してみると、画像が一定幅までしか広がらない主な原因はCSSのようです。画像を囲うdiv.article-template__hero-containerの、max-widthが130remになっています。

file

1-2.画像の幅を調整する

main-article-story.liquidで、ブロック“記事のサムネイル”の表示箇所を探します。 {%- when 'featured_image'-%} から下が該当します。

file

{%- when 'featured_image'-%}の数行下に、以下のような記述があります。

<div class="article-template__hero-container" {{ block.shopify_attributes }}>

max-widthが130remのarticle-template__hero-containerクラスです。この幅上限を上書きするために、divタグにidを追加しましょう。

main-article-story.liquid

<div id="story-top" class="article-template__hero-container" {{ block.shopify_attributes }}>

追加したid「story-top」を使って、デフォルトのCSSを上書きします。講座序盤で作ったCSSファイル（edoya.css）に追記しましょう。

edoya.css

/* =============================================
/  Article --- story
/============================================ */
#story-top.article-template__hero-container{
  max-width: 100%;
}

main-article-story.liquid、edoya.css、両方のファイルを上書き保存してください。

1-3.imgタグのsizes属性を変更

{%- if article.image -%} の中にある、imgタグのsizes属性を少し変更します。

file

{{ settings.page_width | minus: 100 }} を {{ article.image.width }}に変更します。赤線で囲った行を丸ごと、以下のコードに置き換えていただくと簡単です。

main-article-story.liquid

sizes="(min-width: {{ settings.page_width }}px) {{ article.image.width }}px, (min-width: 750px) calc(100vw - 10rem), 100vw"

file

imgのsrcset属性とsizes属性

sizes属性は、srcset属性の画像からブラウザが最適な画像を選ぶ時に使います。
元コードでは最大が「page_widthクラスの幅（テーマ設定 > レイアウトの幅）-100」pxだったのを、「サムネイルにアップロードした画像の幅」px に変更しています。

srcset属性とsizes属性については、下記記事の説明が分かりやすいです。

外部リンク

pictureタグとsrcset属性の違い。超わかりやすく

上書き保存できたら、プレビューを確認してみましょう。サムネイル画像が大きく表示されていれば成功です。

2.CSSで見た目を整える（例）

記事ページのトップにサムネイルを大きく表示する設定はできました。あとはお好きに、CSSでイメージした表示、見やすい表示に調整すればOKです。

例えば、見本は画像サイズを1920px × 1080px（アスペクト比16：9）にしています。スマホで見るときは良いですが、PCモニターだと画像でいっぱいになってしまいます。ちょっと高さを短くしたいですね。

file

デザインでは画像の右下・左下が丸まっていたので、その辺もCSSで対応しましょう。

edoya.css

/* =============================================
/  Article --- story
/============================================ */
#story-top.article-template__hero-container{
  max-width: 100%;
}

#story-top.article-template__hero-container .media{
  background: inherit;
}

#story-top.article-template__hero-container img{
  border-radius: 0 0 25% 25%;
}

/* 画面幅 990px以上の場合
/======================= */
@media screen and (min-width: 990px) { 
  #story-top.article-template__hero-container .media{
    padding-bottom: calc(625px + 2rem) !important;
  }

  #story-top.article-template__hero-container img{
    height: 625px;
  }
}

file

【オプション設定】

画像だけであれば、上のCSSだけでも大丈夫。ですが、見本のように画像に文字入れをしていると、画面サイズが大きいと文字が切れてしまう可能性があります。稀に2560px × 1140pxやそれ以上のディスプレイを使われている方もいるので、保険のスタイル指定を追加しておきます。

/* 画面幅 1920px以上の場合
/======================= */
@media screen and (min-width: 1920px) {
  #story-top.article-template__hero-container{
    max-width: 1920px;
  }

  #story-top.article-template__hero-container img{
    border-radius: 0 0 50% 50%;
  }
}

切れても問題ないサムネイル画像を使う場合、上記の設定は無くても構いません。

コレクションページを作った時に使った、画像上にタイトルを表示させるなどの方法も使えるでしょう。デザインやストア運営者の要望に合わせて設定してください。

ブログのコンテンツ幅を広げたい時は…

タイトルやコンテンツ部分は、幅が狭く設定されています。テーマのカスタマイズ画面で“ページの幅”を変更しても変わりません。

file

これは「page-width--narrow」というクラスが原因です。 CSSでmax-width: 72.6rem ≒ 726pxが設定されています。

file

商品ページなどとコンテンツ幅を同じにしたい時は、セクションのliquidファイルから「page-width--narrow」クラスを取り除くと良いでしょう。

file

メタフィールドを表示するセクション

ブログ記事（コンテンツ）下に、メタフィールドで設定した商品を表示させます。

セクションファイルの作成

メタフィールドで設定した商品表示部分は、他のブログを作った時にもカスタマイズ画面から使えるよう、独立したセクションとして作ります。

コード編集画面、セクションの下の「新しいセクションを追加する」をクリック。 article-metafields-products.liquidを作成してください。

article-metafields-products.liquidに必要な記述を書いていきます。ここまでのレッスンの復習・アレンジで作成が可能です。下にliquidとCSSコードを公開していますので、ご活用ください。

以下のレッスンを見ながらチャレンしてみてもよいでしょう。

【基礎編】ECサイト構築講座「SHOPIFYを使ったECサイト制作」

【応用編】ECサイト構築講座「SHOPIFYを使ったECサイト制作」

商品ページカスタマイズ②見た目・利便性をアップ

見本サイトのコード

article-metafields-products.liquid

{%- assign metafields-products = article.metafields.related.product -%}

{%-  if metafields-products != blank -%}
  <section class="page-width element-margin-top">
    {%- if section.settings.heading != blank -%}
      <h2 class="title {{ section.settings.heading_size }}">
        {{ section.settings.heading }}
      </h2>
    {%- endif -%}
    {%- for product in metafields-products.value  -%}
        <ul class="list-unstyled">
          <li class="metafields-product">
            <div class="metafields-product_img">
              <img src="{{ product.featured_image | img_url: 'large'  }} "  alt="{{ product.featured_image }}">
            </div >
            <div  class="metafields-product_txt">
              <div>
                <h3>{{ product.title }}</h3>
                <p class="right">{{ product.price_min | money_without_currency }}円（税込）~</p>
                <p>{{ product.metafields.custom.description | truncate: 150 }}</p>
              </div>
              <div class="center">
                <a class="button btn_link text-white" href="{{ product.url }}">{{ section.settings.btn_text }}</a>
              </div>
            </div >
          </li>
        </ul>
    {%- endfor -%}
  </section>
{%- endif -%}

{% schema %}
  {
    "name": "関連商品（メタフィールド）",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "セクションタイトル",
        "default": "こちらのページでご紹介した商品"
      },
      {
        "type": "select",
        "id": "heading_size",
        "options": [
          {
            "value": "h2",
            "label": "t:sections.all.heading_size.options__1.label"
          },
          {
            "value": "h1",
            "label": "t:sections.all.heading_size.options__2.label"
          },
          {
            "value": "h0",
            "label": "t:sections.all.heading_size.options__3.label"
          }
        ],
        "default": "h2",
        "label": "t:sections.all.heading_size.label"
      },
      {
        "type": "text",
        "id": "btn_text",
        "label": "ボタンテキスト",
        "default": "詳細を見る"
      }
    ],
    "presets" : [
      {
        "name" : "関連商品（メタフィールド設定）"
      }
    ],
    "templates" : [
      "article"
    ]
  }
{% endschema %}

edoya.css

/* =============================================
/  Article --- metafields-product
/============================================ */
.metafields-product{
  margin-bottom: 6rem;
}
.metafields-product img{
  max-width: 100%;
}

/* 画面幅 750px以上の場合
/======================= */
@media screen and (min-width: 750px) { 
  .metafields-product{
    display: flex;
  }
  .metafields-product_img{
    flex: 3;
    margin-right: 2.5rem;
  }
  .metafields-product_txt{
    flex: 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .metafields-product_txt h3{
    margin-top: 0;
  }
  .metafields-product_txt .btn_link{
    margin-bottom: 30px;
  }
}