比較表の作り方

このページの目次

パターン別比較表のサンプル

パターン別比較表のサンプル

パターン1. スタンダードな比較表

この比較表の特徴

使用しているブロック：WordPress標準のテーブル

難易度：

VIERA TH-49GX850	VIERA TH-49GX750	VIERA TH-49GX500
メーカー
パナソニック	パナソニック	パナソニック
サイズ
49インチ	49インチ	49インチ
満足度

価格
￥132,800	￥107,800	￥86,634
1インチあたり
￥2,710	￥2,200	¥1,768
公式サイト	公式サイト	公式サイト

この比較表の作り方を見る

パターン2. 1列目を見出し列にした比較表

この比較表の特徴

使用しているブロック：比較表（ウラオモテ専用ブロック）

難易度：


製品名	VIERA TH-49GX850	VIERA TH-49GX750	VIERA TH-49GX500
メーカー	パナソニック	パナソニック	パナソニック
サイズ	49インチ	49インチ	49インチ
満足度
価格	￥132,800	￥107,800	￥86,634
1インチあたり	￥2,710	￥2,200	¥1,768

この比較表の作り方

ブロックの設定内容を見る

ブロックの設定

コード

<table>
<thead>
<tr>
<th></th>
<th><img class="alignnone size-full wp-image-4371" src="https://webya-tools.com/uraomote/wp-content/uploads/K0001193835.jpg" alt="" width="120" height="90" /></th>
<th><img class="alignnone size-full wp-image-4371" src="https://webya-tools.com/uraomote/wp-content/uploads/K0001193835.jpg" alt="" width="120" height="90" /></th>
<th><img class="alignnone size-full wp-image-4371" src="https://webya-tools.com/uraomote/wp-content/uploads/K0001193835.jpg" alt="" width="120" height="90" /></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>製品名</strong></td>
<td><strong>VIERA TH-49GX850</strong></td>
<td><strong>VIERA TH-49GX750</strong></td>
<td><strong>VIERA TH-49GX500</strong></td>
</tr>
<tr>
<td><strong>メーカー</strong></td>
<td>パナソニック</td>
<td>パナソニック</td>
<td>パナソニック</td>
</tr>
<tr>
<td><strong>サイズ</strong></td>
<td>49インチ</td>
<td>49インチ</td>
<td>49インチ</td>
</tr>
<tr>
<td><strong>満足度</strong></td>
<td>[ほし5]</td>
<td>[ほし4]</td>
<td>[ほし3.5]</td>
</tr>
<tr>
<td><strong>価格</strong></td>
<td>[さんかく]
<span class="bold red">￥132,800</span></td>
<td>[まる]
<span class="bold red">￥107,800</span></td>
<td>[にじゅうまる]
<span class="bold red">￥86,634</span></td>
</tr>
<tr>
<td><strong>1インチあたり</strong></td>
<td>[さんかく]
￥2,710</td>
<td>[まる]
￥2,200</td>
<td>[にじゅうまる]
¥1,768</td>
</tr>
</tbody>
</table>

補足説明

Ver4.1.0～
- シンプルな比較表 → 比較表
- WEB屋さんが作ったパーツ → ウラオモテ専用ブロック
2分55秒あたりから説明している「列幅や行高さが変わってしまう」という件はWordPressの仕様ではなくプラグイン（Advanced Editor Tools / 旧 TinyMCE Advanced）の仕様によるものです。
列の幅や行高さをマウスで変更したくない場合は設定 > Advanced Editor Toolsからプラグインの設定画面を開き、旧エディター（TinyMCE）タブ内にある「マウスのドラッグでのテーブル、行、列のサイズ変更を可能にする」のチェックを外して設定を保存してください。

「Advanced Editor Tools」の設定個所を見る

パターン3. 簡易的な並び替え＆絞り込み検索ができる比較表

この比較表の特徴

使用しているブロック：比較表（ウラオモテ専用ブロック）

難易度：

製品名	メーカー	サイズ	価格	1インチあたり
VIERA TH-49GX850	パナソニック	49インチ	￥132,800	￥2,710
VIERA TH-49GX750	パナソニック	49インチ	￥107,800	￥2,200
VIERA TH-49GX500	パナソニック	49インチ	￥86,634	￥1,768

製品名

メーカー

サイズ

満足度

価格

1インチあたり

VIERA TH-49GX850

パナソニック

49インチ

￥132,800

￥2,710

VIERA TH-49GX750

パナソニック

49インチ

￥107,800

￥2,200

VIERA TH-49GX500

パナソニック

49インチ

￥86,634

￥1,768

この比較表の作り方

テーブルの作成手順はパターン2とほぼ同じですのでパターン2の解説動画を参考にしてください。
ブロックの設定内容は以下の画像を参考にしてください。

$(function () {
var datatable = new DataTable(document.querySelector('#BBB table'), {
    sort: [true, true, true, true, true, true],
    filters: ['select', 'select', 'select', 'select', 'select', 'select']
});
});

<table>
<thead>
<tr>
<th>製品名</th>
<th>メーカー</th>
<th>サイズ</th>
<th>満足度</th>
<th>価格</th>
<th>1インチあたり</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>VIERA TH-49GX850</strong></td>
<td>パナソニック</td>
<td>49インチ</td>
<td>[ほし5]</td>
<td>[さんかく]
￥132,800</td>
<td>￥2,710</td>
</tr>
<tr>
<td><strong>VIERA TH-49GX750</strong></td>
<td>パナソニック</td>
<td>49インチ</td>
<td>[ほし4.5]</td>
<td>[まる]
￥107,800</td>
<td>￥2,200</td>
</tr>
<tr>
<td><strong>VIERA TH-49GX500</strong></td>
<td>パナソニック</td>
<td>49インチ</td>
<td>[ほし3.5]</td>
<td>[にじゅうまる]
￥86,634</td>
<td>￥1,768</td>
</tr>
</tbody>
</table>