ご無沙汰しております。このブログではWordpressの人気No.1プレミアムテーマ、Diviテーマについてご紹介してきましたが、前回のチュートリアルから半年、アップデートにアップデートを重ね、さらにたくさんの機能が追加搭載されました。

前バージョンでもCSSをほとんど使用しなくても、ハイクオリティなウェブサイトを作ることが可能でしたが、最新バージョンではさらにバリエーションに富んだパワフルなデザインのウェブサイトを作成できるようになりました。ちなみにこの最新バージョンのアップデートに伴って、このウェブサイト自体も大幅にリフォームしてみましたので、ご覧いただければ幸いです。（一部セクションを除き、ほとんどCSSなしでデザインを組んでいます。）さらに、ビジネス向けのテンプレートを最新バージョンのDiviで作成したので、Divi購入をご検討中の方や、旧バージョンをまだご使用している方などは、こちらもご参考までにご覧いただけたらと思います。また、このデモを使ったウェブサイトのチュートリアルについても追々更新していきたいと思います。このテンプレートの無料配布についても検討中ですので、更新次第皆様にお知らせします。

LINK

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

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

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

私がDIVIをオススメする理由

①　とにかく使い方が簡単で初心者にも扱いやすい！

すでにご購入されていて使用された方はお分かりかと思いますが、DIVIの最大の利点は、とにかく使い方が簡単なこと！基本操作はドラッグ&ドロップ。またビジュアルビルダーを搭載しているので、細かな設定も実際のデザインをみながら変更することができます。よほど凝ったデザインを希望しない限りは、大概のデザインはCSSなしで作成することができます。

②　テンプレートの数が豊富！

ウェブサイトを業者には頼みたくないけど、デザインできる気がしない、、という方には必見！DIVIビルダーを使って作成されたテンプレートは無料から有料まで、無数に存在します。目的やカテゴリーにあったテンプレートをダウンロードするだけで、簡単にウェブサイトが作れます。DIVIの基本操作さえわかってしまえば、カスタマイズも簡単！興味のある方は、こちらで少しご紹介しているので覗いてみてください。（有料版はだいたい平均5000円から10,000円）

③　日本語対応

DIVIは海外系のWordpresss製品としては珍しく、完全日本語対応しています！　なので英語がわからない方でも、簡単に使用していただけます。（サポートは英語のみです）

ところどころ「ん？」という翻訳もありますが（笑）気にならないレベルだと思います。

DIVIの欠点

ここまでDIVIがいかに素晴らしいページビルダーかということについてご紹介してきましたが、物事には必ず裏と表があるもので、、正直に言います。DIVIにももちろん欠点あります。残念ながら・・

①　ブログのカスタマイズ性が弱い。

もしあなたがブログサイトを作成したい場合、はっきり言ってあまりDIVIはオススメできません。もちろんブログ機能は搭載していますが、何せカスタマイズするのが難しい！デフォルトの機能をちょっといじるぐらいしか初心者にはできないかと思います。ウェブサイトがメインでブログ機能もつけたい方には、問題なく使えると思います。またどうしても凝ったデザインをつけたいという方は、サードパーティーのプラグインを使用する方が簡単かと思います。Elegant Themesの公式ブログでも、ちょこちょこブログのカスタマイズについては紹介しているので、興味のある方はご参考までに。またプラグインについてはこちらのブログでもちょこっと紹介しています。

②　E-Commerceには向かない。

同じ理由で、E-Commerceウェブサイト、つまりウェブサイト上で何か販売したいという方には、DIVIは向きません。とにかくカスタマイズ性が弱いことと、他のE-Commerceに特化したテーマと比べて、機能性が弱いからです。

③　たまにバグる。

まあこれはどのテーマにも共通することなのですが、、^^; だいたい一度閉じて再起動すれば治ります。最悪強制終了しても、自動バックアップ機能が搭載しているので、今までの作業が全部パーに！ということにはならないのでご安心を。個人的には他のビルダーに比べると、比較的安定したビルダーではないかとは思います。

結論：　DIVIはブログ・E-Commerceには向かないけれども、普通のウェブサイト（当ウェブサイトのような）を作成したい方には間違いなく、一番使いやすくて多機能なテーマだと思います。さらに、プラグインを導入することによって、レストランなどの予約システムを作ったりなど、その使用方法は無限大です。

ビジュアルビルダーの基本操作

では前置きが長くなってしまいましたが、早速DIVIの基本操作についてご紹介していきたいと思います。

まずビジュアルビルダーを立ちあげます。立ち上げたいページを開いて一番トップにあるビジュアルビルダーを有効にするをクリックします。

※ページの作成やメニューの作成などWordpressの基本操作がわからない方は、こちらで詳しく説明しています。

するとこのように、ビジュアルビルダーが立ち上がります。

DIVIのビジュアルビルダーは、セクション・行（コラム）・モジュールで構成されています。

青の太枠はセクション、緑の太枠は行、グレイの太枠はモジュールを表しています。新規追加したい場合は、追加したい色の＋アイコンをクリックします。

行はセクション内に、モジュールは行内にしか設置できませんので、必ずセクション→行→モジュールの順で新規追加するようにしてください。もちろんセクション内にいくつもの行を設置することは可能です。また同様に、行内にいくつものモジュールを設置することができます。これについては後述で詳しく説明します。

では次に太枠の左上にあるアイコンについて説明していきます。

まずは共通アイコンについて。

　移動キーです。ここをクリックしながら動かすと、セクション・行・モジュールを好きな場所に移動させることができます。

設定アイコンです。ここをクリックすると、下記画像のように設定ウィンドウが開きます。ここで、各セクション・行・モジュールにコンテンツを追加したり、背景画像の追加、またはデザインの細かい設定をすることができます。なお、CSSを追加したい場合は、この設定ウィンドウで追加することができます。

設定ウィンドウには主に３つのタブがあり、コンテンツ・デザイン・詳細に分かれています。

詳細については次回以降のブログで詳しくご紹介しますが、ざっくり説明すると、コンテンツタブでは、コンテンツの追加・背景の設定、デザインタブでは、デザインの詳細設定、詳細タブではCSSの追加が行えます。

複製アイコン。作成したセクション・行・モジュールを複製することができます。

ライブラリに保存。作成したセクション・行・モジュールをライブラリに保存することによって、好きな場所に呼び出すことができます。例えば、ボタンアイコンなど、頻繁に使用するアイテムを保存しておくと、いちいち一から作らなくてもいいので便利です。

ゴミ箱。これは見たままの通り、セクション・行・モジュールを削除することができます。

行にのみあるアイコン。

こちらをクリックすると、行のスタイルを変更することができます。例えば、緑の+アイコンをクリックして行を新規追加すると、このようにコラムの数やスタイルを選択するウィンドウが開きます。ここで最初に選択したコラムは、このアイコンをクリックすることによって、後ほど変更することができます。

セクションについての補足

前述で、水色はセクションを表すと説明しましたが、実はセクションの色には、紫・水色・オレンジの３色があります。

水色の＋アイコンをクリックしてセクションを新規追加すると、下記画像のようにセクションを３種類の中から選ぶことができます。

通常セクション：　ほとんどはこの通常セクションを使用して、ウェブサイトを作っていきます。

専門：　こちらを選択すると、サイドバーを含んだレイアウトなど、通常のセクションにはない特殊なレイアウトを使用することができます。このウェブサイトではブログページのみ使用しています（サイドバーを使用したいので）。

フルワイド：　こちらを選択すると、セクションがフルワイド表示になります。主にヘッダー部分などに使用できます。このフルワイドセクションを使用すると、強制的に１コラムの構成になります。また使用できるモジュールが通常セクションと少し異なります。

その他の基本アイコン

ページの一番下にある、紫のアイコンをクリックすると、

このようなアイコンが表示されます。

一番左のグレイのアイコンは、ビジュアルビルダーの表示画面を変更するアイコンです。例えば、一番右のモバイルアイコンをクリックすると、作成したデザインがモバイル用に表示されます。レスポンシブデザインの調整を行なっている時などに便利です。ちなみに一番右からモバイル、タブレット、デスクトップとなっています。

紫のアイコンは主にライブラリに保存されているテンプレートを呼び出したり、他のテンプレートをそのまま読み込んだりするために使用します。ライブラリやテンプレートについては、次回以降のブログにて詳しくご紹介していくので、ここでは詳細は省かせていただきます。

緑の保存ボタンをクリックすると、これまで作成したデザインがサイト上に保存されます。前述で述べたように、たまにビルダー自体がバグったりすることがあるので、自動バックアップ機能があるとはいえ、こまめに保存することを忘れないようにしましょう。また一度保存すると、全て上書きになりますが、上書きしても、履歴で元のデザインに戻ることもできますので、ご安心を。履歴は、紫の右から２番目の時計のアイコンをクリックすると表示されます。戻りたい作業内容をクリックすると、戻りたい作業まで戻ることができます。

まとめ

今回は初回ということで、まずはビジュアルビルダーの基本的な操作方法についてざっくりと説明してみましたがいかがだったでしょうか？　DIVIを初めて使用する方にとっては、ちょっと困惑させてしまったかもしれません^^; でもご安心を！この基本操作は、今からウェブサイトを作成していく上で超基本中の基本！つまり、何度も何度も繰り返していく操作です。百聞は一見にしかず！ウェブサイトを作成する前に、まずはテストページを作成して、色々遊んでみてください。だんだん使い方がわかってくるかと思います^^ 一度基本操作を理解できたら、あとの操作はだいぶ楽になってくると思います。

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

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