CMS編 06 / 10 実践 約5分
CMSリスト｜アイテムをページに並べる
溜めたアイテムをページ上に一覧表示する「CMSリスト（動的リスト）」を解説します。並び順・表示件数・絞り込みの設定と、任意に選んでまとめる「CMSコレクション」との違いも扱います。
この教材で学べること
- CMSリスト（動的リスト）が何をしているのか
- 並び順・件数・絞り込みの設定項目
- 任意に選んでまとめる「CMSコレクション」との違い
CMSリストは、溜めたアイテムをページ上に並べて表示する要素です。Studioでは正式には「動的リスト」と呼ばれ、「CMSリスト」とも表記されます。棚のたとえなら「棚から本を取り出して並べる装置」にあたります。1件分のデザインを作ると、それがアイテムの数だけ繰り返されます。
4つの要素の関係
CMSリストの設定項目
CMSリストでは、「どのモデルのアイテムを、どの順で、何件出すか」を決めます。同じモデルから、条件を変えて複数のリストを作ることもできます。
| 設定 | 決めること | 使いどころ |
|---|---|---|
| 参照するモデル | どのモデルのアイテムを並べるか | 1つのリストは1モデルを参照する |
| 並び順 | どのプロパティを基準に並べるか | 公開日の新しい順が基本 |
| 表示件数 | 何件まで出すか | トップページは3件、一覧ページは全件 |
| 絞り込み | 条件に合うものだけ出す | カテゴリー別ページ、注目記事だけ |
| 並べ方 | 縦積みか、横並び＋折り返しか | 件数が変わるならグリッド |
同じモデルを別々に見せる
CMSリストは1つのモデルに対して何個でも置けます。これがCMSの使いどころです。
| 置く場所 | 設定 | 見え方 |
|---|---|---|
| トップページ | 新着3件 | 最新のお知らせだけ抜粋 |
| お知らせ一覧ページ | 全件・新しい順 | すべて並ぶ |
| カテゴリー別ページ | そのカテゴリーで絞り込み | 該当分だけ並ぶ |
| 記事の下部 | 同カテゴリーから2件 | 関連記事として出る |
「CMSコレクション」との違い
Studioには、名前の似た「CMSコレクション」という機能が別にあります。混同しやすいので、ここで区別しておきます。CMSリストは条件で自動的に並べるもの、CMSコレクションは手で選んでまとめるものです。
| CMSリスト（動的リスト） | CMSコレクション | |
|---|---|---|
| 役割 | アイテムを条件で並べて表示する | アイテムを手動で選んでグループにする |
| 並ぶ中身 | 条件に合うものが自動で入る | 自分が選んだものだけが入る |
| 向いている場面 | お知らせ・ブログの一覧 | おすすめ記事、ランキング、特集 |
| 参照するモデル | 1つ | 1つ |
まず覚えるのはCMSリスト：日常の制作で使うのは、ほとんどがCMSリストです。「おすすめだけを手で選んで並べたい」という場面が出てきたときに、CMSコレクションを思い出せば十分です。
アイテムを追加すれば、CMSリストには自動で反映されます。次は、この一覧から飛ぶ先である一覧ページの作りです。