WordPressプラグイン

オシャレな料金表を簡単に作れるWPプラグイン「Pricing Table by Supsystic」の使い方

あなたがもしいくつかのプランがあるサービスを提供しているのであれば、ひと目で比較できる料金表を作れるととても便利ですよね。

例えば、下図のfreeeのような料金表で比較できれば、サービスの比較と料金が一目瞭然でとてもわかりやすいですね。

今日は、そんな便利な料金表を簡単に作れるWordPressプラグインを紹介したいと思います。

料金表のイメージ図

ptbs1

プラグインの特徴

  • 簡単で直感的に料金表を作れる
  • いくつかテンプレートがあるので好きなテンプレートから選ぶことができる

プラグインのダウンロード

プラグインのダウンロードは下記のリンク先からもできるしWordPress内で「Pricing Table by Supsystic」と検索してもダウンロードが可能です。現在のバージョンは「1.3.1」。

Pricing Table by Supsystic
Developer: supsystic
Price: Free

プラグインの使い方

プラグインをダウンロードすると、メインサイドメニューに「Pricing Table by Supsystic」という項目が出てくる。「Add New Table」をクリックして「Table Name」からテーブルのテンプレートとテーブルの名前を選択します。

ptbs2

下図の中からテンプレートを選択できるようになります。

「Select」という表示のものは、無料で選択できますが、「Get in PRO」というのは、有料版で、1サイト29$払うと利用可能になります。

ptbs3

テーブルネームとテンプレートを選ぶと「Show All Tables」から料金表のカスタマイズができるページに移動します。

ptbs4

まずは、英語の部分をザッと日本語で解説していきます。

ptbs5

①カラム数を決めることができる。「Add Column」をクリックするとカラムが追加できる。(ちないみにカラムの削除は、料金表から直接行えるのでここでは追加だけしかできない)

②行数を加える事ができる。「Add Row」をクリックすると行数が増えていく。(行数の削除もカラムと同様に料金表から直接行うのでここでは追加だけしかできない)

③テーブル幅をpixelか%のどちらかで選択できる。

④料金表のフォントの種類を選ぶことができる。

⑤テーブルの位置を選択できる。左寄せ、右寄せ、真ん中寄せ、noneから選択できる。

⑥ディスクリプションの文字色を変更できる。

⑦ヘッダーの文字色を変更できる。

⑧バックグラウンドカラーの色を変更できる。

⑨ここにチェックを入れて、入れると、一つのカラムの幅を自由に設定できる。

⑩ディスクリプションカラムの表示非表示の切り替えができる。

⑪フッターの行の表示非表示の切り替えができる。

⑫ホバーアニメーションの表示非表示を設定できる。(ホバーアニメーションとは下図のような動きをつけるかつけないかという設定だ)

ptbs6

⑬行の文字色を変更できる。

⑭ヘッダーの行の表示非表示を変更できる。

⑮ディスクリプションの行の表示非表示を変更できる。

⑯文字の位置を変更できる。中央、左寄せ、右寄せから選択できる。

⑰料金表をレスポンシブデザインに対応させるかどうか選択できる。(チェックを入れると、スマホなどで表示された場合縦に並ぶように自動で調整される)

料金表の文章や値段を変更する

価格表の値段や文章を変更するのは、価格表に直接文書を打ち込んで変更します。

ptbs7

マウスオーバーすると、赤枠のようなメニューが出てきて、直接文字を打ち込んだりフォントサイズを変更したりといった、細かい設定ができるようになります。

行にマウスを合わせた状態で、ゴミ箱アイコンをクリックすると行を削除できます。

カラムの削除も同様の手順で可能です。

カラムの一番上(pro)の部分にマウスを合わせて、ゴミ箱アイコンをクリックするとカラムが一つ消えます。

このように直感的に、操作できるのでとても簡単です。

フッター部分の「sign up!」にマウスを合わせると、リンクを貼れるアイコンが出てくるので、決済ページヘのリンクはそちらから設定してください。

ptbs8

ショートコードを貼り付ける

「Show All Tables」の左上のほうにショートコードが表示されているので、そちらをコピーして、料金表を設定したい場所にコピーアンドペーストして貼り付けます。

ptbs9

貼り付けると、下図のように、料金表が貼付けされます。

ptbs10

まとめ

一つ気をつけてほしいのは、あなたの利用しているテーマの幅があまり広くない場合、カラム幅が4行だと表示がおかしくなってしまう。

そのような場合は3行などに狭くして利用するといいでしょう。

レスポンシブデザインを利用している人は、スマホでの表示状態もチェックして正しく表示されているか見ておいたほうがいいと思います。

最新の更新を
プッシュ通知で購読しよう



関連記事

  1. 短縮URLを生成してリンクのクリック数を計測できるWordPre…
  2. ピンタレスト風のMasonryレイアウトを作成できるWordPr…
  3. WordPressで記事投稿テンプレートを作れる「TinyMCE…
  4. WordPressの過去記事をコピーできる「Duplicate …
  5. サイトのリンク切れをチェックできるリンク切れチェッカーWPプラグ…
  6. ショートコードでカウントダウンタイマーを設置できるWPプラグイン…
  7. 固定ページに投稿ページと同じようなタグを挿入できるプラグイン「T…
  8. ひと目でわかる製品レビューを作れるWordPressプラグイン「…

コメント

  • トラックバックは利用できません。

  • コメント (3)

    • Sen
    • 2016年 11月 09日

    プラグインを入れてみたのですが、テーブルの文字などを変更後、Saveができません。ずっと更新状態のままになってしまいます。
    環境のせいなのかもしれませんが、Saveに時間がかかるなどありますでしょうか。なにかわかることがあるかと思いコメントさせてもらいました。

      • triggermind0511
      • 2016年 11月 09日

      僕のほうで、テーブル文字を変えてセーブしてみましたが、ちゃんとセーブできました。特に問題なく動作しています。
      他のプラグインと干渉している場合があるかもしれませんので、他のプラグインを一旦停止してサイド試してみてはいかがでしょうか?

    • Sen
    • 2016年 11月 09日

    返信ありがとうございます。
    他のプラグインをすべて停止して試してみましたが変わりませんでした。
    Settingなどは変更後、Saveできるのですが、テーブルの変更だけはダメでした。
    サーバーの環境のせいかもしれませんので、調べてみます。ありがとうございました。

おすすめ記事

LPテンプレートColorful(カラフル)をおすすめする9つの理由

この記事では、LPを簡単に作ることができるLPテンプレートColorful(カラフル)がどんな人にお…

WordPressにGoogleタグマネージャーを設定できる「DuracellTomi’s Google Tag Manager for WordPress」

WordPressにタグマネージャーを設定できるプラグインってないのかな〜と思っていたらありました。…

WordPressからプッシュ通知を自動で配信できる公式プラグイン「Push7」

Push7の購読者にWordPressを更新すると同時に自動通知できるプラグインが「Push7」です…

WordPressでメルマガ登録を促せるCTAプラグイン「WordPress Call To Action Plugin」

ブログを読み終わった後に「Ebookを無料でプレゼント」というボックスを見たことがある人は多いですよ…

パソコンが苦手な人がパソコンを好きになるための5ステップ

「パソコンの前に座るのが苦痛だな〜。パソコンってすごく難しいからいやだな〜。」と思っているそこのあな…

プッシュ通知を購読

Twitter でフォロー

PAGE TOP