- 投稿 2017/06/12更新 2018/05/01
- アフィリエイトブログ
ここでは、見やすい比較表の作り方(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作成」ボタンをクリックする。
「作成されたテキスト」欄に表示されるコードをコピーする。
コピーしたコードを、「投稿ページor固定ページ」のテキスト画面に貼り付ける。
ビジュアル画面で確認すると、上記のような表が表示される。
文字や画像などを入れれば、比較表の完成である。
プラグイン
プラグインで比較表を作るなら、下記のプラグインが良いのではないだろうか。
■比較表なら「TablePress」
■料金表なら「Easy Pricing Tables」
特に料金表とかなら、「Easy Pricing Tables」でカッコイイのが作成できるぞ。
しかし、これらのプラグインを使うのは正直めんどくさいし、プラグインはできるならあまり入れたくないのである(サイトが重くなることがあるから)。
ただ、プラグインなどで「比較表」や「料金表」を作成すると納得のいくものは作れるのである。
以上で、見やすい比較表の作り方(Wordpress編)についての解説は終了する。
関連記事