ダイナミックフィルター（Dynamic）と動的ページを組み合わせて、カテゴリーごとに記事を絞り込む一覧ページを作成できます。 この記事では、カテゴリー別の記事一覧ページの作成手順を説明します。 あわせて、すべての記事を表示する一覧ページの作り方も紹介します。
Point: Studio CMSとは
Studio CMSは、Studio上でコンテンツを構造化して管理・更新できるCMS（Content Management System）機能です。 モデルやアイテム、プロパティを組み合わせて、ブログやニュースなどの更新性が高い記事コンテンツを一元管理します。
Studio CMSの仕組みや基本的な使い方は、以下の記事も参照してください。
カテゴリー別記事一覧ページとは
カテゴリー別記事一覧ページは、特定のカテゴリーに属する記事だけを自動で絞り込んで表示するページです。 「イベントの記事だけ見たい」などのニーズに応え、目的の情報に素早くたどり着けるようにします。
トップページや記事詳細ページからリンクすると、サイト内の回遊性が高まります。結果として滞在時間の増加やSEO評価の向上も期待できます。
Studio Showcaseの例：「イベント」「ブログ・メディア」「ポートフォリオ」「コーポレートサービス」「店舗・商品」のカテゴリー別に一覧ページがあります。
カテゴリー別記事一覧ページは、動的ページに配置したCMSリストを、ダイナミックフィルター（Dynamic）で絞り込んで作成します。
Point: Studio CMSの機能
ダイナミックフィルター（Dynamic）とは
ダイナミックフィルター（Dynamic）は、動的ページに配置したCMSリストの表示アイテムを自動で絞り込むフィルターです。ページで表示中のCMSアイテムに応じて、フィルター値が自動で切り替わります。
動的ページとは
動的ページは、Studio CMSなどの接続したデータを元にページを自動生成する専用のページです。記事・求人情報・イベント情報など定期的に更新が必要なコンテンツを管理・公開できます。
事前準備
この記事で紹介する手順は、CMS記事コンテンツを作成済みであることを前提としています。以下について対応済みであることを確認してください。
CMSダッシュボードで、記事タイプのCMSモデル（記事モデル）とCMSアイテム（記事アイテム）を作成します。
デザインエディタで、記事モデルを紐付けた動的ページ（記事詳細ページ）を作成します。
カテゴリー別の記事一覧ページを作成する
記事アイテムをカテゴリーで分類し、カテゴリーのモデルを接続した動的ページにCMSリストを配置して作成します。
Tips：すべての記事を表示したい場合
すべての記事をまとめて表示する一覧ページは、カテゴリー別記事一覧ページとは作り方が異なります。詳細はすべての記事を表示する一覧ページを作成するを参照してください。
手順 1. 記事アイテムをカテゴリーで分類する
参照プロパティを使い、記事アイテムにカテゴリーを設定します。
Studio CMSのプロパティ活用例：記事アイテムにカテゴリーやタグを追加するを参考に、カテゴリーモデルを作成します。
記事モデルに、カテゴリーモデルを参照する参照プロパティを追加します。
各記事アイテムに、カテゴリーを設定します。
注意：参照プロパティはシングルセレクトで追加する
参照プロパティをマルチセレクトで追加すると、[フィルター条件]に[Dynamic]が表示されません。ダイナミックフィルターを使う場合は、シングルセレクトで追加します。
手順 2. 動的ページを追加する
カテゴリーごとの記事一覧を表示する動的ページを追加します。
デザインエディタで、動的ページを追加します。
ページに紐付けるCMSモデルには、カテゴリーモデルを選択します。
カテゴリーアイテムごとに、カテゴリー別記事一覧ページが自動で作成されます。
手順 3. 動的ページ上にCMSリストを配置する
記事モデルを紐付けたCMSリストを、手順2の動的ページに配置します。
手順2で追加した動的ページを開きます。
画面左のナビゲーションで[接続]アイコンを選択し、接続パネルを開きます。
[CMS]で、事前準備で作成した記事モデルの[リスト]をクリックします。
手順 4. CMSリストにダイナミックフィルター（Dynamic）を設定する
表示中のカテゴリーに合わせて、CMSリストの記事を絞り込むために、ダイナミックフィルターを設定します。
ページに配置したCMSリスト全体を選択します。
右パネルで[データ]を選択します。パネルが閉じている場合は、右パネルを開いてください。
[フィルター]横の[+]をクリックしてフィルターを追加します。
[モデル]配下から、手順1で追加した参照プロパティを選択します。
[フィルター条件]で[Dynamic]（ダイナミックフィルター）を選択します。
[URLクエリ設定中]と表示されている場合には、鎖アイコン
（[個別に値を設定する]）をクリックしてから、入力フィールドで設定をしてください。
手順 5. CMSリストの表示を設定する
CMSリストの表示数やレイアウトを調整します。
表示数：[表示数]の初期値は「2」です。カテゴリー内の記事アイテムの件数に合わせて変更します。詳細は表示数を参照してください。
0件の表示：該当する記事がない場合の表示を設定できます。詳細は0件の表示を参照してください。
もっと見るボタン：続きの記事を読み込むボタンを追加できます。詳細はもっと見るボタン（Read more）を参照してください。
レイアウトや外観：ボックスのレイアウト設定、ボックスの外観設定を参照してください。
手順 6. カテゴリー別記事一覧ページへの動線を設定する
記事詳細ページのカテゴリーラベルから、カテゴリー別記事一覧ページにリンクします。
Studio CMSのプロパティ活用例：CMS詳細ページにカテゴリー・タグを表示するを参考に、記事詳細ページにカテゴリーラベルを追加します。
カテゴリーラベルを選択し、右パネルで[設定]を開きます。パネルが閉じている場合は、右パネルを開いてください。
[リンク]の入力欄をクリックし、手順2で追加した動的ページを選択します。
手順 7. 動作確認をする
カテゴリーごとに記事が切り替わることを確認し、サイトに反映します。
すべての記事を表示する一覧ページを作成する
カテゴリーを問わず、すべての記事アイテムを表示する一覧ページの作成方法を説明します。
カテゴリー別一覧とは異なり、静的な通常ページにCMSリストを配置して作成します。
| カテゴリー別の記事一覧 | すべての記事の一覧 |
ページの種類 | 動的ページ | 通常ページ |
CMSリストのフィルター | Dynamicフィルター | 設定しない |
手順1. 通常ページにCMSリストを配置する
すべての記事の一覧は、動的ページではなく通常ページに作成します。
一覧を配置する通常ページを、追加するか開きます。
CMSリスト：詳細ページにリンクする記事一覧を作成するの手順で、記事モデルのCMSリストを配置し、記事詳細ページへのリンクを設定します。
手順2. 表示設定をする
[表示数]と[フィルター]を設定します。
手順3. 動線を設定する
作成したすべての記事一覧への動線を置きたい箇所にテキストボックスなどを追加します。配置場所は、サイトの構成に合わせて決めます。
右パネルで[設定]を開き、[リンク]で手順1のページを選択します。
CMSカテゴリ フィルタ 動的フィルタ 絞り込み