CMSリスト

Studio CMSで管理しているデータを動的リストに紐付けたものがCMSリストです。

CMSリストを使うと、CMSダッシュボードで管理しているプロパティをリスト内の要素に紐付けて、記事一覧やお知らせ一覧を動的に表示できます。

CMSリストは、Studio CMS側でデータを準備してから、デザインエディタで動的リストに紐付けて作成します。

CMSダッシュボードでCMS記事アイテムなどのコンテンツを作成します。

詳細は、CMSダッシュボードでCMS記事アイテムを作成するを参照してください。

リスト内のテキストや画像ボックスを選択し、右パネルの[データ]タブでCMSリスト内のボックス要素に、CMSプロパティの紐付けます。

パネルが閉じている場合は、右パネルを開いてください。

※プリセットされた動的リストを使用している場合には、あらかじめプロパティとボックス要素が紐付いています。

必要に応じて、フィルターを設定して、表示するCMSアイテムを絞り込みます。

表示数、0件の表示、もっと見るボタン（Read more）、同一アイテムを非表示などのリストの表示設定をします。

ソート機能を使用して、表示するCMSアイテムの並び順を変更できます。

CMSプロパティのうち、公開日時、最終更新日、タイトル、テキスト、数値を基準に並べ替えが可能です。

CMSリストの見た目は、通常のリストと同様に調整できます。

以下のヘルプ記事などを参考に、リストのレイアウトや外観を編集します。

条件付きスタイルの「最初のアイテム」やブール値プロパティを活用した表示条件を設定すると、「条件に応じ、特定アイテムの要素のみ表示・非表示、またはスタイルを変化させる」ことができます。

編集時に意図した要素の選択ができない場合の確認ポイントをまとめます。

CMSリストでは、リスト全体を選ぶ操作と、リストアイテムを選ぶ操作があります。

表示設定を変更するときはリスト全体を選択し、各要素のデザインを調整するときはリストアイテムやその中の要素を選択します。

表示設定や紐付けデータの変更時には、リスト全体を選択します。

ボックス左上にリストアイコンと<div>タグが表示され、リスト全体が水色にハイライトされていれば、リスト全体が選択されています。

ハイライト状態からもう一度クリックすると、リストが編集可能な状態となります。

対象のCMSリスト内の任意の箇所をクリックします。

リスト全体が選択状態とならない場合には、同一箇所を何度かクリックしてみてください。

レイヤーパネルを開き、レイヤーから対象のCMSリストを選択します。

スクリーン上でCMS外の箇所をクリックすると、選択状態が解除されます。

各要素のデザインを調整するときはリストアイテムやその中の要素を選択します。

ボックス左上に、リストアイテム番号と<div>タグが表示されます。番号は0番から順番に数字が割り当てられます。

対象のCMSリストアイテムをクリックします。

CMSリスト全体がハイライトされた状態からさらにダブルクリックすると、リストアイテムが選択されます。

レイヤーパネルを開き、レイヤーから対象のリストアイテムを選択します。

スクリーン上でCMS外の箇所をクリックすると、選択状態が解除されます。