Point: Studio CMSとは
Studio CMSは、Studio上でコンテンツを構造化して管理・更新できるCMS（Content Management System）機能です。 モデルやアイテム、プロパティを組み合わせて、ブログやニュースなどの更新性が高いコンテンツを一元管理します。
Studio CMSの仕組みや基本的な使い方は、以下の記事も参照してください。
Studio CMSの内部コンテンツデータを紐付けた動的リストがCMSリストです。
以下のような機能を使い、CMSのコンテンツデータを動的に表示できます。
機能 | 説明 |
変数データ（プロパティ）の紐付け | CMSダッシュボードで設定済みのCMSプロパティをリスト内のボックス要素に紐付けできます。 |
動的リストの表示設定 | リスト内のアイテムの表示方法を設定します。 |
条件付きスタイル | 条件付きスタイルの「最初のアイテム」が設定できます。 |
表示条件設定 | 動的（CMS）リストや動的ページ内の要素を特定の条件下でのみ表示させる機能です。 ブール値プロパティを活用して、「条件に応じ、特定アイテムの要素のみ表示・非表示、またはデザインを変化させる」ことができます。 |
CMSリストを作成する
事前にCMSダッシュボードでCMSのコンテンツデータを準備した上で、動的リストにデータを紐付けて作成します。
1. CMSダッシュボードでコンテンツデータを準備する
CMSダッシュボードでコンテンツを作成します。
2. デザインエディタで動的リストを追加する
動的リストを追加します。
紐付けるCMSデータ（モデルまたはコレクション）を変更する必要がある場合には、紐付けデータの変更をしてください。
3.プロパティをボックス要素に紐付ける
設定は、右パネル内の[データ]パネルから行います。
※プリセットされた動的リストを使用している場合には、あらかじめプロパティとボックス要素が紐付いています。
4. 表示アイテムの絞り込み（フィルター）設定をする
表示アイテムの絞り込みが必要な場合には、フィルター機能で設定を行います。
5. リストの表示設定をする
表示数、0件の表示、もっと見るボタン（Read more）、同一アイテムを非表示などのリストの表示設定をします。
6. リストのレイアウトや外観を設定する
レイアウトや外観の設定は、基本的にはリスト内アイテムで共通ですが、条件付きスタイルの「最初のアイテム」やブール値プロパティを活用した表示条件を設定すると、「条件に応じ、特定アイテムの要素のみ表示・非表示、またはスタイルを変化させる」ことができます。
CMSリスト全体を選択する
スクリーン上で直接選択するか、レイヤーパネルから選択します。
ボックス左上にリストアイコン
と<div>タグが表示され、リスト全体が水色にハイライトされていれば、リスト全体が選択されています。
ハイライト状態からもう一度クリックすると、リストが編集可能な状態となります。
スクリーンで直接選択する
対象のCMSリスト内の任意の箇所をクリックします。
リスト全体が選択状態とならない場合には、同一箇所を何度かクリックしてみてください。
レイヤーパネルから選択する
レイヤーパネルを開き、レイヤーから対象のCMSリストを選択します。
リスト全体の選択状態を解除する
スクリーン上でCMS外の箇所をクリックすると、選択状態が解除されます。
CMSリストのリストアイテムを選択する
スクリーン上で直接選択するか、レイヤーパネルから選択します。
ボックス左上に、リストアイテム番号
と<div>タグが表示されます。番号は0番から順番に数字が割り当てられます。
スクリーンで直接選択する
対象のCMSリストアイテムをクリックします。
CMSリスト全体がハイライトされた状態からさらにダブルクリックすると、リストアイテムが選択されます。
レイヤーパネルから選択する
レイヤーパネルを開き、レイヤーから対象のリストアイテムを選択します。
リストアイテムの選択状態を解除する
スクリーン上でCMS外の箇所をクリックすると、選択状態が解除されます。