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

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

1.外観のカスタマイズの設定場所

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

「外観」>「カスタマイズ」をクリックします。

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

上記はそれぞれ、

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

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

2.一般設定

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

  • サイトアイデンティティ
  • レイアウト設定
  • 書式
  • 背景

を設定できます。

1)サイトアイデンティティの設定

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

  • サイトのタイトル
  • キャッチフレーズ
  • サイトアイコン

を設定できます。サイトアイコンはぜひ設定しましょう。設定しないと Divi のアイコンのままになってしまいます。

2)レイアウト設定

レイアウト設定では、

  • 箱入りレイアウト
  • サイトコンテンツ幅
  • サイトコンテンツ間隔
  • カスタムサイドバー幅の使用
    サイドバー幅
  • セクション高さ
  • 行の高さ
  • テーマカラー

を設定できます。

 

箱入りレイアウトを有効にすると、表示領域の境界に枠線がつきます

箱入りレイアウト有効

箱入りレイアウト無効

3)書式

書式では、

  • ボディテキストサイズ
  • ボディ行の高さ
  • ヘッダーテキストサイズ
  • ヘッダー文字間隔
  • ヘッダー行の高さ
  • ヘッダーフォントスタイル
  • ボディリンクカラー
  • ボディテキストカラー
  • ヘッダーテキストカラー

を設定できます。

 (※ボディは本文のこと)

4)背景

背景では、

  • 背景色
  • 背景画像

を設定できます。

3.ヘッダーとナビ

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

  • ヘッダー形式
  • 第一メニューバー
  • 第二メニューバー
  • ヘッダー要素

を設定できます。

1)ヘッダー形式

ヘッダー形式では、

  • ヘッダースタイル
  • 縦ナビ

を設定できます。

ヘッダースタイルでは、

  • 初期設定
  • 中央で揃える
  • 中央寄せ
  • スライド・イン
  • フルスクリーン

を選択できます。

(1) 初期設定

画面上部に右寄せ一列で表示

(2) 中央で揃える

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

(3) 中央寄せインラインロゴ

中央揃えでアイコンはインラインに表示

(4) スライド・イン

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

(5) フルスクリーン

「≡」クリックで全画面表示

(6) 縦ナビを有効にする

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

2)第一メニューバー

第一メニューバーでは、

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

を設定できます。

3)第二メニューバー

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

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

を設定できます。

4)ヘッダー要素

ヘッダー要素では、

  • ソーシャルアイコン表示
  • 検索アイコン表示
  • 電話番号
  • Eメール

を設定できます。

 

 

4.フッター

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

  • レイアウト
  • ウィジェット
  • フッター要素
  • フッターナビメニュー
  • 下部ナビ

を設定できます。

1)レイアウト

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

  • 列レイアウト
  • フッターの背景色

を設定できます。

2)ウィジェット

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

  • ヘッドテキストサイズ
  • ヘッドフォントスタイル
  • ボディリンクテキストサイズ
  • ボディリンク行の高さ
  • ボディフォントスタイル
  • ウィジェットテキストカラー
  • ウィジェットリンクカラー
  • ウィジェットヘッダーカラー
  • ウィジェットどっとカラー

を設定できます。

 

 

3)フッター要素

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

  • ソーシャルアイコン表示

を設定できます。

 

 

4)フッターメニュー

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

  • フッターメニュー背景色
  • フッターメニューテキストカラー
  • アクティブリンクカラー
  • 文字間隔
  • フォントスタイル
  • フォントサイズ

を設定できます。

 

 

5)下部ナビ

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

  • 背景色
  • テキストの色
  • フォントスタイル
  • フォントサイズ
  • ソーシャルアイコンサイズ
  • ソーシャルアイコンカラー
  • フッタークレジット

を設定できます。

フッタークレジットは設定しておかないと、Elegant Themes と WordPress になるので、必ず設定しましょう。

 

 

5.ボタン

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

  • ボタンスタイル
  • ボタンマウスオーバースタイル

を設定できます。

1)ボタンスタイル

ボタンスタイルでは、

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

を設定できます。

2)ボタンマウスオーバースタイル

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

  • テキストの色
  • 背景色
  • ボーダーカラー
  • ボーダーの丸み
  • 文字間隔

を設定できます。

 

 

6.ブログ

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

  • 投稿

を設定できます。

1)投稿

投稿では投稿記事の、

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

を設定できます。

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

7.モバイルスタイル

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

  • タブレット
  • 電話
  • モバイルメニュー

を設定できます。

1)タブレット・電話

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

  • セクションの高さ
  • 行の高さ
  • ボディテキストサイズ
  • ヘッダーテキストサイズ

を設定できます。

2)モバイルメニュー

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

  • ロゴ画像の表示
  • テキストの色
  • 背景色

を設定できます。

8.カラースキーム

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

  • カラースキーム
    (デフォルトの色のセット)

を設定できます。

 

1)カラースキーム

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

  • 初期設定
  • オレンジ
  • ピンク

に設定できます。

9.メニュー

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

  • 各メニュー名
  • メニューの新規作成
  • すべての位置を表示

を設定できます。

 

1)各メニュー名・メニューの新規作成

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

  • メニューに表示させる項目
    (様々な項目を設定可能)
  • メニューの表示位置
  • メニューに新しいページを追加

を設定できます。

2)すべての位置を表示

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

  • メインメニュー
  • サブメニュー
  • フッターメニュー

に作成したどのメニューを表示させるかを設定できます。

10.ウィジェット

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

「ウィジェットを追加」をクリックすることで、どういったウィジェットを設定するのかを選択できます。

 

11.ホームページ設定

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

  • 最新の投稿
  • 固定ページ

から選択できます。

 

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

12.追加CSS

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

カスタムCSSを自由に追加できます。

 

ワードプレス Divi レッスン Diviの使い方図解

写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。

divi-lesson3-3-logo

ワードプレス Diviの使い方3 レイアウトを使ったWebページ作成3

今回は Divi のレイアウトライブラリを使ったサイト( Webページ...

動画 と 動画スライダーモジュール Diviの使い方10-3

今回は Divi の各種モジュールのうちから、動画モジュールと動画スライダーモジュールについて図解したいと思います。 動画と動画スライダーモジュール...
divi-lesson3-1-logo

ワードプレス Diviの使い方3 レイアウトを使ったWebページ作成1

今回は一連の流れで、実際のサイト( Webページ )の作成を行ってみましょう。作るサイトは写真家のサイトということにしましょう。...

Pin It on Pinterest