ここでは、見やすい比較表の作り方(Wordpress編)について紹介する。

 

見やすい比較表の作り方

 

まず「比較表」を作る方法としては、3つの方法がある。

 

■1つは、予め用意されている「テンプレート」のテーブルタグ機能を使用することである。

■2つ目は、テーブルタグと呼ばれる「コード」をそのまま投稿ページor固定ページのテキスト画面に打ち込む方法。

■3つ目は、「プラグイン」を使用する方法である。

 

テンプレート

 

テンプレートでテーブルタグ機能を使用すると言っても、その機能が搭載されているテンプレートと搭載されていないものがある。

 

実際、「STINGER8」や「STINGER5」には搭載されていない、だが「カエテンWP」には有る。

では「カエテンWP」で、実際にテンプレートのテーブルタグ機能を使用して比較表を作ってみる。

 

投稿ページor固定ページに移動しよう。

 

 

移動したら、ビジュアル画面から、テキスト画面に切り替えて、そこにあるテーブルタグ(table上、table横、table上横、table無)のボタンをクリックして、「HTML」を打ち込む。

 

 

すると、このような4つの比較表が作成される。

ここでは、「table上横」を使用して実際に比較表を作ってみる。

 

 

テキスト画面で、「table上横」ボタンをクリックする。

 

メニュー項目を増やしたい場合

「table上横」のメニュー項目を増やしたい場合には、「メニュー1orメニュー2」のどちらかのコードをコピーして「メニュー1orメニュー2」のコード下に貼り付ける。

すると、メニューの項目が増やせるのである。

 

 

なので、「メニュー1」をコピーしよう。

 

 

空欄を開ける。

 

 

コピーしたコードを空欄に貼り付ける。

 

 

こんな感じになる。

メニュー項目が増えとる。

 

 

ちなみに、「テキスト画面」から「ビジュアル画面」に切り替えるとコードの表示が上記のようになるが、心配する必要はない。

 

画像を貼る場合

 

比較表に「アフィリエイトリンク付きの画像」などを入れたい場合には、画像の項目を全て「画」というふうにしておくと、かなりわかりやすい。

 

 

実際、テキスト画面で「アフィリエイトリンク付きの画像」を入れる場合には、この「画」の部分を消してここにコードを貼るだけである。

 

 

文字や画像などを入力するとこんな感じになる。

ニャンボー、ダンボーが表示されとる。

 

テーブルタグのコード

 

テーブルタグのコードを使用して比較表を作成する場合には、ある程度の「HTML」知識が必要になる。

だがしかし、私にはそうした知識がないので「HTMLテーブルタグを自動作成する」ツールを使用する。

 

「HTMLテーブルタグを自動作成する」、ツールページに移動しよう。

初心者にもやさしい 簡単HTML作成

 

このツールを使用すれば、誰でも簡単に見やすい比較表の作成が可能になるのである。

 

 

「簡単HTML作成」のページに移動したら、比較表の詳細設定を行う。

自分の好きなように入力しよう。

ちなみに私は、上記のように設定した。

 

 

終わったら、「プレビュー」ボタンをクリックする。

 

 

プレビュー画面が表示される。

これで良かったら、画面を閉じよう。

 

 

そうしたら、次は「HTML作成」ボタンをクリックする。

「作成されたテキスト」欄に表示されるコードをコピーする。

 

 

コピーしたコードを、「投稿ページor固定ページ」のテキスト画面に貼り付ける。

 

 

ビジュアル画面で確認すると、上記のような表が表示される。

 

 

文字や画像などを入れれば、比較表の完成である。

ダンボーが表示されとる。

 

プラグイン

 

プラグインで比較表を作るなら、下記のプラグインが良いのではないだろうか。

 

■比較表なら「TablePress

■料金表なら「Easy Pricing Tables

 

特に料金表とかなら、「Easy Pricing Tables」でカッコイイのが作成できるぞ。

しかし、これらのプラグインを使うのは正直めんどくさいし、プラグインはできるならあまり入れたくないのである(サイトが重くなることがあるから)。

 

ただ、プラグインなどで「比較表」や「料金表」を作成すると納得のいくものは作れるのである。

以上で、見やすい比較表の作り方(Wordpress編)についての解説は終了する。

 

関連記事

 

スマートフォンでWordPressの表(table)を横スクロールできるようにする方法