TablePressの使い方!料金比較、スペック比較などに便利!

 

記事を書いていく中で、時に「料金の比較表が作りたい」「スペックの比較表が作りたい」と思うことがあると思います。

ちょっとしたデータの比較なら良いのですが、例えばiPhone8とiPhoneXの全スペックを比較しようとすると、さすがに表でないとわかりづらくなります。

 

データ比較表を作る際にとても便利なのが、「TablePress」というプラグインです。

 

TablePressの導入方法

 

TablePressは、WordPress管理画面左メニューバーからインストール・有効化をします。

 

「プラグイン」から「新規追加」をクリックします。

 

tiny

 

検索窓に“TablePress”と入力すると先頭にプラグインが表示されるので、「今すぐインストール」をクリックします。

 

インストール完了後、「有効化」をクリックしましょう。

 

テーブルの作成方法

TablePressがインストールされると、管理画面左メニューバーに「TablePress」の項目が追加されています。

 

管理画面左メニューバーから「TablePress」→「新しいテーブルを追加」をクリックします。

 

 

すると、「作成するテーブルの名前」、「説明」、「行・列数」を設定する画面が表示されます。

 

今回は例として、イタリアのスーパーカーメーカー、「ランボルギーニ」のラインナップから「アヴェンタドール」「ウラカン」の二車種を比較してみたいと思います。

 

名前は「スペック比較」、行は14、列は3で生成します。

 

 

 

設定が終わったら「テーブルを追加」をクリックします。

 

すると実際に数値やラベル等を設定できる画面が表示されます。

数値やラベルを入力していきましょう。

 

 

入力が終わるとこのようになります。

 

それぞれのセルの右下にある斜線部をマウスでドラッグすると、そのセルの大きさを変更することができます。

 

 

また、行・列の項目それぞれに、チェックボックスがついています。

 

行にチェックを入れた場合、下の「テーブル操作」の赤枠内で「非表示」「表示」、「コピー」「挿入」「削除」などの操作が行えるようになります。

 

 

列の場合も、青枠内で同様の操作が行えます。

 

「テーブルのオプション」「DataTables JavaScriptライブラリの機能」の設定項目は、お好みに合わせてチェックマークを選択してください。

今回はこのように設定しました。

 

 

 

プレビューをクリックすると、実際の表示とは多少異なるものの表の状態を見ることができます。

 

 

すべての設定が終わったら、「変更を保存」をクリックします。

記事に作成したテーブルを挿入

 

「TablePress」をインストールすると、ビジュアルエディタのメニューバーに「TablePressからテーブルを挿入」という項目が追加されています。

 

 

これをクリックすると、作成した自分のテーブルの一覧が表示されます。

 

 

挿入したいテーブルの「ショートコードを挿入」ボタンをクリックすれば、記事内にテーブルのショートコードが挿入されます。

 

実際の記事画面では、テーブルはこのように表示されます。

 

スペック比較

 アヴェンタドールウラカン
乗車定員2人2人
ボディタイプ2ドアクーペ
2ドアオープン
2ドアクーペ
2ドアオープン
エンジン6.5L V12 DOHC 5.2L V10 DOHC
駆動方式4WD4WD
最高出力515kw(700ps)/8,250rpm448kW(610ps)/ 8,250 rpm
最大トルク70.3kgm/5,500rpm57.1kgm/ 6,500 rpm
変速機7速セミAT7速DCT
サスペンション前後:ダブルウィッシュボーン前後:ダブルウィッシュボーン
全長4,780mm4,459mm
全幅2,030mm1,924mm
全高1,136mm
1,165mm
ホイールベース2,700mm2,620mm
車両重量1,575kg1,422kg

まとめ

料金比較やスペック比較をするとき、表があるのとないのとでは訪問者の利便性に大きな違いが出ます。

TablePressを導入すれば簡単にテーブルを作成できるので、比較表を作るときにはぜひ利用してみてください。

 

 COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

PS Auto Sitemapの使い方、カスタマイズ方法を徹底解説!

Speech Bubbleで記事に遊び心!?記事をLINE風会話形式に出来る

プラグインを使ってWordPressのサイトをAMP対応させる方法について紹介!

Yoast SEOはRSS Footerの完全上位互換!記事の盗作を防ぐプラグイ...

WP Multibyte PatchでWordpressの不具合を解消!

Ultimate Google Analytics改とは?設定方法や導入方法のま...