# ブログ記事リスト ### Shopifyブログ投稿リスト要素について 概要：[Shopifyブログ投稿リスト](https://help.pagefly.io/manual/shopify-elements-blog-posts/) 要素を使用すると、Shopifyストアから単一のブログ、またはブログのリストをページに挿入できます。スライドショーとして表示することも可能です。何よりも、ブランドストーリーを宣伝したり、今後のコレクションを発表したりできます。その結果、コンバージョン率を高めることができます。 さらに、この要素を使用して、他のページ（例：ランディングページ）でブログを宣伝することもできます。 詳細な手順に進む前に、以下の動画をご覧ください。 {% embed url="" %} ### ブログ投稿リスト要素へのアクセス方法 3つのステップがあります。 * ステップ1：**要素**関数をクリックします。 * ステップ2：**Shopify**セクションで、ドロップダウンメニューの**ブログ投稿リスト**要素をクリックします。 * ステップ3：要素をページエディターにドラッグ＆ドロップし、使用を開始します。 {% hint style="info" %} サイドバーで要素を見つける代わりに、検索機能を使用して検索できることに注意してください。 {% endhint %} ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-d91600eb8a8a1a5a62f04d8b83fbc54d68e5e998%2FAD_4nXfYyOXtYSHWfNBGJ-p_echBtlTEs1B8_Z8xcQB9d7qjWaIK_LWk5oMXPqwU0TIk2bvtiE2XASmZwnX2ozrjI90FALGqqeOZAkWuVviTDkorNGQUCKVG1eQs-BAQG2iGK6VYMUAKlQ4KTLbO1RCokeyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) ブログ投稿リスト要素には、5つの一般的なバリエーションがあります。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0d755ff36a9b7d7cc4c67fd4a57290e4b9fd37f2%2FAD_4nXe6x8r_8NwVOmdkmCK6siShQI75kI94oL8cm-CikbzS9Q1-hRBr9ytetshgxiMzbzCs4voPMKsNyi86Co95NtiWH5cE8zUj3wdemUoVFq2bTlLW-Yyw0HMFeHxryPnnnOoRDNXpP1F0fgcp9M0_keyY09AHgQeFY-yg9XRvP4Smw.png?alt=media) ### ブログ投稿リスト要素の設定方法 ブログ投稿リスト要素は、編集可能なレイアウトを備えた多くの変数を提供するため、ページのコンバージョン率を向上させることができます。この記事では、ブログ投稿要素の「一般」タブと「スタイル設定」タブのパラメータについて説明します。 #### 一般設定 **レガシーエディター** 基本的なエディターを使用している場合は、以下のブログ投稿リスト要素の設定方法を確認してください。 * カスタムブログ：「**ブログを選択**」ボタンをクリックし、目的のブログ投稿リストを選択して「**選択**」をクリックします。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXeHE7xuF0CCQk-pLzVqLCksGQzrgEzsF2Ad5OO-iZEVlIkpcvZluJPNZm_NDdqZ4qWCcpGjmxJY2HV78-wp3tYbJJWCIabmP756oZTa-gpnrvP77zLAChhckl0fBs-NjtIJmL-JJynSpq4NMDDIQkeyY09AHgQeFY-yg9XRvP4Smw.gif) * **読み込みあたりの項目数**：バーをドラッグするか、ボックスに数値を挿入して、表示されるブログ投稿の数を調整できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-18afe68641f8196f7c9352b4af5ec9ed9a47f82a%2FAD_4nXc6AC1mhHwgzIspBjS_543fBhU-8VHKYpRGFuNSAN-LJWmSWHqtXiEiylZp3LTIOxMqzspckHAodm-EJ1Xx2pSgl1qgR8AViprGNd1Z0RjstVPZSMIjek_r8vPcr6O915UUV8Wp_ci8zuH-cft6rAkeyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) * **レイアウトタイプ**：グリッドとスライドショーの2つのレイアウトタイプがあります。 {% hint style="info" %} **注意**：異なるデバイスに対して異なるレイアウトタイプを選択できます。たとえば、すべてのデバイスに対してはグリッド、モバイルに対してはスライドショーなどです。 {% endhint %} ![blog post](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-52c27e0617c531eda604aeeba8bdca372fd4d096%2Fblog-post.png?alt=media) * グリッドレイアウトを選択した場合、以下の設定を続けます。 |

行あたりの項目数：各行に表示される項目数を調整します。

注意：この設定は、異なるデバイスタイプ（例：デスクトップ、タブレット、モバイル）ごとに個別に設定できます。

| ![PageFly blog post list element](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b33b78f1ed6f6809d80460be335be6be20a634f6%2FAD_4nXfT28FJZ_dFu0ghdq4a3604OK0Pa9Hc0-xFSawwhulHRZjWUTMoi9_ee64Rk9EdsEI-ksmwtICyyl1jj4Z5gTtXXpOnt4UOz3QQO8RqFIBRjPLk0xn47ZoMSLfK301B2r_AALPG8WEWg4DKXH-XJQkeyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |

項目間のスペース：ブログ投稿リスト内の項目間のスペースをカスタマイズします。

注意：この設定は、異なるデバイスタイプ（例：デスクトップ、タブレット、モバイル）ごとに個別に設定できます。

| ![PageFly blog post list element](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-d180bd117c4600c8eb80ea72ce32f6e1e15a04d9%2FAD_4nXcQMUnJvMWIXhysMLi6JekG_YF7qVu6dZPYGgxZboAk5SCdoqftrgyqTm1xh3Z8GWGWt0s1x2DWxCTVJucN2XPM9DmGyMoShNUisNMEUO9eGSiHnFDRxhhhhYg6CLlse0d4a8lZp9au4UYEFDnoHQkeyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) | | **現在のブログ投稿を除外**：このオプションはブログ投稿ページでのみ利用可能で、現在のブログ投稿がリストに含まれるのを防ぎます。 | ![PageFly blog post list element](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a7a80ed06a83f827423ade3dcbb1da3e718070c1%2FAD_4nXfdLqwq8EODMWofH6crl8893z5WP6jIAUSlRV_DnjY-B-aq85LolUAOJMSVtZt4wmLJvzUT8L5aaAmMMgfeGUCWo52epK5llNr_4yFYjeWolh5RQdjNtilKcoThCIbTwXMiXy93053IjqjR7bVwkeyY09AHgQeFY-yg9XRvP4Smw.png?alt=media) | |

順序を反転：項目を新しい順から古い順、またはその逆に反転させます。

注意：デフォルトでは、ブログ投稿リストは新しい順から古い順に並べられます。

| ![PageFly blog post list element](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-db0f4be1010a4d61ebda3f9594c8f9b247782be0%2FAD_4nXdD4nr8D63z4F6QuIJcRfQnqoZ0mVahONF8W0lEKj4HZPfaz4bNFgECGZJScEaZYfrP0rTo287PqK32ulgBBsMnzsiqI2AAqP-SnaZvxpDKpXECYtsjxcELzXS_X6SlVUXz_z7ItVtroTNznuFCkeyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) | |

読み込みモード：

- なし：デフォルトオプションです。

- ページネーション：ブログ投稿リストをナビゲートするためのページ番号を表示します。この機能は公開ページでのみ機能します。

- さらに読み込む：「さらに読み込む」ボタンを表示し、必要に応じてユーザーが追加の項目を読み込めるようにします。この機能は公開ページでのみ機能します。

| ![PageFly blog post list element](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ef15e72f5d83c2e0afb15a3487347824a765bab4%2FAD_4nXeReaZFYnvJiv_OZj1tcw7Mxw4kwe0YxW8kfB-M0_R2eSrwiif6l2yd1_LJwNb4ET5q_q5eUWSIXoGfW17J9mEumwPUcLtzlVpcCnByqbAPVSgm9b5WQwnhkqMAsAxjZACo8C1C39dLtM7ZVqTxDwkeyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) | * **スライドショー**レイアウトを選択した場合、以下の設定を続けます。 |

- 表示される項目数：表示したい項目の数を調整できます。

- スクロールする項目：一度にスクロールする項目の数を指定します。

- 項目間のスペース：ブログ投稿リスト内の項目間のスペースをカスタマイズします。

注意：これらの設定は、異なるデバイスタイプ（例：デスクトップ、タブレット、モバイル）ごとに個別に設定できます。

| ![PageFly blog post list element](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXeuXqjffgVrqRCEBZXqc3zfNcT5GtTZvGCpJwi1eQH-o5hcesScy1ENpPo0eXCQsXXgqkxaSeCmYJTZrgkIqMTRclcZDjiqN3dCjHRXUiSDtXfSTelg0gRhKh40VeaxbArYZ7Aae5m_C3oolR26AkeyY09AHgQeFY-yg9XRvP4Smw.png) | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **部分的な項目を表示**：部分的な項目の表示を有効にするかしないかを選択できます。この機能を有効にすると、水平スクロールでまだ商品があることを顧客に知らせることができます。 | ![PageFly blog post list element](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b28095ac1cf6a80c41a804a0e7742a5af84b19de%2FAD_4nXeRSAqwklA1p2r3yePVurwAesx940kxPEXERiUUsr91jsmkN7T4u17qsAbWmzUXmKuuZIbDU9zE0Ncqx5efGwE0gj9l7esGL9voi5Fz5zLgK70YjnMCZDqUjGEKNcAZrq8lAvjDxdSJohggnqmn5gkeyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) | |

- ナビゲーションタイプ：ブログ投稿リストのスライドショーには、6つのナビゲーションタイプを選択できます。

- ページネーションタイプ：3つの定義済みタイプの中からページネーションタイプをカスタマイズできます。

| ![PageFly blog post list element](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-09d489b401334f803f2f95e2ce66d1f9be6698af%2FAD_4nXfJU6o_KmJ-GNaNnTEfLoXLtEikOlSlIK1VP7NGyB5qK2uRc3o92lpZcDlDTuCQXCdyjWIsuuQqAzF_alJfkYBYAJaj7KBeHIKJRVF8k-8RhjR6zEcfdSHVhETZ4GV4YchbHTs0lvZaXUIjSfoizgkeyY09AHgQeFY-yg9XRvP4Smw.png?alt=media) | |

- 現在のブログ投稿を除外：このオプションはブログ投稿ページでのみ利用可能で、現在のブログ投稿がリストに含まれるのを防ぎます。

- 順序を反転：項目を新しい順から古い順、またはその逆に反転させます。

注意：デフォルトでは、ブログ投稿リストは新しい順から古い順に並べられます。

| ![PageFly blog post list element](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-eb49ff911e0ab2e58d44843f5432230dbd2d7a33%2FAD_4nXf9JGWmVPgDQK7TDva3e24RhkTs5BMPVR7DeVIffduLSIjvsSKy4Ym_s6OBRQpzjUaZi00P8r6n8wclKSehkEG8WKiw05IsD4ot5bRbyjuPQMeZ0DI6jdxGLvqNVP5HjrqEK-pZZUGuLhJY4r68keyY09AHgQeFY-yg9XRvP4Smw.png?alt=media) | | **最大高さを設定**：有効にすると、スライドショーの高さは、非表示のものを含め、最も高いスライドの高さに一致します。有効でない場合は、3つの垂直方向の配置タイプを選択できます。 | ![PageFly blog post list element](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0e88a6e00b53df23d7643bd8fbf2b73a51b1b7ee%2FAD_4nXcVpj2j1NHwQjOZNqRvOeWZ4sGGBjnnamaNhjDoab99Ae5qblMTzY-vSpusxpS72VjGlJ0fxhHS1pEpls7nmPHj14r0CSLXr-F03P7rXALD2ESmXwJkZbogp5X6hOLb7TI1t7SzkSOSsVUYD47pygkeyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) | **Gen 2エディター** PageFlyのフレックスエディターの「一般」タブは、基本的なエディターと同じパラメータを多数共有していますが、追加機能とわずかに異なるパラメータの順序を提供します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-47d5d342f24c43cbcc394d12044288557c18fec1%2FAD_4nXfmv3LbRDlJg4sHrC0id8ZsrGIJq4ap7TNq0rL1SsjdFqueJet9MT80t53iA36D0mg-uWYD0zsXsCxx_aZncZ2ZBcaeL9sSafO6CiPDLwsTvLHdME9UETel5NuZhirPt6WZXXtkYMyTV0sovaWGlQkeyY09AHgQeFY-yg9XRvP4Smw.png?alt=media) 具体的には、フレックスエディターはグリッドレイアウト設定に対して以下の追加オプションを提供します。 * **最終行を埋める**：グリッド内の項目の最終行が、前の行の幅に合わせて埋められるかどうかを決定します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ef36cccdd8952734049182877d50c2a3517604a9%2FAD_4nXfJF39Ed5tkiz7Hi00gN1V8GHWZmCSzpPIWgHsDccOiFg4IyIKRPjf9cmOm-SpwdlbHGZ3UNXiO6iKLlrc-E2Fx5xhyXPb4wER4U-C8liM4Li6XDqBKqt-scO6NLBiN_JMrADX05tSLcvu6B6J4keyY09AHgQeFY-yg9XRvP4Smw.gif?alt=media) * **配置**：レイアウト内の要素の配置を制御できます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcxM8LVi9Tmxcc7kAcyW5K6Z6mCyfPdsfMptYG2Gflk_t5wCjKOvMjLVIDLyibbF_PRW94We7HAnCrhe7S_evkVDiGSZO66ypeearFJ13mjXnhgcNMdEipQX36Xz4tGpWZqrvKABXEgj2Poy0U4LwkeyY09AHgQeFY-yg9XRvP4Smw.gif) これらの追加機能を活用することで、要素に対してよりカスタマイズされた視覚的に魅力的なレイアウトを作成できます。 ATTRIBUTES、VISIBILITY、ANIMATIONパラメータに関する詳細は、[こちら](https://help.pagefly.io/manual/elements-general-settings/)で確認できます。 #### スタイル設定 スタイル設定タブでは、間隔、境界線、タイポグラフィ、色など、さまざまなパラメータを変更して、ブログ投稿リストがページの全体的なレイアウトと一致するように保証できます。 スタイル設定の詳細については、この[PageFly要素スタイル設定ガイド](https://help.pagefly.io/manual/elements-style-settings/)で確認できます。 ### 一般的なケース ユーザーは、要素にリストされているブログ投稿内に明確なコールトゥアクション（CTA）を含めることを怠らないようにする必要があります。説得力のあるCTAは、訪問者に購入、ニュースレター登録、カスタマーサポートへの連絡など、望ましい行動を取るよう促します。ブログ投稿内に適切なCTAを組み込むことで、訪問者をコンバージョン行動に導き、ブログ投稿リスト要素の効果を最大化できます。 ### よくある質問 **1. Shopifyでのブログ投稿リスト要素の主な機能は何ですか？** Shopifyブログ投稿リスト要素を使用すると、Shopifyストアから単一のブログ、またはブログのリストをページに挿入できます。スライドショーとして表示することも可能です。何よりも、ブランドストーリーを宣伝したり、今後のコレクションを発表したりできます。その結果、コンバージョン率を高めることができます。 **2. Shopifyストアでのブログ投稿リストの外観をカスタマイズすることは可能ですか？** はい、Shopifyではブログ投稿リストの外観をカスタマイズするオプションが提供されています。レイアウト、フォント、色などを調整して、ストアのブランディングとデザインの好みに合わせることができます。 **3. Shopifyのブログ投稿リストへの訪問者のエンゲージメントを促進するにはどうすればよいですか？** ストアのナビゲーションメニューを通じてブログ投稿リストを宣伝したり、ホームページに掲載したり、個々の投稿をソーシャルメディアで共有したり、オーディエンスからのコメントやフィードバックに積極的に応答したりすることで、ブログ投稿リストへのエンゲージメントを促進できます。 ### 追加リソース [PageFlyでShopifyブログ投稿を作成する（2024年）](https://help.pagefly.io/manual/create-a-blog-post-page/) [ブログ投稿詳細要素の使い方](https://help.pagefly.io/manual/shopify-elements-blog-post-details/)