Elementorではインストールしたテンプレートによって背景色が設定してあることがあります。ここでは背景色を変更する方法について解説しています。
デフォルトの背景色を変更する方法
デフォルトの背景色を変更する方法はとても簡単です。
サイト全体に影響する項目なので上部メニューの「サイト設定 → 背景」へと進みます。
![](https://prograshi.com/wp-content/uploads/2024/06/image-19.png)
↓ サイト設定を選択
![](https://prograshi.com/wp-content/uploads/2024/06/image-20.png)
↓ 背景を選択
![](https://prograshi.com/wp-content/uploads/2024/06/image-21.png)
↓ 好きなカラーを選択
![](https://prograshi.com/wp-content/uploads/2024/06/image-22.png)
この流れで簡単に変更できます。
実例
▼デフォルトのファーストビュー
デフォルトの背景色は白色になっています。
![](https://prograshi.com/wp-content/uploads/2024/06/image-19-1-1024x494.jpg)
個の背景色を薄いグレー(#efefef)に変更します。
![](https://prograshi.com/wp-content/uploads/2024/06/image-23.png)
すると、背景色も変更となります。
![](https://prograshi.com/wp-content/uploads/2024/06/image-24-1024x517.jpg)
背景画像の削除と設定
同じく「サイト設定 → 背景」メニューでサイト全体に適用する背景画像の設定や削除をすることもできます。
画像を設定する場合は画像の「+」で登録したい画像を選びます。
![](https://prograshi.com/wp-content/uploads/2024/06/image-22.png)
↓ 画像を選択
![](https://prograshi.com/wp-content/uploads/2024/06/image-24.png)
すると、背景に画像が適用されます。
![](https://prograshi.com/wp-content/uploads/2024/06/image-25-1024x522.jpg)
削除したい場合はゴミ箱アイコンをクリックします。
![](https://prograshi.com/wp-content/uploads/2024/06/image-25.png)
設定を変更したら「更新」をお忘れなく。
背景のグローバルカラーを変更する方法
Elementorではテーマごとにデフォルトで設定されているテーマカラーがあります。
背景色を選択するときもこのカラーパレットの中から色を選択することができます。
色で地球のマークをクリックします。すると、現在設定してあるグローバルカラーが表示されます。
![](https://prograshi.com/wp-content/uploads/2024/06/image-26.png)
設定を変更したい場合はグローバルカラーの横の歯車アイコンをクリックします。
![](https://prograshi.com/wp-content/uploads/2024/06/image-28.png)
クリックすると「サイト設定 → グローバルカラー」の画面に飛びます。ここで、システムカラーを設定や変更することができます。
![](https://prograshi.com/wp-content/uploads/2024/06/image-29.png)
変更したい場合は、変更したい箇所をクリックします。
![](https://prograshi.com/wp-content/uploads/2024/06/image-30.png)
並べ替えや削除もできます。
![](https://prograshi.com/wp-content/uploads/2024/06/image-31.png)
「色を追加」をクリックすれば、カスタムカラーに好きな色を追加することができます。
![](https://prograshi.com/wp-content/uploads/2024/06/image-32.png)
編集が終わったら「更新」をクリックします。
先ほどの背景色の選択画面に戻ってみると、追加したカスタムカラーも表示されていることがわかります。
![](https://prograshi.com/wp-content/uploads/2024/06/image-33.png)
グローバルカラーメニュー
上記ではグローバルカラーへのアクセスをカラー選択画面から遷移しましたが、「メニュー → サイト設定 → グローバルカラー」からも遷移することができます。
![](https://prograshi.com/wp-content/uploads/2024/06/image-19.png)
↓ サイト設定
![](https://prograshi.com/wp-content/uploads/2024/06/image-20.png)
↓ グローバルカラー
![](https://prograshi.com/wp-content/uploads/2024/06/image-34.png)
グローバルフォント
なお、グローバルカラーのページで下の方に表示される「Global Fonts(グローバルフォント)」を編集することもできます。
![](https://prograshi.com/wp-content/uploads/2024/06/image-35.png)
変更したいフォントをクリックすると設定画面が表示されます。
![](https://prograshi.com/wp-content/uploads/2024/06/image-36.png)