「初心者のためのWordpress完全マニュアル」をいつもご覧いただきありがとうございます。このシリーズでは、ここ半年の大幅なアップデートに伴い、最新版を使ったDIVIの基本操作を初心者にもわかりやすいようご紹介しています。
第１回目は、ビジュアルビルダーの基本操作についてご紹介しましたが、今回はもう１つのページビルダー、DIVIビルダーについてご紹介したいと思います。

LINK

• DIVIテーマの購入はこちら(Elengant Themeオフィシャルウェブサイト) → https://wpbeginnertutorial.com/divi_theme

※英語のウェブサイトですので、購入方法がわからない方は、こちらで詳しく購入方法、インストール方法についてご紹介しています。

• DIVIデモウェブサイト（ビジネス向けデザイン）→　http://dividemotemp.wpbeginnertutorial.com/

DIVIビルダーを使うメリット

DIVIビルダーとは、一番上の固定ページを編集をクリックすると開く、旧バージョンのバックエンドのビルダーのことです。

固定ページを編集ボタンをクリックすると、このようなレイアウトが確認できます。

ビジュアルビルダーがビジュアル操作で、WEBを作成できたのに対し、DIVIビルダーではこのようにブロック表示によってウェブの構成を確認することができます。

基本的な操作については、ビジュアルビルダーとほとんど変わりませんが、ビジュアルで確認できない分、初心者の方には最初少し扱いづらいかもしれません。

しかしDIVIビルダーを使うにあたって、様々なメリットもあります。

①　ビジュアルビルダーと比較すると、安定性が高い

まず第一に、ビジュアルビルダーと比べてとにかく安定しているということです。ビジュアルビルダーを使っていてお気付きの方は多いかもしれませんが、ビジュアルビルダーは便利で簡単な反面、とにかくバグが多いです。例えば、Slider RevolutionなどのJava Scpritを多用しているプラグインを直接埋め込んでいる場合、まずビジュアルビルダー編集画面では正確に表示されません。さらに、これは自分で最近発見したことなのですが、CSSでモジュールを大幅にカスタマイズすると、ビジュアルビルダーに切り替えた途端、コードはあっているのに、組んだコードが間違って反映しているバグが発生したりします。なので私は、ウェブサイト全体にCSSのアニメーションなどを多用している場合や他のプラグインを組み込んでいる場合は、主にDIVIビルダーで作成するようにしています。

②　構成がわかりやすい

DIVIビルダーではウェブの構成がブロック表示されるので、どのアイテムがどのセクションやコラムに属しているのかなど、一目で確認することができます。例えば使っていない空のセクションやコラムの消し忘れなど、ビジュアルビルダーでは確認しづらいところをカバーしてくれます。

③　エレメントの選択が簡単

私的にビジュアルビルダーを使っていて一番イライラさせられるときは、モジュールなどをたくさん使っている場合、選びたいエレメントをなかなか選択できないときです^^; 例えばディバイダーモジュールなどの小さなモジュールを選択したいのに、他のモジュールと重なっていてなかなか選択できないということはよくあります。またセクションのマージン・パディングを０に設定している場合、ほぼほぼ設定アイコンをクリックするのは不可能です。そういったときにDIVIビルダーを開くと、簡単に選択することができるので、ビジュアルビルダーとうまくMIXして使っていただきたいと思います。

DIVIビルダーを使うデメリットは、いちいちプレビューでデザイン変更を確認するのがめんどくさいということぐらいですかね、、^^; 先ほども述べた通り、ビジュアルビルダーと比べると抜群に安定性が高いので、バグが少ないのが最大のメリットだと思います。なので、初心者の方にもぜひビジュアルビルダーと合わせて使っていただきたいと思います。

DIVIビルダーの基本操作

それでは早速DIVIビルダーの基本操作について紹介していきたいと思います。

先ほども述べましたが、基本的な操作方法はビジュアルビルダーとほとんど同じなのでさっくり説明していきたいと思います。

まず編集したいページのトップにある固定ページを表示するボタンをクリックすると、このようなブロック表示のデザインが表示されます。

水色はセクション、緑は行（コラム）、グレイはモジュールを表しています。ちなみに下の画像にある紫色は全幅セクション、赤色は特別セクションを表しています。ほとんどの場合は、通常セクションを使用しますが、参考までに。

各セクション、行、モジュールを追加する際は、それぞれの＋アイコンをクリックします。

各エレメントの一番左にあるアイコンはビジュアルビルダーと同じなので省きますが、アイコン表示が違うものだけ説明しておきます。

設定/コンテンツの追加・変更

削除

・設定ウィンドウ

設定アイコンをクリックすると、ビジュアルビルダーと同じように設定ウィンドウが開いて、コンテンツの編集やデザインの設定をすることができます。

異なる点は、下画像のように③つのボタンがウィンドウ下に表示されている点です。

一番左は、ライブラリに保存して追加です。ビジュアルビルダーではライブラリ保存のアイコンをクリックして、作成したデザインをテンプレート保存するのに対し、DIVIビルダーでは設定ウィンドウ内のこのボタンをクリックすることによって、作成したデザインをライブラリに保存することができます。ライブラリの詳しい使い方に関しては、次回以降の記事にて詳しくご紹介していきたいと思います。

またライブラリからテンプレートを呼び出す際は、セクション追加の項目の一番右にあるライブラリから追加をクリックすると、テンプレートを呼び出すことができます。

次に真ん中の目のマークは、プレビュー表示です。プラグインやCSSを使用していると、正しく表示されない場合が多いので、あまりあてになりませんが、参考までに。私は普段は、右サイドバーにあるプレビューボタンをクリックして確認しています。

最後の一番右の保存して終了をクリックすると、変更内容が保存されて設定ウィンドウが閉じます。ただし、ここで保存しても、実際のウェブサイトにはまだ反映されません。変更を反映させるには、右サイドバーにある公開をクリックする必要があります。

・ビルダーヘッダー

次にビルダー本体のヘッダー部分にある各アイコンにてご紹介します。

まずは、下画像の赤太枠内のリンクについてです。

ライブラリに保存：　ページを丸ごとテンプレートとしてライブラリに保存します。

レイアウトをロード：　ライブラリに保存されてあるページのテンプレート、もしくはDIVIが提供しているデザインテンプレートを呼び出すことができます。（すでに自分でウェブサイトを作成している際、ここをクリックすると、全てのデータが上書きされてしまうのでご注意を！（履歴から戻れますが^^;))

レイアウトをクリア：　作成したレイアウトを全て削除します。（削除しても履歴から戻れます）

次に右上の角にあるアイコンについてご紹介します。（画像赤太枠部分）

　インポート・エクスポート：　作成したテンプレートをファイルとして保存、もしくは保存したファイルを読み込みます。拡張子は、.jsonです。インポートすると自動でダウンロードされます。エクスポートに関しては、例えばチャイルドテーマなどを購入した際、テンプレートはjsonファイルで提供されるので、ここでファイルを読み込みます。（詳しい使い方は、こちらで紹介しています）

　戻る・進む：　前回の作業画面に戻ることができます。

　履歴：　ここをクリックすると、今までの作業履歴が確認でき、戻りたいところまで戻ることができます。タイムマシーンのようなものです。

・右サイドバー

右のサイドバーに関しては、ここでは重要なボタンは２つ。変更をプレビューと更新です。

変更をプレビュー：　作成したデザインをプレビュー表示で確認します。DIVIビルダーではビジュアル表示がないので、かなり頻繁にチェックしないといけません　^^;

更新: 作成したデザインを実際のウェブサイトに反映させます。

DIVIビルダーの基本操作

DIVIビルダーはビジュアル表示がない分、初心者の方には最初の頃は少し扱いづらいかもしれませんが、基本的な操作方法はビジュアルビルダーとほとんど同じなので、すぐに使いこなせるかと思います^^ 状況に応じてうまくビジュアルビルダーと使い分けてみてください。

開発者の方は、CSSを多用したい方も多いと思いますので、ぜひDIVIビルダーをメインで使用することをお勧めします。せっかく作成したコードがビジュアルビルダーに切り替えた途端、理由もなくバグり出して、最初から設定し直し、、ということがよくあります。。

またこのブログでも紹介している、Slider Revolutionなどのサードパーティーのプラグインとビジュアルビルダーはかなり相性が悪いので、プラグインをテンプレート内に埋め込んでいる場合も、できればDIVIビルダーで作成した方が無駄な作業が減ります^^;

今回のチュートリアルに関しての質問や、その他リクエストについては、コメント欄や、メールにてお気軽にお問い合わせください。

それでは次回のブログでまたお会いしましょう。 See you later <3