Studio CMSで作成した記事ページ内に、関連記事一覧を配置する

Point: Studio CMSとは

Studio CMSは、Studio上でコンテンツを構造化して管理・更新できるCMS（Content Management System）機能です。モデルやアイテム、プロパティを組み合わせて、ブログやニュースなどの更新性が高い記事コンテンツを一元管理します。

Studio CMSの仕組みや基本的な使い方は、以下の記事も参照してください。

関連記事一覧は、あらかじめCMSダッシュボードで記事アイテムをカテゴリーで分類し、記事ページ内にCMSリストを配置してリスト内アイテムの表示条件を設定することで実現します。

この記事では、「記事アイテムをカテゴリーで分類する」「記事ページにCMSリストを置く」「CMSリストに条件を設定して関連記事だけを表示する」という3つのステップに分けて、手順を順番に説明します。

事前準備

関連記事一覧を設定する前に、Studio CMSで記事コンテンツを準備します。

CMSダッシュボードで記事を作成して公開します。
- 記事タイプのCMSモデルを作成し、記事アイテム（CMSアイテム）を追加します。
- CMSアイテムの詳細編集画面で記事アイテムの本文を入力し、カテゴリなどの関連情報をプロパティとして追加します。
- 編集が完了した記事アイテムの公開ステータスを[公開中]に設定します。
デザインエディタで、動的ページを使用して、1で作成したCMSモデルを紐付けた記事ページを作成します。

CMS記事作成から公開までの全体像は、次の記事も合わせて参照してください。

Studio CMSの記事コンテンツにカテゴリーやタグを追加するを参考に、参照プロパティを利用して記事アイテムにカテゴリーを追加します。

デザインエディタで記事ページ（記事タイプのCMSモデルの動的ページ）を開きます。
スクリーン上の関連記事一覧を表示したい位置に、CMSリストを作成します。
リストに紐づけるCMSモデルは、配置元の記事ページに紐づくモデルと同一のモデルにしてください。
リストのレイアウトや外観を編集する際は、以下のヘルプ記事なども参考にしてください。
- ボックスのレイアウト設定
- ボックスの外観設定

CMSリスト内のアイテムをフィルタリングして、元の記事ページで表示している記事アイテムと同じカテゴリーが設定された記事だけをCMSリストに表示します。

関連記事一覧として配置したCMSリスト全体を選択します（リストアイテム単体ではなくリスト本体を選択します）。
右パネルで[データ]タブを開きます。パネルが閉じている場合は、右パネルを開いてください。
タブ内、[フィルター]横の[+]をクリックしてフィルターを追加します。
プルダウンリスト内の[モデル]配下から、参照プロパティを選択します。
[フィルター条件]で[Dynamic]（ダイナミックフィルター）を選択します。
[URLクエリ設定中]と表示されている場合には、鎖アイコン（[個別に値を設定する]）をクリックしてから、入力フィールドで設定をしてください。

注意：Dynamic（ダイナミックフィルター）が選択できない場合

マルチセレクトでモデル参照のプロパティを作成していると、ダイナミックフィルターを設定できません。

その場合は、カテゴリー分類用の参照プロパティをシングルセレクトで新しく作り直し、各記事アイテムに再設定してください。