Shopifyを利用している方にとって、ブログカードの表示を最適化することは重要なポイントです。特に、ブログ記事の説明文が長すぎると、ユーザーの閲覧体験を損なう可能性があります。本記事では、ShopifyのDawnテーマやRiseテーマを使用している場合に、ブログカードの説明文に文字数制限をかける方法を詳しく解説します。これにより、説明文が特定の文字数を超える場合に自動的に「…」で省略され、見やすく整った表示を実現できます。
ブログカードとは
本記事では、DawnテーマやRiseテーマなどで利用できる「ブログ記事」セクションを利用して表示されたブログ記事のことを「ブログカード」と呼称してます。
ブログカードに文字数制限をかける方法
本章では、ブログカードのブログ記事説明文に文字数制限をかける方法を紹介します。
アウトプット
本記事で紹介する方法を実施することで、ブログカード内のブログ記事説明文が40文字を超える場合に、超えた部分を「…」と省略して表示することができます。
変更前：ブログカードに文字数制限を実施する前
改善後：ブログカードに文字数制限を実施後
前提
本記事で紹介する方法は、Riseテーマへの対応方法となります。
そのため、他のShopifyテーマの場合は、紹介する設定方法でうまく機能しない場合がありますので、ご理解ください。
DawnテーマなどShopifyが提供しているShopifyテーマに関しては、本記事の方法で文字数制限を実施できる可能性が高いと考えています。
文字数制限をかける方法
(1)オンラインストア > テーマの順にアクセス
(2)文字数制限をかけたいテーマの三点リーダーをクリック
(3)「コードを編集」をクリック
(4)コード編集画面より、「article-card.liquid」のファイルを選択
(5)「article-card.liquid」内の以下のコード箇所を探す
{{ article.excerpt | strip_html | truncatewords: 30 }}
{{ article.content | strip_html | truncatewords: 30 }}
(6) (5)のコードを下記のコードに修正
{{ article.excerpt | strip_html | truncate: 40, '…' }}
{{ article.content | strip_html | truncate: 40, '…' }}
※ 文字数制限の制限数を調整する際には、「 truncate: 40」の数字を適宜書き換えてご利用ください。
(7)「保存」をクリック
最後に
本記事では、Shopifyのブログカードに文字数制限をかける方法について説明しました。DawnテーマやRiseテーマを使用している場合、簡単なコードの編集で説明文を特定の文字数に制限し、超過部分を「…」で省略することが可能です。これにより、ユーザーにとって見やすく、情報が整理されたブログカードを提供できます。他のテーマを使用している場合は、同様の手順でうまく機能しない可能性があるため、注意が必要です。文字数制限を調整する際は、コード内の数字を変更することで柔軟に対応できます。
最後に、下記のブログ記事では、Shopifyのブログ機能の特徴やメリット、活用事例などを紹介しています。ご参考にしてしてください。
