# コンテンツリスト ### コンテンツリスト要素について PageFly [コンテンツリスト要素](https://help.pagefly.io/manual/content-list-element-2/) は、同様のアイテムのスタイル設定や、事前に作成されたバリアントを使用したコンテンツボックスの構築にかかる時間を節約し、他のタスクに時間を費やせるように設計されています。 コンテンツリストを使用すると、1つのコンテンツリストアイテム内の要素をカスタマイズするだけで、そのスタイルがコンテンツリスト内のその要素に適用されます。特に、各アイテムのコンテンツを変更できます。 以下のビデオチュートリアルで詳細を確認できます。 {% embed url="" %} ### PageFly コンテンツリスト要素へのアクセス方法 * ステップ1：\[要素]アイコンをクリック > \[PageFly]タブでコンテンツリスト要素を選択 * ステップ2：希望するコンテンツリストバリアントをエディターにドラッグ＆ドロップして使用を開始します ![](/files/BO6KeeWt1D1dkrBrVZuB) コンテンツリスト要素には、ほとんどのニーズをカバーする複数のバリエーションが付属しています。しかし、時間を節約できるように、さらに多くのバリエーションを追加し続けます。 ![](/files/WaxOyAreBUtwv4DAFCtF) ### コンテンツリスト要素の設定方法 コンテンツリスト要素には、コンバージョンの可能性を最大限に高めるためにコンテンツの外観を細かく調整できる多くのパラメーターが付属しています。 レイアウトで要素を選択して設定を表示します。 ![](/files/dpRkPl8Z5KOxK9TD0jGx) #### 一般設定 コンテンツリスト要素全体を選択し、\[一般]タブに移動すると、コンテンツリスト要素を調整できる多くのパラメーターが表示されます。 **コンテンツリストアイテム** コンテンツリストアイテムは、アイテムの数を管理するために使用する場所です。このパラメーターを使用すると、コンテンツリスト要素内のアイテムを追加、移動、複製、または削除できます。 | |

アイテムの追加ボタンをクリックして、新しいコンテンツリストアイテムを追加します。

Note: コンテンツリストのアイテム数に制限はありません

| ![](/files/wIRSj8OUy5Xyj1TN9YdA) | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | | アイテムの左にある縦三点リーダーアイコンをクリック＆ホールドしてアイテムを移動し、新しい場所にドラッグします | ![](/files/Bxq7tkg9NOH5efvEQmNY) | | 各タブアイテムの隣にある2つのボタンを使用して、コンテンツリストアイテムを複製または削除します。 | ![](/files/OAQCeMGwNmY3AOy9m52Y) | **レイアウトタイプ** コンテンツリスト要素は、アイテムのリストを2つのレイアウトタイプ（グリッドとスライドショー）で表示できます。 ![](/files/vhyzqkTKKCgtDgRJp0v7) * グリッドレイアウトの場合：構造化されたグリッド形式でアイテムを配置し、顧客が一度に複数のアイテムを簡単に表示できるようにします。以下の設定オプションを確認してください： | **行ごとのアイテム数**：各行に表示されるアイテムの数を調整します。 | ![](/files/kp1elKfCkXTFNUhfGRHW) | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | | **最後の行を埋める**：このオプションをオンにすると、最後の行の要素がその行の幅全体を占有します。 | ![](/files/cJjtqvf7FGkHJJLNx6vj) | |

配置：コンテンツリスト要素内のアイテムの位置を指定します。

Note: \[最後の行を埋める]を有効にすると、\[配置]は機能しません

| ![](/files/lxXzURu660Q7LcswUWjd) | | **アイテム間隔**：アイテム間の間隔を調整します。 | ![](/files/162CQ8om1gIhWmMDMtE0) | |

高さを揃えるを有効にする：コンテンツリスト内のすべてのアイテムの高さを均等にします

Note: この機能は、PageFlyページ作成時にLegacy editorを選択した場合にのみ表示されます

| ![](/files/NOAOpxVk2na8Ej1wfKA2) | * **スライドショー**の場合：スライド式のバナー形式でアイテムを配置し、アニメーション効果を伴ってアイテムを1つずつ閲覧できるようにします。以下の設定オプションを確認してください： | **表示アイテム数**：一度に表示されるコンテンツアイテム数を設定します。 | ![](/files/oTAMhxfnnIRkfFmOLy3g) | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | | **スクロールするアイテム数**：ナビゲーションボタンをクリックしたときにスクロールするスライド数を設定します。上記の表示アイテム数の値が、スクロールするアイテム数の最大値です。 | **表示アイテム数**：一度に表示されるコンテンツアイテム数を設定します。 | | **部分アイテムを表示**：このオプションを有効にすると、前後のアイテムが部分的に表示されるようになります。 | ![](/files/v2E0XlP9da03C0BLMGKm) | |

ナビゲーションタイプ：左右の矢印ナビゲーションボタンには5つの異なるスタイルがあります。「なし」を選択してこれらのボタンを非表示にすることもできます。

Note: デスクトップおよびラップトップでは、一部のオプションはマウスオーバー時にのみ表示されます

| ![](/files/GXX7qDU35EUSONa90Bhu) | | **ページネーションタイプ**：ページネーションインジケーターには3つの異なるスタイルがあります。 | ![](/files/rwi5r9YiocZwkkfPqHU2) | | **最大高さを設定**：有効にすると、スライドショーの高さは非表示のスライドを含む最も高いスライドの高さと一致します。 | ![](/files/zF4OhZdgsZZkf4YUnyW5) | | **垂直方向の配置**：「最大高さを設定」が無効になっている場合、必要に応じてスライドを配置するために3つの垂直方向の配置オプションから選択します。 | ![](/files/glq1rdTLOnORsfGtDA1v) | | **アイテム間隔**：スライド間の間隔を調整します。この設定はデフォルトで30pxです。 | ![](/files/5SAqyGlvZRTFoalh2fco) | #### スタイリング設定 要素サイズ、間隔、境界線、タイポグラフィ、色など、\[スタイリング]タブでさまざまなパラメーターを変更して、コンテンツリスト要素がページの全体的なレイアウトと一致するように保証できます。 [こちら](https://help.pagefly.io/manual/elements-style-settings/)で\[スタイリング]タブに関する詳細を確認できます。 ### コンテンツリストアイテムの設定方法 コンテンツリスト要素の設定が完了したら、次はコンテンツリストアイテムを編集します。見出し、画像、アイコンなどの新しい要素を使用しているコンテンツリストバリアントに追加したり、使用しない要素を削除したりできます。 ![](/files/mQwBNwcng5A60yy9jVb7) コンテンツリスト要素と同様に、コンテンツリストアイテムは外観を最適化するためのさまざまなパラメーターを提供します。コンテンツリストアイテムを選択すると、\[一般]タブと\[スタイリング]タブでそのパラメーターが表示されます。 **一般**タブでは、\[アイテムを同期]ボックスで「はい」または「いいえ」を選択することにより、コンテンツリスト要素内のコンテンツリストアイテムのスタイリングを他のアイテムと同期するかどうかを選択できます。 * **はい**：コンテンツリストアイテムとその中のすべての要素が他のアイテムと同期されます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfcItoyTN3jf708ZbvGhL4wUaGVR7ME5nnu0TzJe4jly1jCQXR_-DZZ_j9H2kNary9z0w1Novybssko21CSUxNR-nvMDaylCqT5Sepxdrinzwp19AUXX5A6pUQYjfBuOH2Ii9-qxyKq9J2LKZx-ed41B2U) * **いいえ**：このオプションを選択した場合、コンテンツリストアイテムの同期を解除するために選択できるオプションが2つあります。 * すべて：これは\[いいえ]を選択した場合のデフォルトオプションです。このオプションを選択すると、コンテンツリストアイテムとその子要素の同期が解除されます。 * コンテナ：コンテンツリストアイテムのみの同期を解除し、子要素は同期されたままにします。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcewOKqfGvhN1p0htCWkxqzUfOpJXCXJII5OfglHEf53TkiB72WgAFFnoTVdaugpvbahZGT84nsnLcGofal4CisrPzNx44GWsdzCVxG6Lk8u24U6C0EC73BhVf1ryljTUXAnI0wEsuqh1gE3tSZphrjrccOo) **スタイリング**タブでは、コンテンツリストアイテム要素のサイズ、間隔、境界線、タイポグラフィ、色などを調整できます。コンテンツリスト要素 > スタイリングに移動するだけで、これらのパラメーターが表示されます。 ![](/files/2mPEa6wqViee0ULIPiuA) ### よくある質問 **1. コンテンツリスト要素とは何ですか？** PageFly コンテンツリスト要素は、同様のアイテムのスタイル設定や、事前に作成されたバリアントを使用したコンテンツボックスの構築にかかる時間を節約できるように設計されています。 ストアの信頼性を高めたい場合は、PageFly コンテンツリスト要素を使用して、Dossierのトラストバッジセクションと同じくらい印象的なものを作成しましょう。この動画でその方法を確認してください： {% embed url="" %} **2. ページにコンテンツリストを使用する必要があるのはなぜですか？** コンテンツリスト要素の目的は、長いドキュメントからコンテンツを要点に分解することです。これは、複雑で退屈なコンテンツを編集し、顧客がShopifyページをスクロールする際に喜びと興味をもたらすために不可欠だからです。 --- # 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://help.pagefly.io/pagefly-help-center-japanese/pjito/pagefly-elements/containers/content-list-element-2.md?ask= ``` 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.