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

このビデオで学べること

  • Plain Jane または Interactive で最近のブログ投稿を表示する方法

  • レイアウト、タイポグラフィ、スタイリングをカスタマイズする方法


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

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

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

  1. Shopify管理画面から、次へ移動します オンラインストア > テーマ

  2. をクリック カスタマイズ アクティブなテーマの横

  3. 上部のドロップダウンを使用して、追加したいページを選択します

  4. 左側のサイドバーで、をクリックします セクションを追加

  5. を選択します ブログフィードセクション

  6. をクリック 保存


ブログフィード設定

📁 コンテンツとデータ

  • ブログ: 投稿を表示するブログ(Shopify 管理画面から)を選択します

  • ブログヘッダータイトル: ブログフィードの上に表示されるタイトルをカスタマイズします(例:「From Our Journal」)

🖥️ レイアウトと表示

  • 表示する投稿数 – デスクトップ: 大きな画面で表示する記事の数

  • 表示する投稿数 – モバイル: 小さな画面で表示する記事の数

✍️ タイポグラフィ

  • タイトルサイズ – デスクトップ / モバイル: ブログヘッダーのテキストサイズを調整します

  • セクションタイトルを太字にする: ブログタイトルを太字にするトグル

🎨 色

各ブログ記事のコンポーネントの外観をカスタマイズします:

  • 背景色

  • ブログタイトルの色

  • 記事行の背景色

  • 記事の境界線の色

  • 著者テキストの色

  • 記事タイトルの色

  • 記事の日付カラー

  • 記事タグの背景/テキスト/境界線の色

💅 スタイリング

  • 記事タグの角丸(ボーダー半径): 記事タグ背景の角を丸くします

📏 間隔

セクションの上下にどれだけのパディングを表示するかを設定します:

  • 上下の間隔 – デスクトップ

  • 上下の間隔 – モバイル

🧑‍💻 カスタム CSS

を使用して、 カスタム CSS フィールドに独自のスタイルを入力してセクションを微調整できます。


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

ヘルプが必要ですか?

  • 💬 Discordでコミュニティに参加: https://discord.gg/hcc2GvgZc6

  • 📧 メールでお問い合わせ: [email protected]

  • 💻 ライブチャット: 月曜〜金曜、午前10時〜午後6時(EST)に当社ウェブサイトで直接利用可能

最終更新