ワードプレス Divi リファレンス１ 外観のカスタマイズ

今回は Divi テーマのカスタマイズのうち、「外観」＞「カスタマイズ」の項目で設定できる内容について図解します。

外観のカスタマイズを設定するには、ワードプレスダッシュボードの、

下記のように設定画面が表示されます。

上記はそれぞれ、

1. 現在のテーマの表示と変更
2. 現在のテーマのカスタマイズ
3. プレビュー表示の切り替え（PC、タブレット、携帯）

となっています。設定をカスタマイズすると、サイトのプレビューに反映され、確認することができます。また下部には、プレビュー表示を切り替えることのできるアイコンが配置されます。

一般設定をクリックすると、下記の項目が表示され、

サイトアイデンティティでは、

レイアウト設定では、

箱入りレイアウト有効

箱入りレイアウト無効

書式では、

背景では、

ヘッダーとナビをクリックすると、下記の項目が表示され、

ヘッダー形式では、

ヘッダースタイルでは、

中央揃えでアイコンを上に表示

「≡」クリックでスライド・イン表示

メニューの配置を縦にする

第一メニューバーでは、

• 全幅にする
• ロゴの非表示
• メニューの高さ
• ロゴの最大高さ
• テキストサイズ
• 文字間隔
• フォントスタイル
• テキストの色
• アクティブリンクカラー
• 背景色
• ドロップダウンメニューの背景色
• ドロップダウンメニューの行カラー
• ドロップダウンメニューのテキストカラー
• ドロップダウンメニューのアニメーション
  （フェード、拡大、スライド、反転）

を設定できます。

第二メニューバーでは、メニューバー上部のサブメニューの、

• 全幅にする
• ロゴの非表示
• メニューの高さ
• ロゴの最大高さ
• テキストサイズ
• 文字間隔
• フォントスタイル
• テキストの色
• アクティブリンクカラー
• 背景色
• ドロップダウンメニューの背景色
• ドロップダウンメニューの行カラー
• ドロップダウンメニューのテキストカラー
• ドロップダウンメニューのアニメーション
  （フェード、拡大、スライド、反転）

を設定できます。

ヘッダー要素では、

フッターをクリックすると、下記の項目が表示され、

レイアウトではフッターの、

ウィジェットではフッターの、

フッター要素では、下部フッターの、

フッターメニューではフッターメニューの、

下部ナビでは下部ナビの、

ボタンをクリックすると、下記の項目が表示され、

ボタンスタイルでは、

• テキストサイズ
• テキストの色
• 背景色
• ボーダー幅
• ボーダーカラー
• ボーダーの丸み
• 文字間隔
• ボタンのスタイル
• ボタンアイコンを追加
• アイコンの選択
• アイコンの色
• アイコンの位置
• マウスオーバー時のみアイコンを表示

を設定できます。

ボタンマウスオーバースタイルではボタンをマウスオーバーした際の、

ブログをクリックすると、下記の項目が表示され、

投稿では投稿記事の、

• メタ情報のテキストサイズ
• メタ情報の行の高さ
• メタ情報の文字間隔
• メタ情報のフォントスタイル
• ヘッダーテキストサイズ
• ヘッダーの行の高さ
• ヘッダーの文字間隔
• ヘッダーのフォントスタイル

を設定できます。

※ メタ情報：入力者や投稿日といった情報

モバイルスタイルをクリックすると、下記の項目が表示され、

モバイルと電話はそれぞれの画面サイズでの設定ができ、その設定項目は同じ内容です。

モバイルメニューではモバイル機器での、

カラースキームをクリックすると、下記の項目が表示され、

下記のカラースキームが選択可能です。

メニューをクリックすると、下記の項目が表示され、

各メニュー名をクリックすることで、

すべての位置を表示をクリックすることで、

ウィジェットをクリックすると、どのエリアに登録するかを選択でき、

ホームページ設定をクリックすると、下記の項目が表示され、

固定ページを選択した場合は、どれか一つの固定ページ、あるいは、投稿ページから選べます。

追加CSSをクリックすると、下記が表示され、