記事を書いていく中で、時に「料金の比較表が作りたい」「スペックの比較表が作りたい」と思うことがあると思います。
ちょっとしたデータの比較なら良いのですが、例えばiPhone8とiPhoneXの全スペックを比較しようとすると、さすがに表でないとわかりづらくなります。
データ比較表を作る際にとても便利なのが、「TablePress」というプラグインです。
TablePressの導入方法
TablePressは、WordPress管理画面左メニューバーからインストール・有効化をします。
「プラグイン」から「新規追加」をクリックします。
検索窓に“TablePress”と入力すると先頭にプラグインが表示されるので、「今すぐインストール」をクリックします。
インストール完了後、「有効化」をクリックしましょう。
テーブルの作成方法
TablePressがインストールされると、管理画面左メニューバーに「TablePress」の項目が追加されています。
管理画面左メニューバーから「TablePress」→「新しいテーブルを追加」をクリックします。
すると、「作成するテーブルの名前」、「説明」、「行・列数」を設定する画面が表示されます。
今回は例として、イタリアのスーパーカーメーカー、「ランボルギーニ」のラインナップから「アヴェンタドール」「ウラカン」の二車種を比較してみたいと思います。
名前は「スペック比較」、行は14、列は3で生成します。
設定が終わったら「テーブルを追加」をクリックします。
すると実際に数値やラベル等を設定できる画面が表示されます。
数値やラベルを入力していきましょう。
入力が終わるとこのようになります。
それぞれのセルの右下にある斜線部をマウスでドラッグすると、そのセルの大きさを変更することができます。
また、行・列の項目それぞれに、チェックボックスがついています。
行にチェックを入れた場合、下の「テーブル操作」の赤枠内で「非表示」「表示」、「コピー」「挿入」「削除」などの操作が行えるようになります。
列の場合も、青枠内で同様の操作が行えます。
「テーブルのオプション」「DataTables JavaScriptライブラリの機能」の設定項目は、お好みに合わせてチェックマークを選択してください。
今回はこのように設定しました。
プレビューをクリックすると、実際の表示とは多少異なるものの表の状態を見ることができます。
すべての設定が終わったら、「変更を保存」をクリックします。
記事に作成したテーブルを挿入
「TablePress」をインストールすると、ビジュアルエディタのメニューバーに「TablePressからテーブルを挿入」という項目が追加されています。
これをクリックすると、作成した自分のテーブルの一覧が表示されます。
挿入したいテーブルの「ショートコードを挿入」ボタンをクリックすれば、記事内にテーブルのショートコードが挿入されます。
実際の記事画面では、テーブルはこのように表示されます。
スペック比較
| アヴェンタドール | ウラカン | |
|---|---|---|
| 乗車定員 | 2人 | 2人 |
| ボディタイプ | 2ドアクーペ 2ドアオープン | 2ドアクーペ 2ドアオープン |
| エンジン | 6.5L V12 DOHC | 5.2L V10 DOHC |
| 駆動方式 | 4WD | 4WD |
| 最高出力 | 515kw(700ps)/8,250rpm | 448kW(610ps)/ 8,250 rpm |
| 最大トルク | 70.3kgm/5,500rpm | 57.1kgm/ 6,500 rpm |
| 変速機 | 7速セミAT | 7速DCT |
| サスペンション | 前後：ダブルウィッシュボーン | 前後：ダブルウィッシュボーン |
| 全長 | 4,780mm | 4,459mm |
| 全幅 | 2,030mm | 1,924mm |
| 全高 | 1,136mm | 1,165mm |
| ホイールベース | 2,700mm | 2,620mm |
| 車両重量 | 1,575kg | 1,422kg |
まとめ
料金比較やスペック比較をするとき、表があるのとないのとでは訪問者の利便性に大きな違いが出ます。
TablePressを導入すれば簡単にテーブルを作成できるので、比較表を作るときにはぜひ利用してみてください。
