Shopifyでブログテンプレートを利用する方法を考察
はじめに
今回は、Shopify でブログテンプレートを利用する方法について考察していきます。
今回の記事では、主に Shopify の Liquid オブジェクトに焦点を当てて解説していきます。
それでは、頑張っていきましょう。
Shopifyのブログテンプレートの定義
まずは、ブログテンプレートの定義からです。
Shopifyは、オンラインストアだけでなく、ブログ機能も提供しています。ブログを活用することで、SEOの強化や顧客とのエンゲージメントを高めることができます。以下に、Shopifyでブログテンプレートを定義する方法を技術的に解説します。
ブログテンプレート、と書いていますが、今回はブログのデザインテンプレートと認識して頂いて大丈夫です。
ブログテンプレートの作成をコーディングで実装
それでは、ブログテンプレートの作成をコーディングで実装していきましょう。
いつも通り、テーマの三点リーダーのコードを編集から、テーマのコードを編集する画面に移動できます。
コード編集画面に移動しました。
実は Shopify のブログは階層構造になっており、いわゆるブログ詳細ページは実は Shopify では article と呼ばれます。
そのため、編集するべきはblog.jsonではなく、article.jsonです。
以下に、article.jsonのコードを貼り付けます。
{
"sections": {
"main": {
"type": "main-article",
"blocks": {
"featured_image": {
"type": "featured_image",
"settings": {
"image_height": "adapt"
}
},
"title": {
"type": "title",
"settings": {
"blog_show_date": true,
"blog_show_author": false
}
},
"share": {
"type": "share",
"settings": {
"share_label": "Share"
}
},
"content": {
"type": "content",
"settings": {
}
}
},
"block_order": [
"featured_image",
"title",
"share",
"content"
],
"settings": {
}
}
},
"order": [
"main"
]
}
上記のjsonファイルから分かる通り、Shopify のブログ詳細の実体はmain-articleというセクションです。
そのため、main-articleセクションに移動してコードの編集を行いましょう。
以下のファイルを開いてください。
これで、Shopify のブログ詳細の実体のファイルを開けました。
下記のコードが確認できます。
いくつか、特徴的な部分を解説します。
ブログのコードの解説
それでは、ブログのコードの解説を行っていきます。
ブロックのループとレンダリング
この部分では、セクション内の各ブロックをループし、ブロックの種類に応じて異なる処理を行っています。@appブロックの場合、ページの幅を狭くしてレンダリングします。
{%- when 'featured_image' -%}
{%- if article.image -%}
<div class="article-template__hero-container{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
{{ block.shopify_attributes }}
>
<div class="article-template__hero-{{ block.settings.image_height }} media"
{% if block.settings.image_height == 'adapt' and article.image %}
style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"
{% endif %}
>
<img
srcset="
{% if article.image.width >= 350 %}{{ article.image | image_url: width: 350 }} 350w,{% endif %}
{% if article.image.width >= 750 %}{{ article.image | image_url: width: 750 }} 750w,{% endif %}
{% if article.image.width >= 1100 %}{{ article.image | image_url: width: 1100 }} 1100w,{% endif %}
{% if article.image.width >= 1500 %}{{ article.image | image_url: width: 1500 }} 1500w,{% endif %}
{% if article.image.width >= 2200 %}{{ article.image | image_url: width: 2200 }} 2200w,{% endif %}
{% if article.image.width >= 3000 %}{{ article.image | image_url: width: 3000 }} 3000w,{% endif %}
{{ article.image | image_url }} {{ article.image.width }}w
"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw"
src="{{ article.image | image_url: width: 1100 }}"
loading="eager"
fetchpriority="high"
width="{{ article.image.width }}"
height="{{ article.image.height }}"
alt="{{ article.image.alt | escape }}"
>
</div>
</div>
{%- endif -%}
フィーチャーイメージの表示
featured_imageブロックでは、記事に画像がある場合に画像を表示します。画像のレスポンシブ設定を行い、異なるデバイスサイズに対応するためのsrcset属性を設定しています。
{%- when 'title' -%}
<header class="page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
{{ block.shopify_attributes }}
>
<h1 class="article-template__title">{{ article.title | escape }}</h1>
{%- if block.settings.blog_show_date -%}
<span class="circle-divider caption-with-letter-spacing">
{{- article.published_at | time_tag: format: 'date' -}}
</span>
{%- endif -%}
{%- if block.settings.blog_show_author -%}
<span class="caption-with-letter-spacing">
<span>{{ article.author }}</span>
</span>
{%- endif -%}
</header>
タイトルとメタ情報の表示
titleブロックでは、記事のタイトル、公開日、著者名を表示します。block.settings.blog_show_dateとblock.settings.blog_show_authorの設定に基づいて、公開日と著者名を表示するかどうかを制御しています。
{%- when 'content' -%}
<div class="article-template__content page-width page-width--narrow rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
>
{{ article.content }}
</div>
記事コンテンツの表示
contentブロックでは、記事の本文を表示します。リッチテキストエディタ（RTE）クラスを適用し、アニメーション設定が有効な場合はアニメーションクラスを追加しています。
{%- when 'share' -%}
<div class="article-template__social-sharing page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
>
{% assign share_url = request.origin | append: article.url %}
{% render 'share-button', block: block, share_link: share_url %}
</div>
{%- endcase -%}
{%- endfor -%}
ここまでで、既存のmain-article.liquidについてはざっくり理解できたかと思います。
それでは次に、こちらのブログにデザインテンプレートを当てて、ブログテンプレートを作成していきましょう。
ブログテンプレートの作成
それでは、ブログテンプレートを作成していきます。
Shopify のブログは、基本的にはarticleタグで囲われています。
そのため、先ほどのarticleタグをCSSで指定して、h2・h3・ul・ol・table 等に対して、デザインを当てていくことになるかと思います。
liquid ファイル内で CSS のスタイルを当てるときは、{% style %}と{% endstyle %}で囲う必要があります。
以下が、ブログテンプレートのサンプルです。
{% style %}
article h2 {
padding: 10px!important;
padding-left: 10px;
padding-right: 10px;
overflow-wrap: break-word;
}
article h3 {
padding: 10px!important;
overflow-wrap: break-word;
}
{% endstyle %}
上記のようなコードを、main-article.liquidの中に書けば、Shopify のブログテンプレートを作成することが可能です。
具体的なデザインテンプレートのコードはここでは割愛しますが、基本的には巷のCSSのコードがそのまま使用できます。
また、コーディングで実装するのが難しい場合は、Shopify のブログテンプレートを使用することができる Shopify アプリを使用することをお勧めします。
Shopify アプリでブログテンプレートを作成
それでは次に、Shopify アプリでブログテンプレートを作成する方法について解説していきます。
今回紹介するアプリは、シンプルブログ記事カスタマイズ｜お手軽ブログテンプレートというアプリです。
以下の公式のご利用ガイドが参考になりました。
それでは、こちらのアプリの機能について解説していきます。
シンプルブログ記事カスタマイズ｜お手軽ブログテンプレートの機能
ここからは、シンプルブログ記事カスタマイズ｜お手軽ブログテンプレートの機能の紹介になります。
アプリは非常にシンプルで使いやすいので、サクッと紹介します。
以下が、Shopify 公式のアプリストアです。
こちらのアプリは、以下のようなブログテンプレートをノーコードで作成できるアプリになります。
見出しのデザインを、スキーマで変更することができます。
恐らく、スキーマに応じて異なるクラスを、ブログの各HTML要素に付与することで、こちらのアプリは実装されています。
見出しデザインと同様に、箇条書きリストのデザインや、番号付きリストのデザイン、引用のデザインや用のデザイン等、様々な種類のデザインテンプレートが用意されています。
Shopify でブログテンプレートを利用する際には、選択肢の一つになるかと思います。
最後に
今回は、コーディングでブログテンプレートを作成する方法と、Shopify アプリを用いてブログテンプレートを利用する方法を解説しました。
お疲れさまでした。
Discussion