比較表の見本 — 設定を変えて並べる

この記事は比較表の見本です。同じ商品を、設定だけ変えて何通りかに並べました。どれもブロックの設定パネルで切り替わるもので、CSS を書く必要はありません。

画面上の管理バーから「投稿を編集」を開くと、それぞれの表がどう設定されているかをそのまま見られます。

商品は 10 点まで。はみ出すぶんは横に流れる

1 つの表に商品を 10 点まで入れられます。記事の幅に収まらないぶんは表だけが横にスクロールし、本文の折り返しやサイドバーは動きません。スクロールできる表には右下に合図が出て、一度動かすと消えます。

下の表は 8 点。右の列は最初は見えていないので、横に動かしてみてください。

表の見た目は 5 通り

罫線の引き方と塗り分けだけを替えたものです。中身はどれも同じ 3 点。記事の雰囲気に合うものを選べます。

標準

行ごとに細い罫線を 1 本。どのテーマに置いても浮かない既定値です。

ストライプ

1 行おきに薄く色を敷きます。項目が多い表で、目が行を追いやすくなります。

ミニマル

罫線を減らして余白を広く取ります。文章が主役の記事になじみます。

カード

列を 1 枚ずつのカードに見せます。商品ごとの区切りがはっきりします。

ボールド

文字を太く、見出しを濃く。比較そのものが記事の主役のときに。

枠の質感はプリセットで決まる

表全体の質感は、商品カードと同じプリセットが決めます。下は Outline（枠線だけの平面）に、罫線を減らしたミニマルを組み合わせたもの。サイト全体の設定にもできますし、この表だけ変えることもできます。

項目は自分で決められる

価格やボタンのような作り付けの行に、好きな項目を足せます。○△× の記号だけを置くことも、記号を敷いてその上に値を重ねることもできます。左端の項目名の列は、自由な行を足したときだけ出ます。列に「イチオシ」のような札を付けることもできます。

点数が少ないときは行と列を入れ替える

2 〜 3 点を細かく比べるときは横型が読みやすくなります。1 行が 1 商品になり、項目が横に並びます。

ここに並べた商品はすべて架空のものです。リンク先は実在しません。