ウェブサイトには価格表を掲載していますか？芝生の手入れに関する価格表かもしれませんし、ソフトウェアのパッケージのものかもしれません。技術的な分野からヨガの教室まで、大抵の企業なら自社のサービスを分かりやすく紹介するために価格表が使えます。最適なWordPressの価格表作成プラグインを確認し、それからプラグインをウェブサイトに実装する流れが一般的です。

ところで、価格表の作成はなぜ重要なのでしょうか？

その答えは明白なようにも思えますが（コンバージョン率を上げたいとお思いでしょう？）、その理由をきちんと理解するのは良いことです。何故、プラグインを利用した価格表は単なる箇条書きや文章、画像などよりも売り上げを伸ばすのに効果があるのでしょうか？

  • 価格表により、サービスやパッケージの比較や概要を簡潔に示すことができる。
  • 最も重要な情報を価格表にまとめることで、その他の補足的な情報と区別することができる。
  • 価格表には分かりやすいCTA（コール・トゥー・アクション）ボタンがあり、購入を進めるための次の手順を明確化できる。
  • 多くの価格表にはパッケージやプランの名前が明記されているため、顧客が理解しやすい。
  • 文字を大きくしたり図を利用したりすることで特定の単語やプラン、機能を強調できる。
  • 文章だけの価格表よりも図を利用したものの方が、はるかに興味が湧く。
  • 催促（「特別価格はまもなく終了」など）したり、無料体験版などでコンバージョン率を向上することができる。
  • 価格表はスペースをとらないため、その分「よくある質問」やチャットボックスなど顧客向けのその他の情報を追加できる。
Having a sleek looking prices page can make your services pop and increase conversions. Check out these handy WordPress pricing table plugins. 🛒 クリックでつぶやく

WordPressの価格表プラグインに必要な機能は？

WordPressの価格表作成プラグインの利点を理解したところで、今度は必要な機能を考えてみましょう。

  • 無料版または有料版というオプション – 私のお気に入りの価格表作成プラグインでは料金プランを魅力的に見せる基本的な価格表が作成できます。さらに追加の機能がある有料版を利用するにしても、それほど高額ではありません。
  • 有名なページビルダーへの組み込み機能– ページビルダーの中には独自の価格表が作成できるものもあります。人気のあるものにはDivi Builder、Elementor、WPBakeryなどがあります。
  • あっという間に価格表が作成できるスキンやテーマ—価格表の色やフォント、アイコンなどをカスタマイズできるツールもあると便利でしょう。
  • 特定のプランにバッジを表示させる設定 – 「お値打ち品」「一番人気」などのバッジを表示させることも。 
  • 外貨支払いオプション—世界中の顧客に対応できる仕様です。
  • 各料金プランの大きくカスタマイズ可能なボタン
  • 便利なドラッグ&ドロップビルダー
  • CSSとHTMLも使える仕様だと、上級者が複雑な微調整をしたい時に便利です。

他にも価格表を魅力的にする機能はいくつもありますが、まずは基本を押さえるのが良いでしょう。

おすすめのWordPress価格表作成プラグインの比較 ( +自分で作成する方法)

  1. Responsive Pricing Table by WP Darko
  2. Go Pricing
  3. Pricing Tables WordPress Plugin – Easy Pricing Tables
  4. Pricing Table by Supsystic
  5. CSS3 Responsive WordPress Compare Pricing Tables
  6. ARPrice – Responsive WordPress Pricing Table Plugin
  7. WP Pricing Table Builder – Responsive Pricing Plans Plugin for WordPress
  8. Pricing Table – Price list, Price Table, Easy Pricing Table
  9. WRC Pricing Tables
  10. 一からWordPressの価格表を作成する方法

価格表作成プラグインやWordPressサイトに関しては、利用できる選択肢に事欠きません。おすすめの価格表作成プラグインには無料のものもあれば、無料版のない有料だけのものもあります。ご紹介するプラグインはどれも一見の価値があるものばかりですが、そのうちいくつかには、特定の業界や企業のウェブサイトでの使用に最適な独自の機能が備わっています。

1. Responsive Pricing Table by WP Darko

Responsive Pricing Tableは利用者に最も親切な価格表作成用のパッケージの一つです。無制限にプランを組み、自由に表を作成できる素晴らしい無料のバージョンがあります。一方で、スキンや列の幅を均一にするための「Equalizer」などの便利な機能を使いたい場合、有料版へのアップグレードも可能です。

Responsive Pricing Table WordPressプラグイン
Responsive Pricing Table WordPressプラグイン

作成する価格表は、シンプルな入力欄とバックエンドボタンを実装。標準装備の入力欄の一例としては、料金、プラン内容、プランの名前、アイコンなどがあります。カスタマイズ可能なボタンにはStripeやPayPalなどをリンクさせることができますし、上級者にはカスタムCSSのクラス設定が役に立つでしょう。

料金

無料のプランがあります。

有料版のプラグインはウェブサイト1件での利用の場合19ドル、または無制限のウェブサイトでの利用の場合49ドルです。

Darkoは他のプラグインも販売しており、全てのプラグインが入ったパッケージは79ドルで購入できます。企業によっては便利なパッケージでしょう。 

おすすめの理由

  • 無料版でも無制限に表やプランを利用でき、様々な分野の小規模なビジネスにとって必要なツールが揃う
  • 有料版も比較的低額で購入可能
  • モダンなデザインのスキンは様々なボタンやフォントが選べ、幅広いカスタマイズが可能
  • アイコンや画像などが利用できる
  • 無制限にプランの特徴を記載できる
  • CTA（コール・トゥー・アクション）ボタンはPayPalなど他社の支払いシステムへのリンクが可能
  • 様々な国での利用を考慮し、幅広い外貨記号が選択可能
  • おすすめのプランにバッジを表示することが可能
  • 定期支払プラン（月次もしくは年次）の表示設定が可能

2. Go Pricing

Go Pricing のアプリには無料版は存在しませんが、CodeCanyonでは何千もの売上を誇り、レビューも高評価。さらにこの最高の価格表作成プラグインの一つは、たったの27ドルで購入可能です。

Go Pricing – WordPress Responsive Pricing Tables
Go Pricing – WordPress Responsive Pricing Tables

Go Pricingプラグインはどこが優れているのでしょうか？まず、モダンな色使いと見やすい余白が十分にある、美しい価格表が特徴です。また、特定の業界向けに特別に作られたものなど、幅広いテーマから選択することができます。 さらに、いくつかのページビルダーと統合している点と、コーディングに詳しくなくても簡単に価格表が作れるようショートコードにも対応している点も特筆すべきでしょう。

料金

一回限りの料金は27ドル、1年間のサポート延長は8.25ドルです。

おすすめの理由

  • ヘッダーやボディー、ボタンのエリアなど価格表の各項目はそれぞれのビジュアルエディタで編集可能
  • プラグイン購入後、250以上の表のサンプルが利用可能。テンプレートを使えば、殆どの企業はあっという間に価格表のページを作成することが可能
  • ページビルダーとの統合によりドラッグ&ドロップの機能が利用可能。Go PricingはBeaver Builder、Elementor、WPBakeryとの統合に対応
  • どのようなレベルの利用者も簡単に価格表が作成できる。また、素晴らしいバックエンドのインターフェースが備わっており、ショートコード、インポート、設定などが充実
  • 価格表が魅力的になるアニメーションも挿入可能
  • 表が見やすくなるような2000以上のアイコンフォントを装備
  • 更にこだわりたい人はカスタムCSSモジュールも使える
  • 様々なメディア、PayPalのボタン、Googleマップなどの機能も追加できる

3. Pricing Tables WordPress Plugin – Easy Pricing Tables

余分な要素のないシンプルな比較表、価格表を作成したい場合、Pricing Tables WordPress プラグインが堅実な選択肢でしょう。無料版と有料版があり、有料版は1つのウェブサイトで1年間29ドル、無制限のウェブサイトで1年間99ドルです。有料版ではWooCommerceのアドオンやGoogleアナリティクスとの統合など、魅力的な追加の機能が利用できます。

Pricing Tables WordPress Plugin – Easy Pricing Tables
Pricing Tables WordPress Plugin – Easy Pricing Tables

有料版はその他、Easy Digital Downloads、Stripe、Pricing Toggle などを実装できます。さらに、既存のデザイン10個をもとにデザインを作成できます。上述のとおり、このプラグインは最もシンプルな価格表を作成できるプラグインの一つなので、アニメーションや図などは不要という方におすすめです。

料金

基本のプラグインは無料です。

有料版は1ウェブサイトあたり年間で29ドル、5ウェブサイトあたり年間59ドル、無制限のウェブサイトでの使用で年間99ドルです。

おすすめの理由

  • 価格表のデザインはシンプルで見やすく、不必要な要素がないモダンな見た目
  • 列やボタン、フォントなど価格表の全ての項目の色やその他の要素が調整可能
  • 全ての価格表はバックエンドのシンプルにリスト化された視覚的な入力欄から操作（価格表のフロントエンドでの表示と同様の構成）
  • 一つ、または複数のプランを目立たせることが可能
  • 列をドラッグ＆ドロップで並べ替えることが可能
  • 価格表のより高度なカスタマイズのために、カスタムCSSモジュールが使える
  • 無料版でも価格表に無制限の行を作成可能
  • 有料版ではWooCommerce、Google アナリティクス、Stripeなどと統合できる

4. Pricing Table by Supsystic

Supsysticはフォトギャラリーや、ポップアップ画面、データ表などが作れる様々なプラグインを作成していることで有名ですが、今回はたくさんの機能を備えた無料のプラグインである Pricing Table プラグインをご紹介します。この無料版のプラグインには既存のテンプレートやホバーアニメーション、ボタンのカスタマイズなどの機能が備わっています。表の情報を簡単にインポートしたりエクスポートしたりすることも可能です。

Pricing Table by Supsystic
Pricing Table by Supsystic

有料版のプラグインも1ウェブサイトあたり年間で39ドルから有り、たくさんのテンプレートの利用と権限の管理ができるので、なかなかおすすめです。総合的に見て「有料版は避け、無料のプラグインのみを利用したい」という場合には、理想的な価格表作成プラグインの一つだと言えるでしょう。ただ、有料のテンプレートでかなり見栄えがよくなり、それほど高額でもありません。

料金

無料版があります。

有料版へのアップグレードは1ウェブサイトあたり39ドル。5つのウェブサイトの場合は39ドルになります。無制限のウェブサイトでの利用の場合は149ドルです。

おすすめの理由

  • SupsysticのPricing Tableプラグインは無料の価格表作成プラグインの中では、一番多くの機能を備えているものの一つ。有料版の違いは、より良いテンプレートが利用できるようになること
  • 価格表はレスポンシブ対応の明るい色味の美しいものばかり
  • 無料版のテンプレートは良質で、有料版は更に素晴らしい
  • 一年分を前もって購入、もしくはその日の分のみ購入など、特別な選択肢を提示するスイッチを実装できる
  • 特定のプランをアイコンで強調できる
  • ショートコード、カラースライダー、視覚的な構築機能などのツールの使用により、表の作成中にコードに触れずに済む仕様
  • 表をより魅力的にするためのホバーアニメーション機能
  • 事業の特定の部分や特定機能を強調できる画像や動画の採用
  • WordPressの管理画面にはドラッグ&ドロップビルダーを搭載

5. CSS3 Responsive WordPress Compare Pricing Tables

CSS3 Responsive pricing table プラグインは20ドルという価格で十分すぎるほどの機能を誇ります。CodeCanyonでしか販売されておらず、無料版は存在しないことは留意しなければなりません。とは言え、この高評価のレビューのついた有料のプラグインに20ドルを支払うのをためらう人は少ないでしょう。このプラグインにはいくつもの美しいテンプレートが用意されています。色やフォントを変えられるほか、おすすめのプランをハイライトすることもできます。

CSS3 Responsive WordPress Compare Pricing Tables
CSS3 Responsive WordPress Compare Pricing Tables

今回ご紹介している価格表の多くはレスポンシブ対応ですが、私がスマートフォンやタブレットで試したところ、このプラグインの表は特に綺麗に表示されました。また開発者の応対も良く、新機能を開発してアップデートとして公開する意欲があるようです。例えば、この記事の執筆時点で3つの新しい機能のリリースがありました。スライディングカラム、レスポンシブモード、データのインポート/エクスポートです。

料金

全ての機能込みで20ドル。 

5.63ドルでサポートを1年間延長できます。無料版は存在しません。 

おすすめの理由

  • これだけの機能を備えた価格表のプラグインでは断トツに安価
  • 20種類のカラーバリエーション、60種類のリボン、42種類のばつ印のアイコン、2種類の表のスタイルなどの豊富なカスタマイズツールにより、何千通りものオリジナルの価格表の作成が可能
  • 列と行を無制限に作成可能
  • CSS、HTMLモジュールで更なるカスタマイズが可能
  • 列と行の幅と高さの調整も可能
  • マルチサイトに対応
  • ウェブサイト上何処へでも価格表を設置できるショートコード
  • 作成済みの価格表のデータを別の価格表に転用したり、スプレッドシートからデータをインポートしたりするための、データのインポート/エクスポート機能
  • チェックマークやばつ印などのアイコン挿入機能
  • より多くの視覚的要素を追加しプランを目立たせるため、アニメーションやメディアの挿入も可能

6. ARPrice – Responsive WordPress Pricing Table Plugin

ARPriceプラグインもCodeCanyonにて販売されていますが、こちらの販売価格は23ドルです。企業や個人ユーザーの多くは、一部の機能が利用できない無料のプラグインを使うのではなく、少額の料金を払ってでも必要な機能を手に入れた方がいい、というのが私たちの考えです。ともかく、この価格表作成プラグインは背景のイメージやアイコンなどの幾つかのメディア要素に対応しているため、今回ご紹介する中でも最も見栄えの良いものの一つでしょう。

ARPrice - WordPress Pricing Table Plugin
ARPrice – WordPress Pricing Table Plugin

バックエンドデザイナーは視覚的なつくりで、実際のウェブサイトでどの様に表示されるかが、そのままわかります。次に料金プランの単位を年間、月間、その他の期間から選べます。まずはテンプレートを選択し、続いてデータをインポートし、効果を変更したりフォントを選択するといった流れです。総合的に見て、ARPriceプラグインは美しいユーザーインターフェース、優れたフロントエンドのバランスがいい選択肢です。

料金

一回限りの料金は23ドル。1年間のサポート延長で6.75ドルです。 

おすすめの理由

  • 有料のプラグインとしてはお手頃な価格
  • 300以上の価格表のテンプレートがダウンロード可能
  • 無制限のカラーバリエーション、完全レスポンシブ対応のテンプレート、切り替え自在の価格表示ボタン、3,000個以上のアイコンなど、充実のカスタマイズツール
  • 価格表をより魅力的に見せるためのアニメーションエフェクト
  • 更なるカスタマイズのためのCSSモジュールとCSSガイダンスシステム
  • Goggleマップなど他社のプログラムとの統合も可能
  • リアルタイムのテンプレートエディターにより、列やヘッダー、背景などを調整する美しい視覚的インターフェースが実現
  • 嬉しい「チームショーケース」機能が付いており、ウェブサイト上に従業員やスタッフの情報を記載できる
  • Elementor、Gutenberg、WPBakeryなどの有名なページビルダーに対応

7. WP Pricing Table Builder – Responsive Pricing Plans Plugin for WordPress

もう一つお手頃価格の価格表作成プラグインをご紹介します。WP Pricing Table Builderは90種類のテンプレートから選ぶことができます。また、カスタムテーマジェネレーターとドラッグ&ドロップビルダーにより、操作性の高いデザインが可能です。

WP Pricing Table Builder – WordPress用レスポンシブ価格表プラグイン
WP Pricing Table Builder – WordPress用レスポンシブ価格表プラグイン

このプラグインのいいところは、「何百ものパターンのテンプレート」がないこと。代わりに、開発者は質に重点を置き、すべてのテンプレートをモダンで美しいものに仕上げるためにかなりの時間を費やしたことがわかります。テーマカラージェネレーターは、他のプラグインにはない興味深い機能です—選択した1色を使用して、カラーテーマが生成できます。これを使えば、価格表の色合いについて心配する必要はなさそうです。

料金

プラグインの値段は24ドル。1年間のサポート延長には7.13ドルかかります。

おすすめの理由

  • 89個のテンプレートはカラフルで汎用性が高く、さまざまな業界で便利
  • 価格表に、さまざまな色、機能のリスト、チェックマークやX印のアイコンといった資格的要素を組み込める
  • お得な値段、割引、または新しい価格プランを強調する必要がある場合には、価格プランの一部にタグを挿入可能
  • 金額と通貨を簡単に変更できる
  • 情報アイコン（スクロールで詳細情報を表示）を追加できる
  • ドラッグ＆ドロップエディターを使用して、価格表のほぼすべての要素をカスタマイズ可能
  • 色、幅、リスト、アイコンの調整が特に細かな修正に便利
  • カラージェネレーターは、色の組み合わせに自信がない人にとって最適な出発点。たとえば、ロゴから元となる色を挿入し、それにどのような色がしっくりくるのか確認できる

8. Pricing Table – Price list, Price Table, Easy Pricing Table

Pricing Table – Price List pluginは、A WP Life提供のプラグインです。これはやや新しいものですが、すでに信頼を勝ち得ています。無料版でも、プラグインにはいくつかのテンプレートが付属し、カスタマイズもできます。 アニメーションがすでに用意されており、アイコンや機能のリストといったアイテムの挿入も可能。「今すぐ購入」ボタンをリストに配置し、「注目」や「人気」といったタグを組み込むのがおすすめです。

Pricing Table – 価格表、価格リスト、簡単に使える価格表
Pricing Table – 価格表、価格リスト、簡単に使える価格表

このプラグインのプレミアム版では機能はそのままに、19の追加のテンプレートをご利用いただけて…たったの9.99ドル。あなたのブランドにぴったりなテンプレートで是非ともご利用ください！

料金

無料で利用でき、プレミアム版にアップグレードすると9.99ドルかかります。

おすすめの理由

  • 無料版でもすべての優れた機能を利用できる。アップグレードが必要となる唯一の理由は、無料のプラグインにない特定のテンプレートを使うこと
  • いくつかの見栄えの良い価格表テンプレートがすでに無料版にアリ。アップグレードをすれば、さらに約20のテンプレートが利用できる
  • プラグインに付属するすべての表は、完全にレスポンシブ
  • アイコンを使用すれば、人の目を引く表が作成できる
  • ショートコードで、ウェブサイトのどこにでも表を配置可能
  • 価格表は、ボタンをクリックするだけで追加、削除できる
  • 無制限に、ボタンの色、ヘッダーの色をカスタマイズ可能
  • ダッシュボードからカスタムCSSとしてスタイルを適用可能
  • デザイン画面は完全なビジュアルビルダーではないものの、複数の列で構成され、価格表の外観を予め伺い知ることができる

9. WRC Pricing Tables

WRC Pricing Tablesプラグインは無料のプラグインですが、10ドルでアップグレードすることもできます。プレミアムバージョンはもう少し高度で、500以上の追加のテンプレートが利用できる、PayPalとの統合、月額プランと年額プランを切り替えるための価格スイッチもあります。プレミアムプランには他にもいくつかの機能が付属しており、価格も安いため、購入を検討してみる価値はあるでしょう。

WRC Pricing Tables
WRC Pricing Tables

無料版であっても、シンプルな価格表を作成するのには便利。しかも作成できる行と列の数に制限はありません。すべてのデザインは、ドラッグ＆ドロップエディターから行います。私が、WRC Pricing Tablesプラグインで最も気に入っている点の1つは、カラーピッカーを利用できること—好きな場所から色を取得すると、そこからランダムな表デザインが生成されます。

料金

無料で利用可能。アップグレードは10ドルです。

おすすめの理由

  • WRC Pricing Tablesプラグインは、無料版でも十分に優れた機能を備えており、たった10ドル（1回限りの支払い）で完全なプレミアムソリューションにアップグレード可能
  • ショートコードが使えるので、WordPressサイトのどこにでも価格表を配置可能（ショートコードは任意のページ、投稿、または潜在的にはウィジェットに利用することができます）
  • Font Awesomeアイコンを使えば、デザインに視覚的なスパイスが
  • プラグインはGoogleフォントもサポート
  • PayPalボタンの統合により、支払いの受け取りが可能に
  • プラグインには、かなりの数のテンプレートが付属
  • 追加できる行と列の数に制限はなく、価格表を複製して後で保存することもできる
  • 上級開発者はカスタムCSSを使用し表をさらに改造可能

あなたにとって一番最適なのはどのWordPress価格表プラグイン？

上記のプラグインはすべて、試してみる価値があります。それでも、皆さんの判断をより簡単にするために、こんな指標をご用意しました。

今回ご紹介した他のすべての価格表プラグインにそれぞれの強みがありますが、これらが、私が特におすすめするものです。

それでは、どのプラグインの使用にも興味がなく、独自の価格表をコーディングでつくりたい場合はどうでしょうか？

もちろん、作り方をご紹介します。

WordPressでゼロから価格表を自作する方法

ゼロから価格表を作成するには、HTMLコードを使用して表の構造を組み立て、CSSでスタイルを調整します。

開始するには、WordPress Webサイトにログインし、「ダッシュボード」に移動して、「ページ」→「新規追加」をクリックします。 価格表を表示したい既存のページにコードを追加することもできます。

WordPressエディターが読み込まれたら、テキストモードに切り替えて、次のコードを貼り付けます。

<div class="pricing-table">
<div class="one-third first">
<ul>
       <li class="header">Basic</li>
       <li class="grey-blue">$ 9.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
              <li>List Item #4</li>
              <li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a>
</div>
<div class="middle one-third">
<ul> 
       <li class="header-blue">Pro</li>
       <li class="light-blue">$ 99.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
               <li>List Item #4</li>
               <li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a> 
</div>
<div class="one-third">
<ul>
       <li class="header">Business</li>
       <li class="grey-blue">$ 199.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
               <li>List Item #4</li>
               <li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a> 
</div>
</div>

コードはかなり単純です。まず、価格表の大枠となるdivを作成し、CSSで簡単にスタイルを調整できるようにします。次に、3つの表を作成するため、それぞれを3分の1列にわけます。最後の部分は表そのものであり、ヘッダーと価格欄にクラスが追加されており、表の他の部分よりも目立つようになっています。

「公開」または「更新」をクリックする前に、[pre]<li>タグと</li>[/pre]タグの間のテキストを独自のものに置き換え、リンクの「href」部分に支払い用のリンクを設定するようにしてください。

すべての情報を置き換えたら、新しいページを作成した場合は「公開」を、既存のページに表を追加した場合は「更新」をクリックします。

ページを見ると、価格表が非常にシンプルであることがわかります。これにスタイリングを施しましょう。

「子テーマ」を使用している場合、次のコードを子テーマのスタイルシートまたはカスタムCSSエディターに追加してください。

コードの最初の部分は、価格表が列になり表示されるための設定です。3つ以上の表を表示する場合には、このクラスから簡単に調整することができます。

/* ## Column Classes
--------------------------------------------- */
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
float: left;
margin-left: 2.564102564102564%;
}
.one-half,
.three-sixths,
.two-fourths {
width: 48.717948717948715%;
}

.one-third,
.two-sixths {
width: 31.623931623931625%;
}
.four-sixths,
.two-thirds {
width: 65.81196581196582%;
}

.one-fourth {
width: 23.076923076923077%;
}
.three-fourths {
width: 74.35897435897436%;
}
.one-sixth {
width: 14.52991452991453%;
}
.five-sixths {
width: 82.90598290598291%;

}
.first {
clear: both;
margin-left: 0;
}

2つ目の部分で表のスタイルを調整します。

/* ## Pricing Table
 --------------------------------------------- */

.pricing-table {
 line-height: 1;
 }
 li.header {
 background-color: #2f79a9;
 color: #fff !important;
 font-size: 25px;
 border-bottom: 1px solid #2f79a9 !important;
 margin-bottom: 0 !important;
 }
 li.grey-blue {
 background-color: #569dcc;
 color: #fff !important;
 font-size: 20px;
 }

li.header-blue {
 background-color: #00b9eb;
 color: #fff !important;
 border-bottom: 1px solid #00b9eb !important;
 font-size: 25px;
 margin-bottom: 0 !important;
 }
 li.light-blue {
 background-color: #72dffd;
 color: #fff !important;
 font-size: 20px;
 }

.middle {
 box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
 }
 .pricing-table .one-third {
 background-color: #fff;
 margin: 20px 5px;
 padding: 40px;
 width: 32.33%;
 }

.pricing-table .one-third:nth-child(3n+1),
 .pricing-table .one-third:nth-child(3n+2),
 .pricing-table .one-third:nth-child(3n) {
 border: 1px solid #ddd;
 }

.pricing-table .one-third ul {
 margin: 0;
 }

.pricing-table ul li {
 border-bottom: 1px solid #ddd;
 color: #333;
 margin-bottom: 10px;
 padding: 10px;
 text-align: center;
 list-style-type: none;
 }

.pricing-table a.pricing-button {
 background-color: #00b9eb;
 border: 3px solid #00b9eb;
 color: #fff;
 display: block;
 text-align: center;
 padding: 16px 24px;
 }

.pricing-table a.pricing-button:hover {
 background-color: #000;
 border: 3px solid #000;
 color: #fff;
 }

/* Pricing Table - Media Queries for Mobile Devices
 --------------------------------------------- */

@media only screen and (max-width: 1140px) {
 .pricing-table .one-third {
 width: 32%;
 }
 }

@media only screen and (max-width: 800px) {
 .pricing-table .one-third {
 width: 100%;
 }
 }

@media only screen and (max-width: 568px) {
 .pricing-table .one-third {
 width: 100%;
 }
 }

@media only screen and (max-width: 480px) {
 .pricing-table .one-third {
 width: 100%;
 }
 }

@media only screen and (max-width: 420px) {
 .pricing-table .one-third {
 width: 100%;
 margin: 20px 0;
 }
 }

価格表にシンプルで基本的なスタイルを設定し、目立つようにヘッダーと価格を別のスタイルにしました。また、特定のパッケージを強調するために、中央の表の周りにボックスシャドウを追加しました。最後に、メディアクエリを追加し、表をレスポンシブにしました。

pricing table in wordpress with code
全て指示通りにこなすと、こんな見た目に仕上がります

両方のCSSスニペットを貼り付けたら、「ファイルの更新」をクリックします。次に、ページを見て、すべてが希望どおりに表示されているかどうかチェックしてください。

価格表についてご質問がある場合、または他の人への提案がある場合には、コメントでお知らせください！

アプリケーション、データベース、WordPressサイトのすべてを一箇所で。Kinstaの高性能クラウドプラットフォームでは、次のような便利な性能や機能の数々をご用意しています。

  • MyKinstaでの簡単な設定と管理
  • 24時間年中無休のWordPressエンジニアによるサポート
  • 最高レベルのGoogle Cloud Platformハードウェアとネットワーク（Kubernetesにより優れた拡張性を実現）
  • 速度と堅牢性を両立するエンタープライズレベルのCloudflare統合
  • 世界各地35箇所のデータセンターと275に達するPoP（世界規模でオーディエンスに訴求可能）

アプリケーションホスティング、データベースホスティングを実質無料からご利用いただけます。プラン一覧をご覧いただくか、営業までお気軽にお問い合わせください。