比較表の作り方と見本

Kukuriya の比較表は、登録済みの商品を選ぶだけで作れます。商品名も価格も画像も書き写しません。商品を直せば、その商品を使っている表がすべて一緒に変わります。

以下は同じ商品を、設定だけ変えて並べたものです。どれもブロックの設定パネルで切り替わるもので、CSS を書く必要はありません。

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

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

表の見た目は 5 通り

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

標準

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

ストライプ

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

ミニマル

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

カード

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

ボールド

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

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

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

項目は自分で決められる

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

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

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

設定する画面は、そのまま触れます

ここに並べた表を実際に作る画面は、デモサイトでログイン不要・インストール不要のまま触れます。商品を選び直したり、見た目を切り替えたりして、公開側の見え方がその場で変わるのを確かめてください。何をしても 2 時間ごとに元へ戻ります。

このページに出ている商品・ブランド・商品画像はすべて架空のものです。リンク先は実在しません。