アフィリエイト

WordPressで見やすい比較表はTablePressで作る

投稿日:

hiro
こんにちわ、hiroです。 →hiroのプロフィールはこちら

どうも、山田です。
 
 
今回は、「Wordpressで見やすい比較表はTablePressで作る」についてです。
 
 

比較表は商品比較にとても有効

比較表を作成することで、ブログの訪問者が購入を検討している際に背中を押す役割を担うことができます。
 
 
例えば、こんな感じ。
 

 
サプリAとサプリBの購入で迷っている人にとって、各項目を簡単に比較することで、購入意欲が高まる可能性がグッと上がります。
 
 
テキストでずらずら書き連ねるより、比較表にしてあげたほうが、成約率も上がるわけです。
 
 
今回は、こんな比較表を簡単に作る方法を紹介します。
 
 

プラグイン TablePressで作る

TablePressというプラグインで比較表は簡単に作ることができます。
 
 
まずは、プラグインの新規作成でTablePressをインストール、有効化します。
 


 
新しいテーブルを追加で、新規の表を作成します。
 
 

テーブルの名前に自分で管理するための名前を入れ、行数・列数を入れます。
 

 
途中で行数や列数を変えたい場合は、該当するセルにチェックマークを入れ、削除や挿入をクリックして調整します。
 

 
入れて見るとこんな感じ。

 

入力したい表のIDを確認し、例えばIDが1の表を挿入したい場合は、下記のようにショートコードを入力します。

まずは表のベースができましたね。
 
 

比較はできるだけわかりやすく

比較表は見た目も大事になってきますので、各種装飾をすることも重要です。
 
 
装飾については、プラグインのオプション→カスタムCSSに各種CSSを追記します。
 
 
例えば、表の縦線を入れたいという時は、下記CSSを追記します。
 
 

.tablepress tbody td,
.tablepress tfoot th {
	border: 1px solid #ccc;
}

また、横幅を調整したい場合は、下記のように幅の割合を入力します。
 
 
例えば、左列が項目名、比較が2項目の場合は、20%/40%/40%がバランスが取れているので、下記のような感じになります。
 

 
ほかにも、各種装飾をしたい場合には、カスタムCSSに入力することになります。
 
 
例えば、項目最上段の背景色や、中央寄せなどを反映するには、下記を入力します。
 
 

#tablepress-1 th {
	color: black;
	background-color: aliceblue;
	text-align: center;
}

#tablepress-1 td {
	text-align: center;
}

 
こんな感じになります。

 サプリAサプリB
初回特典
×
返金保証
×
価格9800
6800

比較はできるだけわかりやすくしてあげると、訪問者が見やすく比較することができますね。
 
 
比較表の作成方法は以上です。
 
 





-アフィリエイト

Copyright© hiro's blog , 2019 All Rights Reserved Powered by AFFINGER5.