Divi は Web ページの背景を編集過程をリアルタイムに確認しながら編集することができます。背景の設定はセクション、行、モジュールのそれぞれで設定できます。さらに、セクションの背景では新たに「 Dividers 」という素晴らしい機能が使えるようになっています。
ワードプレス Divi の使い方４
背景設定と新機能 Dividers
１．セクションの背景設定
今回は前回作成した Web ページ の背景を改造してより素敵なサイトを構築しましょう。
１）セクションの背景を設定する
 | 青色「⚙（歯車）」のアイコン「セクションの設定」をクリックします。 |
セクションの背景を設定するには、
 | セクション設定の「コンテンツ」タブの「背景」をクリックします。 |
２）背景にグラデーションを追加する
Divi では Divi Builder による操作だけでページのセクションの背景グラデーションを追加することができます。
 | セクションの背景パネル上でこのアイコンをクリックします。 |
- 色を選択：グラデーションの色を2色選択します
- グラデーションタイプ：線形と放射状を選べます
- グラデーションの方向：方向を角度で選択できます
- ポジションの始点：グラデーションの始点を％で設定できます
- ポジションの終点：グラデーションの終点を％で設定できます
- Place Gradient Above Background Image：通常は背景画像の下ですが、設定すると背景画像の上にグラデーションを設置できます
Divi だけで背景にグラデーションを追加できるので、別に背景用にグラデーション画像を作成して用意する必要がありませんし、実際にサイトに配置したときの効果を確認しながら作成できるので便利です。
３）背景に画像を追加する
背景に画像を追加するには、
 | 背景設定パネル上の左のアイコンをクリックします。 |
下記のパネルが表示されるので、「＋ Add Background Image 」をクリックします。メディアライブラリが表示されるので、追加する画像を選択あるいはアップロードしてください。画像には下記の設定ができます。
- 視差効果：ページをスクロールしたときに視差効果が表示されます（設定するとパララックス方式を2種類から選べます）
- 背景画像サイズ：カバー、Fit、実際のサイズから選べます
- 背景画像の位置：スタート位置を設定できます
- 背景画像の繰り返し：繰り返しを、通常、X軸、Y軸、スペース（フィット）、円形から選べます
- 背景画像のブレンド：背景と画像とのブレンド効果を選択できます。乗算、スクリーン、オーバーレイ、暗くする、明るくする、覆い焼きカラー、焼き込みカラー、ハードライト、ソフトライト、差、除外、色相、彩度、色、輝度 から選べます
今回はこの背景画像を選んでみました。
背景画像のブレンドを行う
 | さらに背景グラデーションとして、左記のグラデーションを設定しておいて、「背景画像のブレンド」による効果を確認してみましょう。 |
乗算：色のかけ合わせ。画像の色を重ねた効果となる。黒はより暗くなる
スクリーン：乗算の逆で、色を重ねてより白くなる。黒は影響がない
オーバーレイ：画像の輝度が50%グレーより明るいとスクリーン、暗いと乗算となる効果
暗くする：画像を比較してより暗い色が適用される
明るくする：画像を比較してより明るい色が適用される
覆い焼きカラー： 明るい部分がより明るくなることでコントラストが高くなります
焼き込みカラー：色相は保ったまま重ねた部分を暗くする。重なった部分がより暗くなる
ハードライト：オーバーレイの効果に足して強い光を当てた時のような効果
ソフトライト：画像の輝度が50%グレーより明るいと覆い焼き、暗いと焼き込みとなる効果
差：色の明るさの大きい方から小さい方の数値が引かれて合成される効果
除外：差の効果と同様ですがよりコントラストが低い効果
色相： 背景の輝度と彩度に、画像の色相が合成される。色を持たない場合変化がない
彩度：背景の色相と輝度に、画像の彩度が合成される効果。色を持たない場合変化がない
色：背景の輝度に、画像の色相と彩度が合成される効果
輝度：背景の色相と彩度に、画像の輝度が合成される効果
Divi では画像のブレンドもサイト上で動的に変更できます。とても便利ですね。
背景に動画を設定するには、
 | 背景設定パネル上の再生ボタンのアイコンをクリックします。 |
下記のパネルが表示されるので、「＋ Add Background Video 」をクリックします。メディアライブラリが表示されるので、追加する動画を選択あるいはアップロードしてください。動画には下記の設定ができます。
Divi の特徴のひとつである「 Dividers 」を使うと、ページに仕切り形状を追加できます。これはすごく素晴らしい機能です。Dividers を使うには、セクション設定の「デザイン」タブの「 Dividers 」をクリックします。モジュールもありますが設定で Dividers を使えるのはセクションのみです。
 | 効果は、トップとボトムに分けてそれぞれ適用できます。 |
「仕切りのスタイル」で、仕切りの形状を下記のように非常に多くのスタイルから選択することができます。
 | Divider Color を利用することで、仕切りの色を変化させられます。 色はスポイトのアイコンをクリックすることで自由に選ぶこともできます。 |
下記画像では、トップの仕切りを城に、ボトムの仕切りは青にしています。
「 Divider Horizontal Repeat 」では、仕切りの水平方向の繰り返し頻度を設定できます。
「 Divider Flip 」では、仕切りを水平方向と垂直方向のそれぞれでフリップ（反転）させることができます。
「 Divider Arrangement 」では、仕切りを On Top Of Section Content （行やモジュールの前）とするか Underneath Section Content （後ろ）とするか設定できます。
Divi の Dividers は非常に優れています。コンテンツとの上下関係も設定できます。使い勝手の良いとても良い機能だと思います。
 | 緑色「⚙（歯車）」をクリックします。 |
 | 行 設定の「コンテンツ」タブの「背景」をクリックします。 |
行の背景の設定がセクションの背景の設定と違うところは、行自身の背景に加え、複数のカラムがある場合それぞれのカラムごとに別で背景を設定できるところです。
行の背景も、セクションの背景と同様に設定ができます。Dividers は行では使えません。
モジュールの背景を設定するには、
 | 灰色「⚙（歯車）」をクリックします。 |
 | モジュールの設定の「コンテンツ」タブの「背景」をクリックします。 |
モジュールの背景も、セクションの背景と同様に設定ができます。
Divi では Web ページのセクション、行、モジュールとも同様な操作で背景の設定が簡単にリアルタイムに実施できます。Dividers はセクションと Divider モジュールでのみ利用できます。各場所で操作方法に違いがあまりないので覚えやすいです。
ワードプレス Divi レッスン Diviの使い方図解
写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。
