初心者のための
WORDPRESS
完全マニュアル


このサイトでは、初心者でも簡単にできる、開発知識のいらないWORDPRESSを使ったWEBサイトの作り方を、サーバーのセットアップから、テーマのカスタマイズ方法、プラグインの使い方、SEO対策やアフィリエイトなどの実際の運営方法まで、STEP BY STEPで紹介しています。

世界シェア率No.1 WordPressテーマ【DIVI】Step By Step Tutorial 〜 Step6: 価格表モジュールの使い方 – 初心者のためのWordpress完全マニュアル

世界シェア率No.1 WordPressテーマ【DIVI】Step By Step Tutorial 〜 Step6: 価格表モジュールの使い方

September 05, 2017 / 0 Comment / 372 views

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

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

 

 前回までのおさらい

 

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

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

 

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

 

ストック画像オススメ

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

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

 

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

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

price table sample

 



 

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

 

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

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

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

price table tutorial screen capture

 

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

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

price table sample

 

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

 

 

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

price table tutorial screen capture

 

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

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

price table tutorial screen capture

 

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

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

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

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

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

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

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

price table tutorial screen capture

 

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

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

 

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

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

 

③ アイテムを複製する

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

price table tutorial screen capture

 

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

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

 

price table tutorial screen capture

 

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

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

 

要素

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

 

背景

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

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

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

price table tutorial screen capture

 

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

 

レイアウト

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

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

 

黒点

ドットカラー:ブレットの色を変更できます(デフォルトカラーは水色)

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

 

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

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

 

通貨&周波数テキスト

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

 

価格テキスト

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

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

 

ボタン

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

 

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

 

1コラムを選択した人

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

price table tutorial screen capture

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

 

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

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

 

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

price table tutorial screen capture

 

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

 

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

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

price table tutorial screen capture

 

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

price table tutorial screen capture

 

まとめ

 

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

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

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

 

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

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

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

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

 

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

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

 

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

この記事をシェアする!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です