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

### 学べること

* 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）に当社ウェブサイトで直接対応


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/english-ja/readme-1/sections-and-features/blog-feed-section.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.