このブログは、開発知識のない初心者の方でもWordpressを使った本格的なウェブサイトを作ってみよう！というテーマで皆様に情報をお届けしています。
今回のシリーズでは、Wordpressの人気テーマ、「Divi(Elegant Themes)」という有料テーマを使って、簡単で超本格的なウェブサイトを作ってみます。
Diviを初心者の方にオススメする理由は、人気のビジュアルビルダーを搭載しているので、WEB制作の経験がない初心者の方でもドラッグ&ドロップだけで簡単に超本格的なウェブサイトが作れてしまうからです。このブログでも何度かご紹介していますが、今回は2019年最新版の使い方を、初めての方でもわかりやすいようStep By Stepでご紹介しちゃいます。
前回の投稿では、Wordpressへのインストール方法から基本設定までを説明しましたが、今回からいよいよビジュアルビルダーを使ったウェブサイトの作り方についてご紹介していきます。今回は第2回目ということでまずはビジュアルビルダーの基本的な使い方についてご紹介していきたいと思います。
 
Elegant Theme購入ページはこちら→　https://www.elegantthemes.com/
※日本語対応のテーマですが、本家サイトは英語のみとなっておりますので、購入の仕方がわからない場合はこちらの記事をご参考ください。
 

STEP 1 : ビジュアルビルダーを立ち上げる。

では、早速ビジュアルビルダーを立ち上げてみましょう。
まずは、トップ画面に戻り、ログインした状態で現れる一番上にある黒いバーの中の、ビジュアルビルダーを有効にするをクリックします。

ビルダーを立ち上げると、「構築を開始する」「Browse Layouts」「Choose Page」という３つのポップアップが出て来ますが、今回は構築を開始するをひとまずクリック。

STEP 2 : ビルダーの構造を理解する。

立ち上げたところでまずは、ビルダーの基本構造についてさっくりと説明していきたいと思います。
ビルダーは入れ子しきになっており、必ず下の図のようにセクション、カラム（行）、モジュールによって構成されます。

各アイテムは分かりやすいよう色分けされており、上図のようにセクションは水色、カラムは緑、モジュールはグレイで表示されます。
カラムは同一セクションにいくつも設置することができ、モジュールは同一行カラム内にいくつも設置することができます。それぞれの使い方については、後述で詳しく説明させていただきたいと思います。

STEP 3 : セクションの基本操作

セクションとはざっくりいうと、同じ内容のコンテンツをまとめる箱のようなものです。例えば収納ボックスをいくつか用意して、１つ目は筆記用具入れ、２つ目は医薬品、３つ目はおもちゃ入れと整理するとします。セクションは、同じページ内でこの収納ボックスと同じような役割をします。
例えば、トップページに「会社紹介」、「サービス」、「お問い合わせ」の３つのコンテンツを持ってきたい場合は、３つセクションを用意し、セクションによってそれぞれのコンテンツに属するアイテムをひとまとめにしてあげます。
セクションを追加する際は、水色の＋ボタンをクリックします。
+ボタンをクリックすると、下のようなセクションを挿入というウィンドウが出現します。

またセクションには、通常、専門、フルワイドの３種類があります。一般的に使うのは通常セクションですが、スライダーなどダイナミックに見せたいときはフルワイド、ブログページのように横にサイドバーを持ってきたいなど特殊な構成をもつページを作る際は、専門などを使用することもあります。

STEP 4 : カラム（行）の基本操作

セクションと同様、カラムの追加の際は緑の＋ボタンをクリックします。
+ボタンをクリックすると、下の画像のように行を挿入というウィンドウが出現し、24種類のレイアウトから好きなものを選択することができます。

目的に合わせて、好きなレイアウトを選んでください。
また途中でレイアウトを変更したい場合は、カラムにホバーを当てると現れる左上のアイコンバーの中の、左から４番目のカラムアイコンをクリックします。

STEP 5 : モジュールの基本操作

モジュールとは、実際のコンテンツを構成するアイテムになります。例えば文章を挿入する場合は、テキストモジュール、画像を挿入する場合は画像モジュールを使用します。
モジュールの追加は、上記セクション、カラム同様グレイの＋アイコンをクリックします。

STEP 6 : 各アイテムの編集をする。

作成したセクション、カラム、モジュールは作成後、自由に動かしたり削除することができます。
作成したアイテムを編集する際は、各アイテムにホバーを当てると出現するアイコンバーを使います。アイコンバーは、セクションは水色、カラムは緑、モジュールはグレイで分かりやすいように色分けされています。

左から順に移動、設定、複製、ライブラリ、削除を表します。
 
移動：　この十字アイコンをホールドしながら、動かしたいアイテムを自由に動かすことができます。
設定：　各アイテムのサイズや余白など、細かいデザイン設定をすることができます。設定については、次章以降実際にデモコンテンツを作りながら、詳しく説明していきたいと思います。
複製：　作成したアイテムを複製することができます。同じようなレイアウトやコンテンツを繰り返したいときなどに使うと便利です。
ライブラリ：　作成したアイテムをライブラリに保存することができます。作成したアイテムはテンプレートとして、いつでも呼び出すことができます。ライブラリについての詳しい使い方は、次章以降で詳しく説明したいと思います。
削除：　作成したアイテムを削除します。
 
補足ですが、カラムを削除するとカラム内に含まれる全てのモジュールも同様に削除され、セクションを削除するとセクション内に含まれる全てのカラム、またそのカラムに含まれる全てのモジュールも一気に削除されてしまいますのでご注意を。

STEP 7 : ページ全体の編集と保存。

画面の一番下の真ん中にある紫の丸いアイコンをクリックすると、下図のようなアイコンが表示されます。

各紫のアイコンをクリックするとページ全体に影響するアクションを起こすことができます。
左から、ライブラリの呼び出し、ライブラリの保存、全コンテンツの削除、ウィンドウを閉じる、ページ全体の設定、履歴、レイアウトのインポート・エクスポートができます。
*ライブラリの呼び出し、ライブラリの保存については次章以降詳しく説明するので、ここでは省略します。
 
全コンテンツの削除：　このアイコンをクリックすると、ページの中にある全てのアイテムを一括削除できます。
ウィンドウを閉じる：　アイコンバーを閉じて、作業画面に戻ることができます。」
履歴：　履歴をさかのぼることにより、過去の作業内容に戻ることができます。例えば間違って削除してしまった・・というときなどに、削除前の作業内容に戻ることができます。
レイアウトのインポート・エクスポート：　DIVIのチャイルドテーマなど、テンプレートを持っている場合は、ここで読み込みます。また作成したページをテンプレートとして保存することもできます。Diviのテンプレートファイルは全て.jsonファイルで保存されます。
 
最後に作業内容を保存する時は、一番右にある緑の保存ボタンをクリックします。
ビジュアルビルダーを使用している以上、たまに画面が固まってしまったりなどの、不具合が発生することもあります。せっかく苦労して使用した作業が無駄にならないように、こまめな保存を心がけましょう！
 
今回はビジュアルビルダーの基本操作について、さっくりとご紹介しました。
ちょっとイマイチわからなかったかも・・という方も安心してください。最初は難しくても、慣れてしまえば使い方はとても簡単です。ちょっとわからないアイコンなどがあったら、ホバーを当てるとそのアイコンの説明が出てきます。
まずはテストページを作成して、色々クリックしたりして、ビルダーを使うのに慣れることから始めましょう。次章以降では、実際にデモコンテンツを作成しながら、各機能の使い方についてもっと詳しく触れていきたいと思います。
 
それではまた次回のチュートリアルでお会いしましょう。See you later<3