CMS編 07 / 10 実践 約5分
一覧ページの作り方｜1件分を作れば全部並ぶ
一覧ページは1件分のデザインを作るだけで成立します。カードの中身の選び方、件数が変わっても崩れない作り方を解説します。
この教材で学べること
- 一覧ページで作るのは1件分だけという構造
- カードに載せる情報の選び方
- 件数や文字量が変わっても崩れない作り方
一覧ページで作るのは1件分のカードだけです。それがアイテムの数だけ繰り返されます。10件並べるために10個作る必要はありません。
載せる情報を絞る
一覧は「詳細を開くかどうか」を判断してもらう場所です。全部載せると、どれも読まれません。載せる情報は3〜4つに絞ってください。
| 要素 | 載せる | 理由 |
|---|---|---|
| タイトル | 必須 | これで開くかどうかが決まる |
| 日付 | 推奨 | 情報の新しさが判断できる |
| サムネイル画像 | 種類による | 実績・ブログでは効く。お知らせでは不要なことも |
| カテゴリー | 種類による | 分類が多いサイトでは効く |
| 本文の抜粋 | 控えめに | 入れるなら2行程度で切る |
| 本文の全文 | 載せない | 詳細ページの存在意義がなくなる |
件数や文字量が変わっても崩れない作り
| 崩れ | 原因 | 対処 |
|---|---|---|
| カードの高さがバラバラ | 中身の量で高さが決まっている | 親の設定で高さを揃える |
| サムネイルの切れ方が不揃い | 元画像の比率がバラバラ | 表示の比率を固定する |
| 日付の位置がズレる | タイトルの行数で押し下げられる | 日付を下端に固定する |
| 件数が少ないとスカスカ | 3列固定で1件しかない | 折り返し＋幅の下限で調整する |
3パターンで確認：作り終えたら1件・2件・10件の状態を想像して確認してください。開設直後は1件しかない、という状況は必ず訪れます。
次は、カードから飛ぶ先の詳細ページです。