---
title: "ページリスト、ページ、ページ内容、タイトルレンダリングの追加"
slug: "add-page-list-pagination-page-content-and-title-renderings"
abstract: "ページコンテンツレンダリングを活用してください"
---
# ページリスト、ページ、ページ内容、タイトルレンダリングの追加

SXAツールボックスの **ページコンテンツ** セクションには、ページにコンテンツを追加するのに役立つさまざまなレンダリングが含まれています。例えば、リスト、ページ、タイトルを表示するレンダリングなどです。

## ページリストレンダリングの追加および設定

ページリストレンダリングは、あらかじめ定義されたSitecoreクエリによるあなたのサイトのページの階層的なツリーリストを表示します。例えば、ページリストレンダリングを使ってサイトのサイトマップを表示したり、製品の種類の概要を表示したり、ブログ投稿内のページ一覧を表示したりできます。

リストにどのページが表示されるかを設定したり、目標ごとに異なるスタイリングオプションを選べます。例えば、サイトマップ用にすべてのページをシンプルにネストしたリストにしたいかもしれません:

![2360F548A3014A0CB44B95D2FDAC2608.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/2360F548A3014A0CB44B95D2FDAC2608.png)

タイトル、説明、サムネイル、詳細を含むより詳細なリストを作成することもできます:

![83AE2DAC095A4A0583BE79118DD1144D.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/83AE2DAC095A4A0583BE79118DD1144D.png)

ページリストレンダリングを追加・設定するには:

1.  ツールボックスからページリストレンダリングをドラッグしてページに移動します。
    
2.  フローティングツールバーで **「コンポーネントプロパティの編集**」をクリックします。
    
3.  **一般**セクションでは、以下のフィールドを編集してリストに載せたい項目とその外観を決めてください:
    
    -   **ソースタイプ** – Sitecoreのクエリをクリックしてください:**Children**, **Siblings**, またはItems with **the same template**
        
        デフォルトでは、ページリストレンダリングは自身の子を表示します。
        
        ![FD3B6EA3D1BA4F599A15CB30C316AD7F.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/FD3B6EA3D1BA4F599A15CB30C316AD7F.png)
        
    -   **ページサイズ** – 表示したいページ数を入力します。例えば、膨大なアイテムリストから最初の15項目だけを表示したい場合は15と入力してください。
        
4.  複数の表示オプションをすぐに使えるようにするには、**コントロールプロパティ** ダイアログボックスの **スタイリング** セクション(またはフローティングツールバーから)で、ページリストレンダリング用のバリアントを選択してください。
    
    例えば、入れ子リストを表示するシンプルなバリアント、ページタイトルと説明を表示するバリアント、またはサムネイルも表示するより詳細なバリアントを選択できます。
    
    ![00A3BBDC683C4B36A12ACFC63B631951.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/00A3BBDC683C4B36A12ACFC63B631951.png)
    

また、ページリストのツールバーから直接バリアントを選択することもできます。「 **コンポーネント選択** 」ドロップダウンをクリックすると、バリアントのプレビューが表示されます。

![4FC2B0B647224B8482E842704FD214B6.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/4FC2B0B647224B8482E842704FD214B6.png)

デフォルトでは、ページリストコンポーネントは現在のページ上でレンダリングされます。例えば異なるページのタグを切り替えたい場合は、プレースホルダーを含むページリストのバリアントを作成する必要があります。このプレースホルダーに対して、プレイスホルダー内でレンダリングのコンテキストを切り替えられるようにできます。

## ページネーションレンダリングの追加と設定

ページ内表示では、ページリスト、イベントリスト、ファイルリストのレンダリングにページを追加できます。ページ数を反映し、ページに直接移動したり、追加ボタン(**「先」**「**前→****次**→**最後**)」を使ったりできます。

ページリストにページ番号を追加するには、**リスト** 署名フィールドを使って既存のリストレンダリングをページ化でマッピングする必要があります。デフォルトではページ番号なしのページ番号表示はデフォルトリストを表示します。

> !注リストに複数のページネーションレンダリングを付けることができます。

ページ付けを加えると:

1.  ページにページネーションのレンダリングをドラッグ&ドロップします。
    
2.  フローティングツールバーで **「コンポーネントプロパティの編集**」をクリックします。
    
3.  ページ表示の方法を決めるには、以下のフィールドを編集してください:
    
    -   **ページサイズ** – 表示するリストアイテムの数を決めるために数字を入力してください。
        
    -   **折りたたみページ設定閾** 値 – ページ数を超えるページ数を入力してください。ページリストが長い場合は、ページツリーを折りたたむのが良いアイデアです。例えば、**リスト署名** フィールドを**foldapsed-pagination**に設定し、**折りたた** みページ設定の閾値欄で3を入力してください:
        
        ![CAEB56484725415FBD8CF6F3292B72EA.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/CAEB56484725415FBD8CF6F3292B72EA.png)
        
    
    > !注すべてのページを表示するには-1を入力してください。ページ番号を表示せず「次/前」ボタンのみを表示する場合は、0を入力するか、このフィールドを空にしてください。
    
    -   **リスト署名** – ページを特定のリストレンダリング(例えば、**折りたたみ**ページ)にマッピングするための一意署名を入力します。
        
        ![076296397FE140929D8858A750C29BCD.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/076296397FE140929D8858A750C29BCD.png)
        
    -   **オフセット** – スキップしたい項目数を入力してください。
        

## タイトルレンダリングの追加と設定

タイトルレンダリングは現在のページのタイトルまたはサブタイトルを表示します。ツールボックスからページにドラッグすることで、ページのどこにでもタイトルレンダリングを追加できます。デフォルトでは **タイトル** フィールドはページ名を名乗りますが、異なるレンダリングバリエーションを追加したり、異なるデータソースを選択したりできます。

タイトルレンダリングの追加と設定:

1.  ツールボックスからタイトルレンダリングをページにドラッグします。
    
2.  異なるデータソースを選択したり、バリアントを使う場合は、浮動ツールバーに移動し、「 **コンポーネントプロパティを編集**」をクリックしてください。
    
    例えば、フォールバック機能付きのレンダリングバリアントを選択するには、**バリアント** フィールドで **「フォールバック付きのページタイトル**」をクリックします。すべてのページにタイトルが含まれていない場合、これは便利です。タイトルが定義されていない場合はナビゲーションタイトルが表示されます。このフィールドも空の場合は表示名が表示され、それが失敗した場合はカスタムテキストメッセージが表示されます。
    
    ![3361A34DE2144185ADAF0C1F7757B54C.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/3361A34DE2144185ADAF0C1F7757B54C.png)
    
    ![762DE0CC50BC4A81BA7DACFFB27ABEEC.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/762DE0CC50BC4A81BA7DACFFB27ABEEC.png)
    

## ページコンテンツレンダリングの追加および設定

ページのコンテンツは、**タイトル**、**ヘッダー**、**フッター**、**画像** などのフィールドとしてSitecoreに格納されます。ページコンテンツレンダリング機能では、コンテンツを最適な場所にドラッグ&ドロップでき、レンダリングバリアントのおかげでドロップダウンリストから適切なフィールドを簡単に選択できます。

> !注デフォルトでは、ページコンテンツレンダリングにはデータソースが指定されていません。ページテンプレートによっては、レンダリングに置いたページのフィールドが表示されます。
> 
> ページコンテンツレンダリングはコンテキストアイテムに存在するフィールドを表示し、現在のページにデータが含まれているため、マッピングは不要です。もしデータソースを別のページに向けると、そのページのフィールドが使われます

ページコンテンツレンダリングの追加および設定:

1.  ツールボックスからページコンテンツレンダリングをページにドラッグします。
    
2.  フローティングツールバーで「 **コンポーネントプロパティを編集**」をクリックします。デフォルトでは、ページコンテンツレンダリングは最初に利用可能なレンダリングバリアントを使用します。
    
3.  データソースとバリアントを選択して、欲しい内容を決めてください。また、ツールバーからバリアントを直接選択することもできます:
    
    ![3A236EE46C0C45A4B55359464F5E3A32.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/3A236EE46C0C45A4B55359464F5E3A32.png)
    

> !注部分的なデザインでページコンテンツレンダリングを使うと、どのページからもフィールドをレンダリングできます。