KIJI KaiZEN 比較テーブルブロック｜使い方マニュアル
KIJI KaiZENに搭載している比較テーブルブロックは
WordPress標準のテーブルブロックではできない、画像やセル背景アイコンの挿入ができます。
また、比較表でありがちな「この情報不要だな・・・」「この列とこの列を比較したいのに邪魔な列が多くて見づらいな・・・」という不満を解消できる【不要な列非表示機能】を搭載。
使用例
スタイルはボーダーとストライプ、デフォルトから選択できます。上のテーブルはボーダーです。
テーブル内のボタンはブロックツールバーから挿入しています。
下はストライプです。
| 商品コード | 商品名 | 価格（税込） |
|---|---|---|
| PROD-101 | ワイヤレスメカニカルキーボード | ¥14,800 |
| PROD-102 | 本革スマートフォンケース (iPhone 15用) | ¥4,2000 |
| PROD-103 | 27インチ 4K 液晶モニター | ¥59,800 |
任意のセルの背景色・文字色を変更することも可能です。
このブロックでできること
商品・サービスを並べて比べる「比較表」を、HTML を書かずにエディタ上で作れるブロックです。
スプレッドシートのように行・列を足したり、セルを結合したり、セル単位で色やアイコンを付けたりできます。スマホでははみ出した列を横スクロールで見せられるので、項目が多い比較表でもレイアウトが崩れません。
さらに、各セルに KIJI KaiZEN 広告タグ（アフィリエイトリンク・ボタン・バナー）を直接差し込めるのが大きな特徴です。公式サイトへのリンクボタンを表のセル内に置き、クリック計測まで一括で行えます。
主な特徴
| 特徴 | 内容 |
|---|---|
| ノーコードで表作成 | 行・列の追加／削除、セル結合・分割をボタン操作で |
| 横スクロール対応 | スマホ／PC を個別にオン・オフ。1列目の固定も可能 |
| セル単位の装飾 | 文字色・背景色・罫線色・背景アイコンをセルごとに設定 |
| 広告タグの差し込み | セル内にアフィリエイトのボタン／リンク／バナーを設置＆計測 |
| 読者が列を選べる | フロントで「表示する列を選択」でき、見たい商品だけ絞り込み可能 |
| 画像セル | セルに商品画像を挿入可能 |
| ヘッダー／フッター行 | 1行目を見出し（thead）、最終行をフッター（tfoot）に指定 |
基本的な使い方
- 投稿編集画面でブロック追加（＋）から 「KIJI KaiZEN 比較テーブル」 を挿入します。
- 初期状態で 3行 × 3列 の表が入ります。セルをクリックして文字を入力してください。
- セルを選択すると左・上にあらわれる ▶／▼ のつまみから、行・列の追加／削除、セルの結合などが行えます。
- 複数セルの選択は、Shift＋クリック（範囲）または Ctrl／⌘＋クリック（飛び石）に対応。行・列見出しのつまみから「行ごと・列ごと・全体」をまとめて選択することもできます。
セルを結合するには、連続した複数セルを選択して「結合」を実行します。結合後は「分割」で元に戻せます。
設定項目の説明（右サイドバー）
テーブル（表全体）
| 項目 | 説明 |
|---|---|
| キャプション（任意） | 表の上に表示される見出し。空欄なら非表示 |
| テーブルの横幅 | コンテンツに合わせる（内容のぶんだけ）／記事の幅いっぱい（100%） |
| 列幅を均等にする | すべての列を同じ幅にそろえる |
| スマホで横スクロール | スマホ表示ではみ出す列を横スクロールにする |
| PCで横スクロール | PC 表示でも横スクロールを有効にする |
| ヘッダー列を固定する | 横スクロール中も1列目を左に固定し、見失わないようにする |
| 最初の行を見出し（thead）にする | 1行目を見出し行として扱う |
| 最後の行をフッター（tfoot）にする | 最終行をフッター行として扱う |
| 読者が列を選んで表示できるようにする | フロントに「表示する列を選択」ボタンを出し、読者が列を絞り込めるようにする |
| ヘッダー列は常に表示する | 列の絞り込み時も1列目（項目名の列など）は必ず残す |
| 最初から列リストを開いておく | 列選択リストを最初から開いた状態で表示する |
以下実際に比較テーブルブロックを使用して作成したテーブルです。
 転職広告例１ |  転職広告例２ |  転職広告例３ | |
|---|---|---|---|
| 求人数 | 5万件 | 10万件 | 3万件 |
| 対象ユーザー | 20代～30代 | 30代～40代 | 20代～30代 |
| サポート体制 | メールのみ | メール・個別チャット | 専属担当との面談あり |
| 利用料金 | 無料 | 1万円/月 | |
| おすすめ度 | |||
| 詳細ページ | |||
セル
| 項目 | 説明 |
|---|---|
| セルの強調表示（th） | 選択中のセルを見出しセル（th）にして強調する |
文字の配置
選択したセルの横位置（左・中央・右）と縦位置（上・中央・下）を設定します。適用範囲は セル単位／行ごと／列ごと／表全体 から選べます。
KIJI KaiZEN 広告タグ（セルへの差し込み）
セル内にアフィリエイトの広告タグを差し込みます。
| 項目 | 説明 |
|---|---|
| 広告タグ一覧のカテゴリ | 一覧をカテゴリで絞り込み |
| 差し込む広告タグ | 登録済みの広告タグから選択 |
| 差し込み形式 | リンク（テキスト）／バナー／ボタン から選択 |
| 配置ラベル（任意） | クリックログ上で設置場所を区別するためのラベル（例:「本文末尾」） |
形式ごとの注意：「ボタン」はアフィリエイトボタンに対応した広告タグのみ選択可。「リンク」はテキストリンク用 URL が取れる広告タグのみ。取得できない場合はバナーやボタンをお試しください。
装飾（セル単位）
| 項目 | 説明 |
|---|---|
| 文字色 / 背景色 / 線の色 | セルの色をテーマのカラーパレットから指定 |
| ボタンの背景色 / ボタンの文字色 | セルに差し込んだボタンの配色 |
| 背景アイコン | なし／二重丸／丸／三角／×／チェック／はてな／ビックリ（「対応」「非対応」などを視覚化） |
| 背景アイコンの大きさ | 小／中／大 |
| 背景アイコンの濃さ | 薄い／濃い |
外観（表全体）
| 項目 | 説明 |
|---|---|
| 角丸 | なし／小／中／大 |
| シャドウ | 表全体に影を付ける |
読者向けの動作（フロント側）
- 横スクロール：列が画面幅を超えると、表だけが横スクロールします。初回には「スクロールできます ▶」のヒントが表示されます。
- 列の絞り込み：「読者が列を選んで表示できるようにする」を有効にすると、フロントに 「表示する列を選択」 ボタンが出て、読者が見たい商品（列）だけに絞り込めます。
- ヘッダー列固定：横スクロール中も1列目（項目名）が左に貼り付くので、どの行が何の項目かを見失いません。
活用のヒント
- 1列目に「項目名」、上1行に「商品名」を置き、1行目を見出し・1列目を固定にすると見やすい比較表になります。
- 「おすすめ」列の背景色を変える＋背景アイコン（チェック）で、推したい商品を自然に目立たせられます。
- 各商品の行末セルにボタン形式の広告タグを差し込めば、比較しながらそのまま申し込みへ誘導でき、クリックも計測されます。
