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

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

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

レイアウトレイヤーに単色の背景色を設定する ​

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

Row、Column、Hero、Wrapperレイヤーにグラデーション背景を設定する ​

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

グラデーション背景は背景画像として出力されます。EmailifyのプレビューとHTMLエクスポートでは、Row、Column、Hero、Wrapperレイヤーで機能しますが、mjmlとloopsの生のエクスポートでは、Columnの背景画像の属性は引き続き省略されます。

テキストレイヤーに単色の背景色を設定する ​

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

テキストレイヤーへの背景色の設定は、テキストレイヤーへの内側の余白の追加と組み合わせることもできます。テキストの周囲に余白が加わり、背景部分にゆとりが生まれます。