お知らせや施工事例など、記事の一覧は「コンテンツリスト」という機能を使って表示します。
コンテンツリストは、「並べ方・表示する項目・色や形」を組み合わせることで、見せ方をガラリと変えることができます。この記事では、「こんな風に表示したい」という目的ごとに、おすすめの設定の組み合わせをご紹介します。まずは、自分が作りたい見た目に近いものから読んでみてください。
目次
❶ 設定の場所
コンテンツリストのパーツを画面上で選択すると、右側に「デザイン」と「詳細設定」という2つのタブが表示されます。
それぞれの役割は以下の通りです。
| タブ | 主な設定 |
|---|---|
| 詳細設定 | 表示するカテゴリ、最大表示件数、UI形式（カード／1行）、カラム数（カードのとき1〜4列）、日付の表示形式 |
| デザイン ＞ 全体 | 要素の配置（サムネイルの位置、表示する項目と並び）、カード間の間隔、一覧全体の背景・線・角丸・影 |
| デザイン ＞ カード | 記事1件ごとの枠のパディング、項目どうしの間隔、背景・線・角丸・影 |
| デザイン ＞ サムネイル | 画像の表示形式（全体を表示／トリミング／元のサイズ）、表示位置、線・角丸・影 |
| デザイン ＞ カテゴリ／タグ | パディング、文字、文字色、背景・線・角丸・影（タグはタグ間の間隔も） |
| デザイン ＞ タイトル・日付・説明テキスト | 文字の種類・大きさ・太さ・色 |
🔰「要素の配置」の考え方
「要素の配置」の項目では、タグ・カテゴリ・タイトル・日付・記事の説明文が1行ごとに並んでいます。
項目ごとに表示・非表示を切り替えられるほか、左側のつまみ（≡）をマウスでドラッグ（つかんで動かす）して順番を入れ替えることができます。
- 同じ行に入れた項目： 横並びになります。
- 行が分かれた項目： 縦に積み重なります。
ポイント
要素の配置はパソコンとスマホで共通です。
文字の大きさや横の列数はパソコンとスマホで別々に設定できますが、「要素の配置（項目の並び順）」は共通です。
そのため、スマホ画面に合わせて並び順を変えると、パソコン側の並び順も変わってしまいます。
パソコンとスマホで並び順を完全に分けたいときは、後述の ❽ の手順を使いましょう。
❷ 写真を大きく見せたい（施工事例・実績など）
🔻写真が主役にしたい場合は、カード型のスタイルで並べるのがおすすめです。
| 設定 | 値 |
| 詳細設定 ＞ UI形式 | カード |
| 詳細設定 ＞ カラム数 | PC：3列／スマートフォン：1列 |
| 要素の配置 ＞ サムネイルの位置 | 上 |
| 要素の配置 | 初期のまま（タグ・カテゴリ・タイトル・日付・記事説明を1行ずつ） |
| デザイン ＞ カテゴリ | バッジにする（❺） |
❸ 写真と文章を両方読ませたい（ブログ・コラムなど）
🔻写真と文章をセットでしっかり読んでもらいたいときは、写真を左側（または右側）に置き、横にタイトルや説明文を並べるスタイルにします。
🔻縦に1件ずつスッキリと並ぶため、文章がとても読みやすくなります。
| 設定 | 値 |
| 詳細設定 ＞ UI形式 | 1行 |
| 要素の配置 ＞ サムネイルの位置 | 左（写真を右にしたい場合は「右」） |
| 要素の配置 | 初期のまま（タグ・カテゴリ・タイトル・日付・記事説明を1行ずつ） |
💡日付と記事説明は別の行がおすすめ
日付と記事説明文を同じ行に置いてしまうと、説明文が2行になったときに、2行目以降が日付の幅の分だけ右側にズレて表示されてしまいます。
見た目が気になる場合は、記事説明を別の行に移すのが綺麗に見せるコツです。
❹ トップページに新着情報を出したい（お知らせ欄）
🔻トップページなどによくあるお知らせ欄は、写真はあえて出さずに、「日付・カテゴリ・タイトル」だけをコンパクトに並べるのが定番です。
| 設定 | 値 |
| 詳細設定 ＞ UI形式 | 1行 |
| 詳細設定 ＞ 最大表示件数 | 3〜5件 |
| 要素の配置 ＞ サムネイルの位置 | なし |
| 要素の配置 | 1行目：日付・カテゴリ／2行目：タイトル（タグ・記事説明はオフ） |
| デザイン ＞ カテゴリ | バッジにする（❺） |
ポイント
すべてを1行に詰め込むとスマホで崩れます
日付・カテゴリ・タイトルなどをすべて同じ行に入れてしまうと、パソコンでは1行に収まって綺麗に見えますが、画面の狭いスマートフォンでは幅が足りなくなります。
その結果、タイトルが窮屈に何度も折り返されて読みにくくなったり、文字が1文字ずつ縦に並んでしまったりします。
※パソコンでは1行、スマホでは2段にしたい場合は、後述の ❽ の方法を使いましょう。
❺ カテゴリやタグを、色付きのバッジにしたい
🔻カテゴリやタグの文字に、背景色・角の丸み・余白（パディング）を設定すると、まるで洋服の「ブランドタグ」や「ラベル」のような見栄えの良いバッジにすることができます。
※カテゴリをバッジにするには、あらかじめ「要素の配置」でカテゴリをオンにしておく必要があります。
（オンにすると、デザインタブの中に「カテゴリ」の専用設定が現れます）
| 設定（デザイン ＞ カテゴリ） | 値の例 |
| パディング | 上下 2px／左右 10px |
| 背景 | オン・サイトのメインカラー |
| テキストカラー | 白（背景が濃い色のとき） |
| 角丸 | 999px（左右が丸いバッジ）／4px（角だけ少し丸い四角） |
💡きれいなバッジにするためのコツ
左右のパディング（余白）が「0」だと、文字が枠のフチにぴったりくっついて窮屈に見えてしまいます。
左右には6〜10px程度のゆとりを持たせましょう。
背景を濃い色にする場合は、文字の色を「白」などに変更しないと読めなくなってしまいます。
タグも「デザイン ＞ タグ」から同じように設定できます。複数のタグが並ぶときは「タグ間の間隔」で距離を調整してください。
カテゴリとタグで違う色を設定しておくと、ユーザーがパッと見て見分けやすくなります。
❻ 写真の角を丸くしたい
🔻サムネイル写真の角を少し丸く加工すると、サイト全体がやわらかく親しみやすい印象に変わります。
| 設定 | 値の例 |
| デザイン ＞ サムネイル ＞ 角丸 | 16px 程度 |
💡サムネイルを「完全な丸（円形）」にすることはできません
サムネイルの枠自体がもともと「横長」の比率で固定されているため、角丸の数値を大きくしても、綺麗な正円ではなく少しつぶれた「楕円（だえん）」になります。
❼ スマートフォンでは1列にしたい／文字を小さくしたい
「パソコンでは3列にしたいけれど、スマホでは見やすく1列にしたい」「スマホのときだけ文字を小さくしたい」といった調整は、表示デバイスごとに切り替えて設定できます。
エディタ上の表示をスマホのアイコンに切り替えてから、カラム数を「1列」に変更したり、タイトルの文字サイズを小さくしたりして調整してください。
❽ PCとスマートフォンで、並びを変えたい
前述の通り、「要素の配置（項目の並び順）」はパソコンとスマートフォンで共通です。どうしても端末ごとに並び順を変えたい場合は、少し裏技的ですが「コンテンツリストを2つ用意して、表示する端末を分ける」という方法を使います。
- すでに設定が完了しているコンテンツリストを複製します。
- 1つ目（パソコン用）は、「デザイン ＞ 全体 ＞ 表示」の設定で 「PC」だけをオン（スマホはオフ）にします。
- 2つ目（スマートフォン用）は、逆に 「モバイル」だけをオン（PCはオフ）にし、スマートフォン向けの並び順に組み替えます。
💡スマホ用のリストは、スマホ画面表示の状態で編集する
「PC表示のみオン」にしたリストは、エディタをパソコン表示にしていると見えなくなります。
エディタの画面を「スマートフォン表示」に切り替えてからリストを選択し、並び替えを行ってください。
💡設定条件は必ず同じにしておく
表示するカテゴリの種類や、最大表示件数などの条件は、パソコン用とスマホ用で必ず同じ内容にしておきましょう。
片方だけ条件を変えてしまうと、見る端末によって表示される記事が変わってしまって混乱の原因になります。
まとめ
写真をメインに見せたいなら 「カード形式」、文章もしっかり読ませたいなら 「1行 ＋ サムネイル左」、お知らせ欄なら 「1行 ＋ サムネイルなし」 が基本です。
同じ行に入れた項目は「横並び」、行を分けた項目は「縦に積み重なります」。
項目の並び順（要素の配置）はPCとスマホで共通です。どうしても変えたいときは、コンテンツリストを2つに分けて使い分けましょう。