# ブログフィードセクション

### 学べること

* Plain Jane または Interactive で最近のブログ投稿を表示する方法
* レイアウト、タイポグラフィ、スタイリングをカスタマイズする方法

***

この **ブログフィードセクション** 選択したブログから最近のブログ投稿のリストを表示できます。このセクションは、ホームページやセクションをサポートする任意のページで更新情報、ニュース、ルックブック、編集コンテンツを直接紹介するのに便利です。

> 💡 ヒント: このセクションは Shopify 管理画面で作成した「ブログ投稿」から取得します（下記参照） `オンラインストア > ブログ投稿`. 表示させるには投稿が公開されている必要があります。

### ブログフィードセクションの追加方法

1. Shopify管理画面から、次へ移動します **オンラインストア > テーマ**
2. クリック： **テキストの** アクティブなテーマの横に
3. 上部のドロップダウンで追加したいページを選択します
4. 左のサイドバーでクリックします **「セクションを追加」**
5. を選択します **ブログフィードセクション**
6. クリック： **保存**

***

### ブログフィード設定

#### 📁 コンテンツとデータ

* **ブログ**: 投稿を表示するブログ（Shopify 管理画面のもの）を選択
* **ブログヘッダータイトル**: ブログフィードの上に表示されるタイトルをカスタマイズ（例：「From Our Journal」）

#### 🖥️ レイアウトと表示

* **表示する投稿数 − デスクトップ**: 大きな画面で表示する記事の数
* **表示する投稿数 − モバイル**: 小さい画面で表示する記事の数

#### ✍️ タイポグラフィ

* **タイトルサイズ − デスクトップ / モバイル**: ブログヘッダーテキストのサイズを調整
* **セクションタイトルを太字にする**: ブログタイトルを太字にする切り替え

#### 🎨 カラー

各ブログ記事の構成要素の見た目をカスタマイズできます：

* **背景色**
* **ブログタイトルカラー**
* **記事行の背景色**
* **記事の境界線の色**
* **著者テキストの色**
* **記事タイトルの色**
* **記事の日付の色**
* **記事タグの背景／テキスト／境界線の色**

#### 💅 スタイリング

* **記事タグの角丸（ボーダー半径）**: 記事タグ背景の角を丸くする

#### 📏 間隔

セクションの上／下に表示される余白（パディング）を設定します：

* **上／下の余白 − デスクトップ**
* **上／下の余白 − モバイル**

#### 🧑‍💻 カスタム CSS

セクションで次を行います: **カスタム CSS** フィールドで独自のスタイルを使ってセクションを微調整します。

***

> ⚠️ 警告: 選択したブログに公開されている投稿がない場合、このセクションは実際のストアで空の状態で表示されます。

### **ヘルプが必要ですか？**

* 💬 **Discordでコミュニティに参加：** <https://discord.gg/hcc2GvgZc6>
* 📧 **メールでお問い合わせ：** <support@openspaces.design>
* 💻 **ライブチャット：** 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応