このシリーズでは、今人気のWordpressテーマ「Divi」を使って、開発知識や経験のない初心者の方でもできる、本格的なウェブサイトの作り方についてご紹介しています。
Diviを初心者の方にオススメする理由は、ビジュアルビルダーを搭載しているので、基本的にはドラッグ&ドロップで操作することができ、また他のビジュアルビルダーと比べて、比較的動作が安定しており、機能も充実しているからです。また海外では1,2位を争う人気テーマのため、Divi専用のプラグインやテンプレート等もたくさん出ているのもオススメしたい理由の１つです。
プラグインの組み合わせや、デザインの設定次第で、オリジナルで高クオリティなウェブサイトが初心者の方でも簡単に作れちゃいます。
 
Elegant Theme購入ページはこちら→　https://www.elegantthemes.com/
※日本語対応のテーマですが、本家サイトは英語のみとなっておりますので、購入の仕方がわからない場合はこちらの記事をご参考ください。
 
前回は、ビジュアルビルダーの基本操作についてさっくりとご紹介したのですが、今回は実際にメインビジュアルを作成して、もっと細かい操作方法についてご紹介していきたいと思います。前回イマイチよくわからなかった・・という方も、実際にサンプルを作成することによって、だんだん使い方がわかってくるのでご安心を！
 

STEP 1 :　ビジュアルビルダーを立ち上げて、カラムを挿入する。

では早速、シンプルなメインビジュアルを作成してみましょう。
前回のチュートリアルでご紹介したのと同様、まずはログインして一番上の黒いバー内にあるビジュアルビルダーを有効にするをクリックし、ビジュアルビルダーを立ち上げます。
構築を開始するをクリックして、早速作っていきます。
ちなみにまっさらな新しいページの場合、最初から１つセクションができていて、行を挿入というポップアップウィンドウが勝手に表示されます。
 

 
次にカラムのレイアウトを選択しますが、とりあえずここでは上画像のように１カラムを選択してみます。カラムを選択すると、次にモジュールを挿入というポップアップウィンドウが表示されますが、先に背景を設定していきたいのでとりあえず一旦ウィンドウを閉じます。

STEP 2 :　背景画像を挿入する。

次にセクション内に背景画像を設定したいと思います。ホバーを当てると出てくる、左上の水色のアイコンバーの中の左から２番目の設定アイコンをクリックします。
 

 
アイコンをクリックすると、セクション設定ウィンドウが出て来ますので、その中のコンテンツタブ内の背景をクリックします。
背景をクリックすると、背景に関する様々な設定項目が出て来ますが、まずは一番上の背景セクションから画像を挿入したいと思います。
 

 
今回は画像を設定したいので、上図のように左から３番目のタブをクリックします。
ちなみに左から順に単色カラー、グラデーション、また一番右はビデオ背景を設定することができます。
Add Background Imageをクリックするとメディアライブラリが開きますので、好きな画像をアップロードして選択してください。
ちなみにデモで使用しているストック画像は、pexelsからお借りしました。pexelsは無料の割にはかなり高画質で、画像の種類もたくさんあるので、私は結構重宝しています。コピーライトがかかっているやつもあったりするので、使用の際は気をつけましょう。私は、こういう無料のストック画像とShutterstockなどの有料画像を用途やデザインに合わせて混ぜて使っています。
 
画像を選択すると、すでにセクション内に背景画像が入っているのが確認できるかと思いますが、せっかくなのでその下にある背景設定についても少しご紹介したいと思います。
 
視差効果を使用する：　これはいわゆるパララックスエフェクトのON/OFF設定です。パララックスエフェクトがわからない・・という方はこちらの森山直太朗さんのウェブサイトの森山直太朗さんの背景画像に使用されているのが、パララックスエフェクトというやつです。
背景画像サイズ：　背景画像のサイズが変更できます。私は特に理由がない限りは基本的にはカバーを使っています。
背景画像の位置：　背景画像のフォーカス位置を変更することができます。大きな画像を使用していて、うまく自分の表示したい部分が表示されないという場合は、ここでフォーカスの位置を変更しましょう。
背景画像の繰り返し：　背景画像のサイズをカバーにしている場合は関係ないのですが、例えばフィットなどにしている時にこの繰り返しを設定すると、下記画像のように背景画像が繰り返されます。パターン画像などを使用したいときなどに便利ですね。
 

 
背景画像のブレンド：　これはPhotoshopのように画像にエフェクトを加えることができる機能です。この中のオーバーレイがすごく便利で私もよく使っているのですが、例えばこれを設定した後にグラデーション（左から２番目のタブ）を設定すると、下の画像のように元々の画像にグラデーションをかけることができます。
 

 
背景画像の設定が終わったら、ウィンドウ一番右下にある緑色のチェックボタンをクリックして、一旦ウィンドウを閉じます。

STEP 3 :　テキストモジュールを使ってタイトルを挿入する。

次にテキストモジュールを使って、タイトルを挿入したいと思います。
グレイの＋アイコンをクリックして、モジュールを挿入というウィンドウが開いたら、その中にあるテキストをクリックします。
次に実際にテキストを挿入していくのですが、コンテンツタブ内のテキストセクションにあるコンテンツというところで、テキストを実際に打ち込みます。
コンテンツには、ビジュアル・テキストタブがあると思いますが、テキストタブは基本的にはHTMLなどのコード打ち込みの際に使用するので、皆さんはビジュアルを主に使用することになるかと思います。
では早速タイトルを挿入するのですが、タイトルなのでParagraphからHeading 1に変更します。
 

 
ちなみに通常の文章を挿入する場合は、Paragraphを使用し、見出しを挿入する場合はHeading1からHeading6を使用します。Headingの数字の使い分けがわからない・・という方は、こちらのサイトで詳しく説明しているのを見つけたのでぜひご参考ください。
デモではタイトルにHeading1、その下のサイト説明文にparagraphを使用しています。
 
次に今挿入したテキストのデザイン設定をしていきます。まずはデザインタブをクリックして、デザイン設定画面にいきます。
 

 
ご覧いただくとお分かりのようにたくさんの設定項目があります。テキストモジュールの詳しい使い方については、次章以降改めて詳しくご紹介するということで、今回は必要な部分だけをさっくりと説明することにします。
まずは、テキストセクションから基本のテキストデザインを変更します。各項目について詳細は省きますが、日本語フォントには対応していないので、こだわりの日本語フォントを使用する場合は、otfかttfのフォントファイルだと、テキスト フォントからアップロードして使用することができます。
 
次にタイトルフォントのデザイン設定をします。Heading Textをクリックすると、H1,H2…H6とそれぞれに違ったデザインを設定することができます。
先ほどタイトルにHeading1を使用したので、H1タブをクリックして、先ほどの通常テキスト同様デザイン設定をしていきます。
 
テキストのデザイン変更が終わったら先程と同様、緑のチェックアイコンをクリックしてウィンドウを閉じます。

STEP 4 :　セクション内の余白を変更する。

テキストを挿入したのものの、このままでは少しメインビジュアルとしては小さすぎるので、下図の赤い部分に余白を入れたいと思います。
 

 
セクションの設定画面を再び開き、今度はデザインタブをクリックします。デザインタブ内にある、余白をクリックします。
 

 
余白内にあるカスタムパディングに数字を入れます。ちなみにパディングとは、エレメントの内側の余白のことで、マージンとはエレメントの外側の余白のことです。
試しに上と下に200pxずつ入れてみました。
 

 

STEP 5 :　その他あれこれ設定をいじってみる。

Diviのビジュアルビルダーは実にたくさんの機能が搭載しており、設定次第でいろんなデザインにすることができます。
例えば、セクション設定>>デザインタブ>>Dividersで、ボトムに波線の仕切りスタイルを入れると画像のように今流行りのディバイダーを簡単に挿入することができます。
 

 
また各エレメントの設定ウィンドウ内の、デザインタブ>>アニメーションを設定すると、エレメントにフェードインや反転などのアニメーションをつけることもできます。
ちなみに今回は通常セクションを使いましたが、フルワイドセクションを使用すると、フルワイドヘッダーというモジュールが使えるようになります。フルワイドヘッダーモジュールは、タイトル、小見出し、コンテンツ、ボタンリンクがセットになっています。それぞれのデザイン設定方法は、先ほどご紹介したテキストモジュールの設定方法と同じ要領で設定することができます。
 
今回はビジュアルビルダーを使用して、実際に簡単なメインビジュアルを作成してみました。ご覧いただけるとおわかりの通り、それぞれのエレメントには実に様々な設定項目があり、色々なバリエーションを設定１つで作成することができます。では今回のおさらいとして、最後にチャレンジ問題をどうぞ！
 

 
タイトルのフォント：　Amatic SC
その他フォント：　Roboto Condensed
使用背景画像：　Photo by Alexandro David from Pexels
 
*ヒント：　ボタンはボタンモジュールを使用しています。
 
それではまた次回のチュートリアルでお会いしましょう。See you later<3