いつも【初心者のためのWordpress完全マニュアルブログ】をご覧いただきありがとうございます。
Webサイトは誰でも作れる！このブログでは、Web開発知識や経験のない初心者の方でも、ドラッグ&ドロップなどの簡単操作でできるウェブサイト作りを提案しています。

このStep By Stepチュートリアルの通りに作っていくだけで、サンプルの様なスタイリッシュなウェブサイトが作れちゃいます！

 前回までのおさらい

Diviテーマ Step By Stepチュートリアル サンプルデザイン:  https://yukifel-divitutorial.com/

Diviテーマの購入はこちら:  https://www.elegantthemes.com

前回までのチュートリアル

• Step1: テーマのセットアップ
• Step2: ランディングページ・ナビゲーションメニューの作成
• Step3: コラム・広告モジュールの使い方
• Step4: メンバープロフィールの作り方
• Step5: カウンターの設置方法

ストック画像オススメ

Pexels:　無料だけどやたらと解像度の良い、クオリティの高いストック画像が著作権フリーでダウンロードできます。ちなみにこのチュートリアルで使っている画像は、著作権を考慮して、大体このサイトから取得しています。

Shutterstock: 有料には有料の良さがある！種類の豊富さとクオリティの高さはお墨付き。ネットサーフィンをしていて、この画像いいなと思った画像はだいたいShutterstockと言っても過言ではありません。ただ有料であることには間違いないので、トップ画像とかここぞという場所に！

今回は世界人気No.1 WordPressテーマ【Divi】Step By Stepチュートリアルシリーズ第6弾ということで、価格表モジュールを使ったプライステーブルの作り方をご紹介します。

サンプルで言う所のこの部分です。

価格表モジュールの使い方

①　セクションを追加して、価格表モジュールを追加してみよう。

ではいつもの様に、編集したいページでビジュアルビルダーを立ち上げて、新規セクションを追加します。

今回は、通常セクションを使用します。

次にコラムを作成します。コラムの数はお好みで選択してください。今回やり方が２通りあって、最初のサンプルの様に価格表同士の間を多めに空けたい方は、２コラム以上を選択してください。

逆に下のサンプル画像の様に、価格表同士をくっついたデフォルトの価格表を使いたい方は、１コラムを選択してください。

このやり方で、CSSなどで後から余白をマニュアルで入れてしまうと、下の図の様にコラムが落ちてしまうので、ご注意！

では早速作成したコラムに価格表モジュールを挿入します。

②　価格表モジュールの設定

価格表設定ウィンドウのコンテンツタブにある、グレイの+アイコンをクリックして、新しいアイテムの追加をします。

新しいアイテムを作成すると、以下の画像の様にコンテンツを記入することができます。

タイトル・サブタイトル：価格表のタイトルとサブタイトル。サブタイトルはタイトルの下に表示されます。

通貨:　使用する通貨を記入してください。　例) $、￥、€など

毎: 何毎の値段なのかを表示できます。　例)月、オーダーなど

価格: プランの値段などです。コンマはマニュアルで打ち込まないと表示されません。

ボタンテキスト:　ボタン内のテキストを記入できます。（リンク先を打ち込むまでは表示されません）

コンテンツ: 値段の詳細などを打ち込めます。

コンテンツを入力したら、デザインタブをクリックします。

レイアウトの中にあるこの表を注目にするをはいにすると、他の値段表と差別化できます。また、背景色などの色も変更できます。

2コラム以上を選択した人

２コラム以上を選択した人は、ここをクリックして、デザインの設定に進んでください。

③　アイテムを複製する

下の赤太枠で囲ってある、矢印ボタンをクリックして前の画面に戻ります。

さらに、下の画像の様に赤太枠で囲んであるアイコンをクリックして、アイテムを追加します。（間違って作成した場合は、ゴミ箱アイコンをクリックすると、削除できます。）

アイコンを複製したら、先ほどと同じ要領で、コンテンツを入力していきます。

④　モジュールのデザイン設定。

先ほどのアイテムを複製した時と同じ様に、左隅にある矢印アイコンをクリックして、価格表設定のトップに戻ったら、コンテンツタブをクリックします。

要素

ドット表示：　はいにすると、コンテンツ内の箇条書きの部分に、ブレットを表示させるかさせないかを選択できます。

背景

特集テーブル背景色：　この表を注目にするに設定した価格表の背景色を設定できます（サンプルの様に画像を入れたい人は設定しないで構いません）

テーブルヘッダー背景色：　価格表のヘッダー部分の背景色を設定できます。

特集テーブルヘッダー背景色：　この表を注目にするに設定した価格表のヘッダー部分の背景色を設定できます。

次にデザインタブをクリックして、デザインを設定します。

レイアウト

特集テーブルドロップシャドウを除去: この表を注目にするに設定した価格表の周りにドロップシャドウを表示されるかさせないかを表示できます。

リストアイテム中央寄せ: テキストコンテンツがセンター寄せになります。

黒点

ドットカラー：ブレットの色を変更できます（デフォルトカラーは水色）

特集テーブルドットカラー：この表を注目にするに設定した価格表のブレットの色を変更できます。

ヘッダーテキスト・ボディテキスト・小見出しテキスト

いつもと同じ要領なので、省略します。小見出しテキストとは、サブタイトルのことです。

通貨&周波数テキスト

通貨マークと毎のテキストのデザインが変更できます。詳細はテキストのカスタマイズと同じなので省略します。

価格テキスト

値段の色や大きさなどが変更できます。こちらもテキストのカスタマイズと同じなので詳細は省略します。

特集テーブル価格カラー: この表を注目にするに設定した価格表の色を変更できます。

ボタン

使用カスタムスタイルボタンをはいにすると、ボタンのデザインをカスタマイズできます。こちらもいつもと同じ要領でカスタマイズできるので省略します。

⑤　モジュールの背景を設定する。

1コラムを選択した人

サンプルの様にアイテムごとに背景を変更したい方は、各アイテムの左にある設定アイコンをクリックして、コンテンツタブ >>背景で１つずつ設定してください。

全部一緒でいいという方は、価格表設定（アイテム毎の設定になっている場合は、左に隅にある矢印をクリックして、価格表設定のトップに戻る）>> コンテンツタブ >> 背景をクリック。

２コラム以上を選択した人

アイテム毎の設定画面でも、価格表設定画面でもどちらでもいいです。

背景の設定はいつもと一緒ですが、サンプルの様に同じ画像だけど、表示するポジションを変更したいという方は、下の画像の様に、背景画像の位置を変更してください。

サンプル画像が欲しい方は、こちらをクリックして、画像をダウンロードしてください。なお、サンプルではBackground Image Blendをオーバーレイにして、ソリッドカラーrgba(25,25,25,0.83)を重ねています。

２コラム以上を選択した人

いつもの様にモジュールを複製して、モジュール毎にコンテンツを変更してください。（１つ目でアイテムをこの表を注目にするに設定した人は、２つ目からをいいえにするのを忘れない様に。。そうしないと全部注目デザインになります。）

またグリーンの設定アイコンをクリックして、コラムの設定ウィンドウを開いたら、デザインタブ>>使用カスタム溝幅をはいにして、いつもの様にコラム間の余白を変更することができます^^

まとめ

今回のチュートリアルはいかがだったでしょうか？

値段表モジュールは、前回のチュートリアルでご紹介した数カウンターモジュールと違って、もっと実用的に使えるモジュールだと思います笑

カスタマイズも簡単なので、ぜひ色々なところに自分のオリジナルの値段表を導入してみてください^^

次回は、DIVIデフォルトのコンタクトフォームモジュールを使った、コンタクトフォームの作り方をご紹介します。トップページのカスタマイズもいよいよ残すところ、コンタクトフォームとフッターのカスタマイズのみとなりました。

最初のうちは操作に戸惑っていたかもしれませんが、ここまできたらだいぶ使い方にも慣れてきたのではないでしょうか？？

このチュートリアルシリーズでは、初心者の方でもわかりやすい様に、基本操作のみでなるべく作れる様なウェブサイトをご紹介していますが、サブチュートリアルでは他のプラグインやCSSを使った、ちょっとアドバンスなカスタマイズ方法もご紹介しています^^

アドバンスとは言っても、チュートリアルにそって作っていくだけで、簡単に作成できる様になっていますので、ぜひご覧になってみてください^^

今回もわからないところや、質問等ございましたら、コメント欄やSNSまたはメールにてお答えします。また、Wordpressに関して使ってみたいけど、使い方が分からないプラグインやテーマ、こんな事してみたいけどどういうプラグインを使ったらいいか分からない等のリクエストもどしどし受け付けてます！

お気軽にご連絡ください！

では次回また！See you later<3