今回はサイトの色を変える方法を解説します。Divi では複数の方法で色を変えることができます。

Divi の使い方8 外観のカスタマイズ3 色を変える方法

4.カラースキームでサイト全体の色を変える

手軽にサイト全体でのタイトルやアイコンの色を変えるには、「外観」>「カスタマイズ」のカラースキームが利用できます。各メニューの文字色とアイコンの色が変化し、一気にイメージが変わります。

5.サイトの文字や背景の色を変える

1)ページの文字色を変える

ページ全体での文字の色を変えるには、「外観」>「カスタマイズ」の、

「一般設定」の「書式」をクリックします。
  • ボディリンクカラー
  • ボディテキストカラー
  • ヘッダーテキストカラー

の「色を選択」をクリックすることで個別に設定できます。

「色を選択」をクリックすると、カラー選択のパネルが表示され自由に選択できます。また、透過度も設定できます。

上記の操作で、記事の文字色、ヘッダーの文字色、リンクの文字色を変えられます。メタ情報やボタンの色、ウィジェットの色は別に設定できます。

2)サイトの背景色を変更する

サイトの背景の色を変えるには、「外観」>「カスタマイズ」の、

「一般設定」>「背景」をクリックします。
背景では「背景色」と「背景画像」を設定できます。

6.ヘッダーの色を変える

ヘッダーの色を変更するのは、「外観」>「カスタマイズ」の、

「ヘッダーとナビ」のパネルで行います。

1)第一メニューバー(メインメニュー)の色を変更する

第一メニューバーの色を変更するには、上記「ヘッダーとナビ」パネルの「第一メニューバー」をクリックします。

  • テキストの色
  • アクティブリンクカラー
  • 背景色
  • ドロップダウンメニューの背景色
  • ドロップダウンメニューの行カラー
  • ドロップダウンメニューのテキストカラー

を設定できます。

2)第二メニューバー(サブメニュー)の色を変更する

第二メニューバーの色を変更するには、上記「ヘッダーとナビ」パネルの「第二メニューバー」をクリックします。

  • 背景色
  • テキストの色
  • ドロップダウンメニュー背景色
  • ドロップダウンメニューテキストカラー

を設定できます。

3)固定ナビの色を変える

ページをスクロールしたときに、画面上部に固定される「固定ナビ」の色を変更するには、「ヘッダーとナビ」パネルの「固定ナビ」をクリックします。

  • 第一メニュー背景色
  • 第二メニュー背景色
  • 第一メニューリンクの色
  • 第二メニューリンクの色
  • アクティブメニューリンクの色

を変更できます。

7.フッターの色を変える

フッターの色を変更するのは、「外観」>「カスタマイズ」の、

「フッター」のパネルで行います。

1)フッターウィジェットの文字色を変更する

フッターウィジェットの文字色を変更するには、上記「フッター」パネルの「ウィジェット」をクリックします。

  • ウィジェットテキストカラー
  • ウィジェットリンクカラー
  • ウィジェットヘッダーカラー
  • ウィジェットドットカラー

を変更できます。

2)フッターウィジェットの背景色を変える

フッターウィジェットの背景色を変更するには、上記「フッター」パネルの「レイアウト」をクリックします。

「フッターの背景色」で「色を選択」をクリックします。

3)フッターメニューの色を変える

フッターメニューの色を変更するには、上記「フッター」パネルの「フッターメニュー」をクリックします。

フッターメニューの

  • 背景色
  • テキストカラー
  • アクティブリンクカラー

を変更できます。

4)下部ナビの色を変える

下部ナビの色を変更するには、上記「フッター」パネルの「下部ナビ」をクリックします。

下部ナビの

  • 背景色
  • テキストの色

を変更できます。

また下部ナビの「ソーシャルアイコンカラー」の変更もできます。

8.セクション、行、モジュールの色を変更する

セクション、行、モジュールの設定を変更するには、

それぞれの「⚙(歯車)」をクリックし設定のパネルを開きます。

1)背景色を変更する

行設定を開いていますが他も同様です。

「コンテンツ」>「背景」をクリックします。
(1) 背景を塗りつぶす
「塗りつぶし(バケツ)」タブで、「+(Add Background Color)」をクリックします。
色を選択して塗りつぶします。
(2) 背景にグラデーションを設定する
「グラデーション」のタブで「+(Add Background Color)」をクリックします。
  • 色を選択
  • グラデーションタイプ
  • ポジションの始点
  • ポジションの終点

を利用して、グラデーションを作成できます。

 

また「Place Gradient Above Background Image」を使うことで、背景画像の前に設定するか後ろに設定するかを選択できます。

 

2)文字の色を変更する

テキストモジュールやコメント等の文字のモジュールでは、その文字色を変更できます。

「設定」の「テキスト」をクリックします。
「テキストカラー」で色を変えられます。
スポイトのマークをクリックすることで、自由に色を選択することができます。また、透過度の設定も可能です。

これらの色を選択する機能を組み合わせることで、自由にサイトの色を作り上げていくことが可能です。

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

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

divi-lesson3-3-logo

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

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

ワードプレス Diviの使い方6 設定でデザインできる共通項目と固有項目

Divi Builder の設定のデザインタブで設定できる項目として、セクションの...
divi-tips-asy-table-of-contents-logo

Divi サイトに目次機能を追加 Easy Table of Contents の設定

Divi で作成している Web サイトに目次機能を追加するのに、便利なプラグインとして「 Easy Table of...

ワードプレス Diviの使い方 7-2 イラストの形にグラデーション画像を表示する

前回は文字の形に画像を切り抜いて表示させましたが、今回はイラストの形にグラデーション画像を切り抜いてみましょう。Divi...

Pin It on Pinterest