前回のチュートリアル、：世界シェア率No.1!! 最強のWordPressテーマ【DIVI】チュートリアル 〜Step 1: テーマのセットアップでは、Diviテーマを購入する方法と、実際にWordpressにテーマを設定する方法についてご紹介しました。
今回のチュートリアルから実際にDiviを使って、Webサイトを作っていきたいと思います。(｀・ω・´)

Step2では、

 

この部分を当たる部分を作成していきます。

 

ヘッダーメニューの作り方

 

① 新規ページを追加する

ダッシュボード >> 固定ページ >> 新規追加をクリックして、新規ページを追加します。

 

 

②　固定ページに名前をつける

名前を記入（自分の好きな名前で大丈夫です）>> 公開をクリック。

 

 

③　①、②の手順を繰り返して、必要な数だけページを作る。

公開をクリックすると、固定ページを編集の横に、新規追加のボタンが現れるので、新規追加をクリックして①、②の手順を繰り返す。

 

④　新規メニューを作成する。

外観 >> メニューをクリックする。

 

メニュー名を記入して、メニュー作成ボタンをクリック。

 

 

先ほど作成したページが一覧表示されるので、ヘッダーメニューに表示させたいページのみチェックを入れたら、メニューに追加をクリック。

 

 

⑤　順番を入れ替える。

各メニューをドラッグドロップして、順番を入れ替えます。

 

 

横にずらすと、サブメニューにすることもできます。

例えば、以下の画像の場合、【About Us】のページは【ホーム】のサブメニューとなります。

 

 

メニュー設定にあるメインメニューの横のボックスにチェックを入れて、メニューを保存するボタンをクリック。

 

ランディングページを作成する

 

①　固定ページの設定。

Divi >> テーマカスタマイザーをクリック。

 

 

固定フロントページをクリック。

 

 

フロントページ表示 >> 固定ページにチェックを入れる。

フロントページに、先ほど制作した新規ページのうちのHome（違う名前をつけた人は、自分がトップページにしたいページを選択してください）を選択する。

保存して公開をクリックします。

 

 

②　Diviのビジュアルビルダーを立ち上げる。

ウェブサイトのトップページに行く。

 

 

ビジュアルビルダーを有効にするをクリックして、Diviビジュアルビルダーを有効化する。

 

 

すぐWebsサイトを作りたい方は、構築を開始するをクリック。作り始める前に簡単な操作方法を学びたい方は、ツアーを開始するをクリックする。

 

 

③　セクションに背景画像を設定する。

画面にマウスを持ってくると、画像のような水色の線で囲まれたボックスが出てきます。その左角にある設定のアイコンをクリック。

 

 

Diviテーマではこの設定アイコンをクリックすることによって、アイテムのデザインやコンテンツを入れることができます。これから先のチュートリアルで、たくさん出てくるのでだんだん慣れてくると思います(^^)

設定アイコンをクリックすると、画像のようなウィンドウが出てきます。

コンテンツ >> 背景から、今回は背景画像を挿入したいので、左から３番目のアイコンをクリックして、+アイコンをクリック。

 

 

背景画像を選択してくださいと表示されます。まだ一度もWordpressに画像をアップロードしたことがないので、メディアライブラリは空になっています。

下記のようにファイルを選択ボタンをクリックすると、自分のパソコンの中にある画像を選ぶことができるので、好きな画像をアップロードしてください。もしくは、ドラッグ&ドロップでも簡単に追加することができます。

もしこのチュートリアルと同じような画像を作りたい場合は、ここから画像を保存してください。

どんな画像でも構いませんが、このTOP画像はいわば看板です！できるだけクオリティの高い（特に解像度）画像を使用することをオススメします。

Pexelsのような無料のストック画像を集めたサイトを使うのもオススメです。

 

 

画像が無事アップロードされるとメディアライブラリに先ほどの画像が追加されます。クリックして、画像をアップロードするボタンをクリックします。

なお、右サイドバーにてサイズなどを設定することもできます（ピンクの枠線で囲んであるところ）。今回は、フルワイドにしたいのでフルサイズを選択しています。

 

 

④　背景画像に半透明の他のカラーや、グラデーションを重ねてみよう。

Diviでは、Photoshopなどで画像を加工しなくても、サンプルサイトのように画像の上から半透明の色を（このサンプルは半透明の黒を重ねています）、グラデーションを重ねたりすることができます。

先ほどの背景画像にイメージを設定する画面をスクロールダウンすると、画像のような背景画像のブレンドという項目がでてきます。たくさん画像効果がありますので、色々試してみてください^^
今回はオーバーレイを選択します。

 

 

今度は重ねる色を選択します。セクション設定>>背景の一番左のアイコンをクリックして、色と透明度を設定します。右のスクロールバーで透明度を選択できます。

 

 

グラデーションを重ねる場合は、右から２番目のアイコンをクリックします。

色を選択して、そのままスクロールダウンと角度やグラデーションを始める位置などを設定することができます。気にいったトップ画像が設定できたら、下のグリーンのチェックマークをクリックしてセクション設定を閉じます。

 

 

⑤　セクションに画像を挿入する。

セクションに画像を挿入してみます。サンプルの画像を使いたいかたは、こちら。をクリック。
グレイの+アイコンをクリックすると、モジュールを挿入というウィンドウが出てきます。今回は画像を挿入したいので、スクロールダウンして一番下にある画像というモジュールを挿入します。

 

 

画像設定 >> コンテンツ >> アップロードから、先ほど背景画像を設定したのと同じ要領で、画像を選択します。

 

 

デザイン >> 画像配置で画像を中央に設定します。緑のチェックボタンを押すと、今作ったコンテンツが保存されて画像設定ウィンドウが閉じます。ちなみに×ボタンを押すと、保存されずに画像設定が閉じます。

 

 

さらに詳細タブのアニメーションにて、画像が表示される際のアニメーションを設定できます。今回はフェードインに設定してみます。アニメーションなしにすることも可能です。

 

 

⑥　テキストモジュールを挿入する。

先ほど画像を挿入したのと同じ要領で、今度はテキストモジュールを挿入してみます。先ほどと同じようにグレイの+アイコンをクリックして、今度はテキストを選択します。

 

 

テキスト設定ウィンドウが開きます。今回は、ヘッダーテキストを挿入したいので、下の画像のように選択します。

 

 

ヘッダーテキストのデザインを変更します。

デザインタブから、ヘッダーテキストを選択。

 

 

フォントのサイズや、テキストの色など自由に設定することができます。

 

 

小さいモバイルアイコンをクリックすると、タブレットやスマートフォン用に設定を変更することができます。

 

 

画像はスマートフォン用の表示イメージです。

 

 

デザインが決まったら、緑のチェックをクリックして、テキスト設定を閉じます。

 

⑦　ボタンモジュールを挿入する。

グレイの+ボタン >> ボタンをクリックして、ボタンモジュールを挿入します。

 

 

コンテンツタブから、ボタンに挿入したいテキストや、ボタンを押したあとのリンク先を設定してください。

 

 

次は、ボタンのデザインです。

まずは、ボタンの配置を決定します。今回は中央に設定してみます。属性 >> ボタンの配置 >> 中央を設定。

 

 

次にボタンを選択して、使用カスタムボタンをはいにします。こうすることによって、自分の好きなデザインにボタンをカスタマイズすることができます。

ちょっとわかりづらそうな設定だけピックアップして、説明します。

ボタンアイコン： マウスをボタンに持ってきたときに、ボタンテキストの横にアイコンが表示されるようになります。

 

ボタン境の半径: ボタンの角を丸くします。25pxで綺麗な丸角のボタンになります。

 

ホバーとは？

ホバーとは、マウスを当てたときの設定のことです。例えば、サンプルのホームページでは、カーソルを当てると、赤いボタンが黒になるように設定されます。

 

 

〜中級者・もっとこだわりたい方向け〜

デフォルトのボタンは、ちょっとボタンが小さいです。

詳細タブに下のCSSを加えることによって、ボタンとテキストの間に好きな幅の余白を入れることができます。

 

/* ここをコピーアンドペースト */

padding: 5px 30px;

ちなみに5pxは上下の余白にあたり、30pxとは左右の余白になります。数字は好きに設定していただいて構いません^^

 

 

デザインが決まったら、いつものように緑のチェックマークをクリックして、ボタン設定を閉じます。

 

⑧　今までの作業を保存する。

これをしないと、今までの苦労は水の泡です。。

まずは紫色の…マークをクリックすると、以下の画像のように右端に緑の保存ボタンが表示されます。あとは、クリックするだけで勝手に保存されます。

 

 

いよいよ最後のステップ！ナビゲーションメニューのカスタマイズ

 

あまりにも長すぎて、そろそろ嫌気がさしているかもしれませんが、いよいよ最後のステップです。一番最初に作成したヘッダーメニューのデザインをカスタマイズしていきます。

 

① 　テーマカスタマイザーを開く。

 

 

② 　第１メニューバーをカスタマイズする。

ヘッダーとナビ >> 第１メニューバーの順にクリックします。

 

 

すると、下の画像のようにナビゲーションをカスタマイズすることができます。

各項目の中でわかりづらそうなところをピックアップして、補足しておきます。

全幅にするにチェックを入れると、メニューが画面の横幅いっぱいまで広がるようになります。

ロゴ画像を非表示にすると、現在表示されているDiviのロゴマークが非表示になります。

メニューの高さ: ナビゲーションの上下の余白を設定することができます。

アクティブプリンクカラー：現在表示されているページのメニューの色を変更します。（下の画像の場合Homeが現在のアクティブページなので、水色担っています）

ドロップダウンメニュー背景色：サブメニューを持っているメニューを開くと、ドロップダウンメニューが表示されます。ドロップダウンメニュー背景色を変更することによって、メニューの背景を変更できます。

ドロップダウンメニューアニメーション：ドロップダウンメニューがどのように表示されるかを設定することができます。

 

 

今回は、背景を透明にして、この画像の上に重なって表示されるように設定してみます。

下の画像のように、背景色の透明度を調整するバーを一番下まで下ろします。

 

設定が変更できたら、ブルーの保存して公開というボタンをクリックします。

 

② 　固定ナビをカスタマイズする。

固定ナビとは、ホームページをスクロールダウンしたときに、付いてくるナビゲーションのことです。

先ほどのヘッダーとナビのセクションから固定ナビ設定にいきます。

 

 

先ほど第１メニューの背景を透明にしましたが、スクロールダウンして背景が透明だと、他のコンテンツと被って見づらくなってしまうことがあるので、今回は第一メニュー背景色は黒の透明度なしに、メインメニューリンクの色は白に設定します。

設定が完了したら、先ほどと同じように保存して公開をクリック。

 

以上で、Step2は全て終了です^^　ちょっと長くなりましたが、お疲れ様でした！

うまくカスタマイズが成功していれば下の画像のように、トップページのデザインが変更されていると思います。

 

 

Diviビルダーは最初慣れないうちは、手こずるかもしれませんが、慣れてくるともっと自分なりのカスタマイズができるようになってくると思います。練習あるのみです！

また、作りながら気づいたのですが、元々英語のコンテンツなので、日本の訳がところどころ変ですw

今回も何かわからないことや質問などがありましたら、コメント欄にてお答えします！

では次回また会いましょう！See you later<3