【初心者でも簡単!】ワードプレスのお洒落な表の作り方：Easy Pricing Tables使い方

こんにちは。きみーです。

ブログを書き始めて数か月、まだまだ記事数は少ないですが、そんな記事数でも記事内に表とか載せたなって思うことが多々あります。

私はこのブログをWordPress（ワードプレス）という物で書いているのですが、日々試行錯誤しながら何とか記事に仕上げてる感じです。

そして、ワードプレスって表を作る機能が初期設定だと無いんですよね～（意外！）

htmlとかで作ることはできるみたいですが、そんな英語の羅列わたしにはサッパリだし(´·ω·`)

そうなるとやっぱりプラグインの出番☆

ワードプレス使ってる人なら何かしらプラグインを入れていると思いますが、正直どれ入れて良いか分からなくないですか？？？

表作るプラグインも検索掛けるとすごい数出てくるし(;・∀・)

そして、簡単で使いやすくて、見た目綺麗だったりお洒落な表にしたいじゃないですかぁ～～～(´ε｀；)

そんな願いを叶えてくれるプラグインを発見したので紹介したいと思います！

今回は久しぶりにブログづくりネタです。

画像いっぱいにして、使い方が分かりやすくなるようにしたつもりなので、是非見て下さいね。

表作成プラグイン「Easy Pricing Tables」のインストール
ワードプレスで「Easy Pricing Tables」を使ったお洒落な表の作り方
作った表の設置：これがとっても簡単なんです♪
まとめ

表作成プラグイン「Easy Pricing Tables」のインストール

では早速プラグイン「Easy Pricing Tables」をインストールしていきたいと思います。

まずはワードプレスの画面の左のメニュー内の❶【プラグイン】をクリックして、❷【新規作成】を行います。

次に❸【キーワード】のところに「Pricing Tables WordPress Plugin – Easy Pricing Tables」を入れて検索します。

※「Easy Pricing Tables」だけでも大丈夫です。

下の画像の左上のような画像のプラグインが見つかったら、❹【今すぐインストール】をクリック。

インストール出来たら、❺【有効化】します。

これで準備は完了です。

ワードプレスで「Easy Pricing Tables」を使ったお洒落な表の作り方

では、ここからが本番！

表を作っていきたいと思います。

Pricing Tables　新規作成

ワードプレスの画面の左のメニュー内の「Pricing Tables」から❻【Add New】をクリックします。

そうすると❼新規の表が作成されます。

Content（内容入力）の操作方法

新規で表が作れたら次は内容を入力していきます。

「Content」と「Design」という２つのタブがあるので、「Content」の方で内容を入力していきます。

今回は表を６個作りたいと思います。

新規作成時には表が２つしかありませんので、右上の「New Columm」をクリックして表を増やします。

※１クリックで１つ表が増えます。

そして、左下にあるボタン３つが「プレビュー」や「保存」のボタンになります。

保存だけの場合は真ん中の「Save」

保存してプレビュー見たい場合は左の「Save & Preview」です。

今回の例では「ハンドメイドのイベント情報」一覧の表を作っていきます。

それでは、入力個所と実際のプレビュー画像を照らし合わせながら見ていきましょう。

【☆Feature】今回は「BIGイベント」としていますが、これは別画面から言葉を変更できるので、「オススメ」とか「イチオシ」、「５０％OFF」とか注目してほしい時に使います。
【Naｍe】今回は「イベント名」を入れます。
表の内容によってタイトルや見出し、商品名など入れると良いでしょう。
【Pricing】「イベント開催日」を入れます。
「Pricing」となっているようにこの表作成プラグイン自体は価格表を想定して作ってるみたいですね。
【Features】会場の所在や規模などを記載していきます。
プレビューイメージの方には１～７まで点線で区切られていますが、入力画面で改行した位置が点線の区切りとなります。
また、画像にも記載してありますが、表が６個あり、その中で項目が７個ある表と８個ある表が混在している場合には、項目が一番多い８枠に揃えられ、７個しかない表の８個目は空白の枠となります。
【Button Text】リンクボタンの記載名を入れます。
今回は「イベント公式情報」と入力。
【Button URL】５のリンク先のアドレスを入力します。

この要領で、表６個の情報を入力すれば、「Content」タブの入力は完了です。

Design（デザイン変更）の操作方法

「Design」タブでは表のデザインを変更するメニューと思ってもらえれば良いでしょう。

大きく４つのメニューで構成されていますので、順番に設定していきましょう。

General Setting

一番上の「General Setting」から設定していきます。

このメニューでは、「Content」タブであった「☆Feature」の表示名称の設定と、表の角の形状を設定します。

❶【Featured Label Text】「Content」タブであった「☆Feature」の表示名称の設定です。

※表ごとの個別の指定はできません。

❷【Border Radius】表の角の形状を設定します。

最小：角なし（No Rounded Corners）～最大：20pxまでの設定が可能です。

Font Sizes

２つ目の「Font Sizes」のメニューでは、その名の通り文字のサイズの設定を行います。

基本的には上から順番になっているので、分かりやすいですね。

【Featured Label Font Size】「BIGイベント」の文字サイズ
【Plan Name Font Size】「イベント名」の文字サイズ
【Price Font Size】「開催日」の文字サイズ
【Bullet Item Font Size】「詳細」の文字サイズ
【Button Font Size】リンクボタン「イベント公式情報」の文字サイズ

Button Colors

「Button Colors」のメニューでは、基本メニューで唯一色変更できる設定となっている「リンクボタン」の色設定を行います。

初期設定では画像にあるように青色と赤色が設定されています。

上段と下段２つの設定個所があり、上段の方は通常のリンクボタンで下段の方は「☆Feature」にチェックを入れた表のリンクボタンの色設定です。

色の設定は４種類で、上から

ボタンのベースの色
ボタンの立体っぽくなっている部分の色
マウスオーバー（マウスをボタン上に持ってきた）時の色
文字色

Costom CSS

最後に「Costom CSS」の設定です。

ここではこれまでのメニューで変更することの出来ない部分をカスタムする事が可能です。

「BIGイベント」の表記部分のベースの色や文字色などを変えたい場合もここで行います。

ここでの変更の仕方は説明が長くなってしまうので、また次回別の記事でまとめて書きたいと思います。

プレビュー

では、設定がすべて終わったところで、プレビューで確認してみましょう。

左下の一番左のボタン「Save & Preview」をクリックします。

※上の画像は表全体が表示されるように倍率８０％で表示しているものになります。

左上にこの表の名前が表示されますが、テストプレビュー時にしか表示されませんので、自分の分かりやすい名前を付けておきましょう。

確認をして、修正したい個所があれば管理画面に戻って修正、プレビュー確認の順序で納得いくように仕上げます。

「Easy Pricing Tables」はレスポンシブ対応！
上の確認画面では６個の表にしたこともあり、かなり細長い窮屈な表が出来上がりました。
「Easy Pricing Tables」では作成した表の数を画面の横幅で均等される仕組みになっています。
なので、表を３つにすれば１つの表の横幅のサイズは先ほどの表の倍になり、見た目もゆったりとして見やすい表になるというわけです。
そして、もう１つ良い点として「レスポンシブ対応」ということ！
下の画像を見てもらうと、一番左が一般的なPCサイズで表示した場合です。
そして真ん中が画面の幅を少し縮めてみた状態。
元々６分割で窮屈だったのにさらに窮屈さがヤバイです(；·∀·)
でも画面の幅に合わせて表の横幅が自動で調整されているのが分かります。

そして更に横幅を縮めると、一番右のように６個の内１つだけの状態で縦に６個表が並びました。
※スマホで見た時と同じような状態です。
ここからも分かるように、ブログを見る方のPC環境に左右されず自動で調整されるのは優れものですね☆
たまにネットを見ていると画面から写真や表、地図などが飛び出して切れて見えないというサイトを見かけますがその状態にはならないということです。