Divi Builder の設定のデザインタブで設定できる項目として、セクションの Dividers と、デザイン設定のうちのアニメーションについてはすでに説明しました。今回はその他に設定できる項目についてみてみることにしましょう。
ワードプレス Diviの使い方６
設定でデザインできる共通項目と固有項目
１．デザイン設定の場所
Divi では Web ページのセクション、行（Row）、モジュール のそれぞれで同様の操作にてデザインを設定できます。様々なモジュールがありますが、今回は画像モジュールを例として示します。
 | セクション（青色）、行（緑色）、モジュール（灰色）のそれぞれの「⚙（歯車）」アイコンをクリックします。 |
設定パネルの「デザイン」タブにて設定できます。
 |
|
２．デザインを設定する
１）スマホアイコンと矢印アイコン
(1) スマホのアイコン
それぞれの設定項目の下記のスマホのアイコンをクリックすると、デスクトップ、タブレット、スマホ（電話）とで別に各項目を設定できます。
(2) 矢印のアイコン
それぞれの設定項目の下記の矢印のアイコンをクリックすると、初期設定とホバー時（マウスオーバー時）の設定とを別に各項目を設定できます。 マウスオーバーでサイズや色を変えるなどいろいろできます。
２）レイアウト（セクション設定のみ）
レイアウトはセクションのデザイン設定項目にのみあります。設定できる項目には「インナーシャドウを表示する」があります。
 | セクションの境界にかけて浮き出ているような影の効果を追加します。見栄えが良くなります。 |
 | わかりにくい効果ですが、赤枠で囲った部分です。 |
４）サイズ変更
(1) 共通項目
 |
|
(2) Section Alignment （セクション設定のみ）
 | Section Alignment：セクション配置の左寄せ、中央、右寄せを設定 |
(3) カスタム溝幅と列の高さの均等割り付け（行設定のみ）
 | 使用カスタム溝幅：カラム間の溝幅を指定 |
(4) Row Alignment（行(Row)設定のみ）
 | Row Alignment：行内のカラム配置の左寄せ、中央、右寄せを設定 |
(5) 全幅にする（モジュール設定のみ）
 | 全幅にする：カラム内で全幅にするかどうか設定 |
５）余白
余白を設定できます。
 | カスタムマージン：外側余白の設定 カスタムパディング：内側余白の設定 |
(1) Show Space Below The Image（モジュール設定のみ）
 | 画像の下にスペースを配置するかどうかの設定 |
６）境界（ボーダー）
境界（ボーダー）を設定できます。
- Rounded Corners：角の丸めの設定
- Border Styles：ボーダー線をどの辺に表示させるか、辺ごとに線の太さや色も設定できます
- ボーダー幅：線の幅、ピクセルで指定
- ボーダーカラー：ボーダー線の色、スポイトのアイコンをクリックすると自由に設定できます
- ボーダースタイル：ボーダー線の形状（下記に設定できます）
 |
|
直線
点線
くぼみ線
インセット
破線
二重線
浮き線
アウトセット
７）Box Shadow（ボックスシャドウ）
(1) Box Shadow
Box の影を下記のボタンで簡単に設定できます。
 | 下記のパネルを利用して詳細に設定することもできます。 |
(2) Box Shadow の詳細
Box Shadow の詳細を下記のパネルで設定できます。
- Box Shadow Horizontal Position：影の水平方向の位置
- Box Shadow Vertical Position ：影の垂直方向の位置
- Box Shadow Blur Strength：影のぼかしの強さ
- Box Shadow Spread Strength：影の広がりの強さ
- Shadow Color：影の色、スポイトをクリックすると自由に色を選べます
- Box Shadow Position：Outer Shadow（内側）とInner Shadow（外側）を設定できます
８）Filters（フィルター）
Filters では下記のような様々な色や諧調に関する設定が可能です。
- 色相：色相の設定
- 彩度：彩度の設定
- Brightness：明るさの設定
- Contrast：コントラストの設定
- Invert：色相、諧調の反転
- Sepia：セピア調の設定
- Opacity：透過度の設定
- Blur：ブレの設定
- Blend Mode：ブレンドモードの設定（背景の設定で解説しています）
９）Transform（変形）
(1) Transform Scale（拡大縮小）
 | Transform Scale で大きさを指定できます。 |
(2) Transform Translate（移動）
 | Transform Translate で表示位置を設定できます。 |
(3) Transform Rotate（回転）
 | Transform Rotate で配置を3軸で（３D）回転できます。 |
(4) Transform Skew（ゆがみ）
 | Transform Skew で歪めることができます。 |
(5) Transform Origin（変形させる要素の中心点）
 | Transform Origin で変形させる要素の中心点の位置を設定できます。 |
以上のデザイン設定を利用することで、本当に詳細に自分のしたいイメージに合わせた設定が可能です。
ワードプレス Divi レッスン Diviの使い方図解
写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。
