Wordpress人気テーマ【Divi】チュートリアルシリーズ:Diviビルダーの使い方 – 初心者のためのWordpress完全マニュアル

誰でも作れる低予算のウェブサイト作り

TUTORIAL BLOG


このブログでは、初心者でも分かりやすいよう、WORDPRESSを使ったWEBサイトの作り方を、サーバーのセットアップから、テーマのカスタマイズ方法、オススメのプラグインの紹介や使い方、SEO対策やアフィリエイトの運営方法まで、STEP BY STEPで紹介しています。

WordPress人気テーマ【Divi】チュートリアルシリーズ:Diviビルダーの使い方

September 27, 2017

Divi Builder Tutorial Thumb

Diviテーマとは、世界で今最も人気のあるWordpressの人気テーマです。人気の理由の一つに、初心者でも扱いやすい操作方法と、そのコミュニティーの広さがあります。Diviテーマのだけに開発された豊富なテンプレートやプラグインや、本家Elegant Themesを始めとした、たくさんのYoutuberやブロガーの方達が、Diviテーマの使い方を初心者レベルから開発者レベルまで紹介しています。

もし何かウェブサイトを作成する上で、分からないことや困ったことがあっても、豊富なリソースによって、すぐに問題解決できるのも嬉しいところ。一度テーマを購入すると、Elegant Themesが開発した他のテーマやプラグイン、またフルサポートを受けることもできます。

 

このブログのStep By Stepチュートリアルシリーズでは、DIviビジュアルビルダーの使い方をでご紹介してきましたが、今回はDiviビルダーの使い方についてご紹介したいと思います。

 

Diviビルダーとは?

 

Diviビジュアルビルダーでは、その名の通りドラッグ&ドロップなどのビジュアル操作で、セクションやコラムを追加することができます。

Diviビルダーとは、バックエンドでWebをカスタマイズするためのビルダーです。 いまいちピンと来ない方は、こちらの画像をご覧ください。

 

Divi Builder Tutorial Screenshot

 

Diviビルダーを立ち上げると、このような画面が表示されます。追加したい項目をクリックことによって、セクションの追加やモジュールの追加をすることができます。

基本的な各エレメント毎の設定は、ビジュアルビルダーと全く同じです。

ビジュアルビルダーとの大きな違いは、レイアウトがビジュアルで見れない代わりに、ページがどのように構成されているのかが一目でわかることです。

例えばサイト構成が以下の画像のようになっている場合、このセクションは通常セクションが使われていて、2コラム構成になっていることがわかります。左のコラムには画像モジュール、右のコラムには上からテキストモジュール、ディバイダー、テキストモジュールが挿入されています。

 

Divi Builder Tutorial Screenshot

 

Diviのプラグインの中には、Diviビルダーでしかカスタマイズができないものも数多く存在します。そんなに難しい操作ではないので、ビジュアルビルダーとDIviビルダーの両方を使えるようになった方がベター。

操作に慣れてくると、シチュエーション毎に使い分けながら、ウェブサイトが作れるようになります。

もしかしたら、Diviビルダーの方が使いやすいという方も中にはいらっしゃるかもしれません^^;

では下でもっと詳しくDiviビルダーの基本操作について1つずつご紹介していきます。

 

 

Diviビルダーの基本操作

 

Diviビルダーは、一番トップに表示されている固定ページの編集をクリックするか、

 

DTS Divi Plugin Screenshot

 

もしくはダッシュボードの固定ページ>>固定ページもしくは新規追加をクリックして、ページ編集画面にあるDiviビルダーボタンをクリックすることによって立ち上げることができます。

 

Divi Builder Tutorial Screenshot

 

 

セクションの追加と削除

 

ではまずセクションの追加と削除についてご紹介します。

画像赤枠で囲んである標準セクション、全幅セクション、特別セクション、もしくはDiviライブラリーの中から好きなタイプのセクションを追加することができます。

 

Divi Builder Tutorial Screenshot

 

Diviでは、各セクションを色で識別してあります。

青: 標準セクション。標準セクションを追加すると、コラムの数を自由に選択することができます。

紫: 全幅セクション。全幅セクションを追加すると、そのセクションは1コラムのみの構成になります。またスライダーなどの、フルワイド専用のモジュールを追加することができます。

オレンジ:特別セクション。特別セクションでは、サイドバーと2コラムの構成など、最バリエーションに富んだ構成を選択することができます。

ライブラリから追加した場合、もしセクションが画像のように、黄緑になっていたら、そのテンプレートはグローバル設定になっているという意味です。グローバルとは共通設定になっているエレメントのことで、何か設定を変更したとしたら、そのグローバルエレメントが使われている全てのページが一括して変更になります。

 

Divi Builder Tutorial Screenshot

 

左のカラーになっている部分のアイコンは、上から設定、エレメントの複製、セクションの削除を表します。

 

Divi Builder Tutorial Screenshot

 

 

モジュールの設定

 

モジュールの詳しい設定については、ビジュアルビルダーと全く同じなので、詳細は省かせていただきます。

モジュールの追加は、モジュールの挿入ボタンをクリックするだけです。

 

Divi Builder Tutorial Screenshot

 

ここで特筆すべきは、Diviビルダーはビジュアルビルダーと違って、プレビューを見ながら設定変更ができないところです。ではどうやって、設定変更を確認するかというと、各エレメントの設定内にある目のアイコンマークをクリックすることで、変更プレビューをみることができます。

 

Divi Builder Tutorial Screenshot

 

アイコンをクリックすると、PC、タブレット、モバイル毎に設定変更のプレビューを確認することができます。

しかしながらサードパーティによるモジュールや、JSコードがテキスト内に埋め込まれている場合、アイコンをクリックしても、プレビューが表示されない場合があります。

その場合は、変更をプレビューをクリックすると、全体のプレビューが確認できます。

 

Divi Builder Tutorial Screenshot

 

 

ライブラリーの保存と読み込み

 

ライブラリに保存をクリックすると、作成したページをライブラリーにテンプレートとして保存することができます。

またライブラリから読み込みをクリックすると、保存したテンプレートページを呼び出すことができます。

 

Divi Builder Tutorial Screenshot

 

モジュールやセクションをライブラリに保存する場合は、各設定画面の目のアイコンマークの左側にあるライブラリに保存をクリックして、保存してください。
最後に公開をクリックして、変更を保存するのを忘れないでくださいね。
 

まとめ

 

ビジュアルビルダーを使っていると、たまにイライラさせられることがあります笑

例えば、1コラムに複数のモジュールを使っていて、モジュール間の余白がない場合や、ディバイダーなどの小さなモジュールを使用している場合、設定画面を開きたいモジュールをうまく選択できない場合などです。

またビジュアルビルダーは使いやすい反面、Diviビルダーに比べると動作が重たいので、ネット環境が悪かったりすると、たまにクラッシュしたりします。

Diviビルダーはいちいちプレビューで変更を確認しないといけないのが面倒ですが、デザインの構成が一目でわかるところが便利ですね。DIviビルダーで見てみると実は余計な空白のセクションが追加されていたりなど、ページの構成確認にも役立ちます。

少し前までは、ビジュアルビルダーは存在しておらず、このDiviビルダーのみしか搭載してなかったみたいです。

現在の主流はビジュアルビルダーになってきていて、人気のテーマにはだいたいビジュアルビルダーが搭載してあります。

基本的な設定方法は、ビジュアルビルダーと全く同じなので、状況に応じて、うまく使い分けてみてください^^

 

今回のチュートリアルで分からなかったことや質問等ございましたら、お気軽にコメント欄やSNS、またはメッセージにてお問い合わせください。またテーマやプラグインのリクエストも大歓迎です。

では次回のチュートリアルでまた会いましょう! See you later<3

この記事をシェアする!

コメントを残す

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

Powered by Shutterstock