---
url: "/ja/emailify/design/background-colors.md"
description: "EmailifyのレイアウトレイヤーにFigmaの塗りを適用して、背景をカスタマイズできます。"
---

# レイアウトレイヤーに背景色を追加する

> EmailifyのレイアウトレイヤーにFigmaの塗りを適用して、背景をカスタマイズできます。

> **Tip:** メール本文の外側に表示される[メールの外側の背景色をカスタマイズする方法](/ja/emailify/design/background)をお探しの場合は、Figmaページの背景を変更して設定できます。この色が、EmailifyからのすべてのHTMLエクスポートでメール本文の背景色として使われます。

## レイアウトレイヤーに単色の背景色を設定する {#setting-a-solid-background-color-on-any-of-your-layout-layers}

[Video](/assets/videos/emailify/design/layout-background-color.mp4)

メールデザインのレイアウト要素に単色の背景色を設定するには、Figmaでレイヤーをクリックし、（レイヤーのFigmaプロパティで**Fill**パネルの横にある **+** アイコンをクリックして）そのレイヤーに**Solid**の塗りを追加・設定します。プラグインからメールをHTMLにエクスポートすると、これがCSSの背景色として適用されます。

## Row、Column、Hero、Wrapperレイヤーにグラデーション背景を設定する {#setting-a-gradient-background-on-a-row-column-hero-or-wrapper-layer}

[Video](/assets/videos/emailify/design/layout-background-gradient.mp4)

メールデザインのRow、Column、Hero、Wrapperのレイアウト要素にグラデーション背景を設定するには、Figmaでレイヤーをクリックし、（レイヤーのFigmaプロパティで**Fill**パネルの横にある **+** アイコンをクリックして）そのレイヤーに**Gradient**の塗りを追加・設定します。プラグインからメールをHTMLにエクスポートすると、これが背景画像として適用されます（CSSグラデーションはメールクライアント間で[対応が限られている](https://www.caniemail.com/features/css-linear-gradient/)ため使用しません）。

> **Warning:** グラデーション背景は[背景画像](/ja/emailify/design/background-images)として出力されます。EmailifyのプレビューとHTMLエクスポートでは、Row、Column、Hero、Wrapperレイヤーで機能しますが、`mjml`と`loops`の生のエクスポートでは、Columnの背景画像の属性は引き続き省略されます。

## テキストレイヤーに単色の背景色を設定する {#setting-a-solid-background-color-on-text-layers}

[Video](/assets/videos/emailify/design/text-background.mp4)

メールデザインのテキストレイヤーに単色の背景色を設定するには、**Settings**パネルを開いた状態でメール内のFigmaテキストレイヤーを選択し、**Text Background Color**入力欄にHEXカラー値（例：`#FFFBA8`）を貼り付けます。HTMLメールで、そのテキストの背後に単色の背景色が自動的に追加されます。

> **Tip:** テキストレイヤーへの背景色の設定は、[テキストレイヤーへの内側の余白の追加](/ja/emailify/design/text-padding)と組み合わせることもできます。テキストの周囲に余白が加わり、背景部分にゆとりが生まれます。