テーマエディターでのブログページのデザイン（OS 3.0 テーマ）

ブログページとブログカテゴリページでは、顧客がストアの記事を閲覧し、トピックごとに絞り込むことができるため、購入者がブランドのストーリー、ガイド、最新情報を簡単に見つけられます。両方のページはテーマエディターの同じブログモジュールから構築されているため、ほとんどのパーツと設定は両方で同じように機能します。

このガイドでは、ブログページのカスタマイズ方法、ブログカテゴリページの設定方法、およびブログ投稿プレビューのリッチテキスト概要の有効化方法について説明します。

ブログページのデザイン

ブログページは、ストアのすべてのブログ投稿をカードのリストとして表示します。テーマエディターで開くには：

1. SHOPLINE管理画面から、オンラインストア > デザインに移動します。
2. 現在のテーマを見つけて、デザインボタンをクリックし、テーマエディターに入ります。
3. 上部のページセレクターでブログを選択し、標準のブログページテンプレートを修正するにはデフォルトをクリック、または新しいレイアウトを一から作成するには+ テンプレートを作成をクリックします。

4. 左側メニューのヘッダーセクションの上にある検索フィールドまたはブログ投稿タイトルのリストを使って、プレビューするブログ投稿を選択します。

   注：このリストは、ブログモジュールで既にブログ投稿を作成している場合にのみ利用可能です。詳細は「ブログ投稿の作成と管理」をご覧ください。

5. 記事パーツをクリックして、各ブログ投稿の表示方法をデザインします。これにはタイトル、著者/時間、画像、コンテンツ、共有、「戻る」ボタン、およびレビューセクションが含まれます。

6. + コンポーネントを追加をクリックし、ブログセクションを検索して追加します。追加後、以下の設定を構成できます：

   注： ブログセクションはコンポーネントであり、ブログページ専用のものではありません。 ほとんどの他のページにも、+ コンポーネントを追加を使って同様に追加できます。ただし、チェックアウトページは除きます。 ここで構成した設定は、リッチテキスト要約を有効にするを含め、ブログセクションを追加したすべての場所に適用されます。

   • ブログ： ブログコンポーネントをクリックして、ブログセクションの一般設定を構成します。設定内容は以下の通りです：
     • ブログカテゴリ： ブログカテゴリを選択をクリックして、リストに表示する投稿のカテゴリを絞り込みます。
     • カラー： ページのカラースキームを選択するか、修正をクリックして既存のスキームを変更します。
     • レイアウト： ブログリストのページ上の配置を調整します。
     • カスタムCSS： 必要に応じてカスタムスタイルを追加します。
   • タイトル： ブログリストの上に表示される見出しテキスト。
   • ブログリスト： すべてのブログ投稿カードを格納するコンテナ。クリックして以下を構成します：
     • ブログ数： リストに表示するブログ投稿の数を設定します。
     • 列数（モバイル）： モバイルデバイスで1行あたりに表示する列数を設定します。
     • モバイルで左右スクロールをオンにする： モバイルで顧客がブログカードを左右にスワイプできるようにします。
     • モバイルスワイプスタイル： モバイルでカードをスワイプしたときの動作を選択します（例：シンプル）。
     • 列数（PC版）： PC版で1行あたりに表示する列数を設定します。
     • ブログカード： 各個別のカードは、カバー画像とブログ情報（タイトル、著者/日付ラベル、および要約）で構成されます。
   • ボタン： ブログリストの横に表示される任意のコールトゥアクションボタン。
7. 保存をクリックして設定を適用します。

ブログカードのリッチテキスト概要を有効にする

デフォルトでは、ブログページおよびブログカテゴリページの各ブログカードは、投稿のプレーンテキストの概要を表示します。これをリッチテキストの概要に切り替えることができ、ブログ投稿自体に表示される太字、斜体、リンクなどのスタイルを含む同じフォーマットされたプレビュー テキストを表示します。

リッチテキストの概要を有効にするには：

1. ブログカードのコンポーネントを選択し、左側のメニューでブログ情報 > 概要を選択します。
2. 設定パネルでリッチテキストの概要を有効にするをオンにします。

この設定がオフ（デフォルト）の場合、以下のオプションが利用可能です：

• テキストタグ：SEO目的で使用されるHTML見出しタグを設定します。これはページ上の概要の見た目には影響しません。
• レイアウト：概要に使用されるテキストスタイルを制御します。
• テキストの配置：概要テキストを左揃え、中央揃え、または右揃えにします。
• 表示ルール：概要の表示量を制御します（例：全文表示または切り詰め表示）。

この設定がオンの場合：

• 利用可能なのは表示ルールのみです。概要は代わりにブログ投稿エディターで適用された同じリッチテキストのフォーマットとSEOタグを使用してレンダリングされます。

ブログカテゴリページのデザイン

ブログカテゴリページはブログページと同様に機能しますが、特定のカテゴリに属する投稿のみを表示します。

テーマエディターで開くには：

1. ページセレクターからドロップダウンメニューでブログカテゴリを選択します。
2. 左側のパネルの検索フィールドまたはカテゴリ一覧から編集するカテゴリを選択します。
3. 左側のメニューでブログカテゴリを選択し、そのパーツを表示および修正します。

ブログカテゴリページは、ブログページと同じブログカードおよびブログ情報パーツ（カバー画像、タイトル、著者/日付ラベル、および概要）を共有しており、上記の「ブログカードのリッチテキスト概要の有効化」で説明されているリッチテキスト概要を有効にする設定も含まれています。また、ページの上部にカテゴリタイトルを表示するブログカテゴリ名パーツも含まれています。

設定パネルでは、さらに以下を設定できます：

• レイアウト：ブログカードを列に配置するにはグリッドを選択します。
• 列数（PC版）：1行あたりに表示する列数を設定します。グリッドレイアウトでのみ適用されます。
• 1ページあたりのブログ数：スライダーを使ってページネーション前に表示する投稿数を設定します。
• カラーとカスタムCSS：ブログページと同様です。