ドキュメント Journey Optimizer Journey Optimizer ガイド

メールコンテンツへのカスタム CSS の追加 email-metadata

最終更新日： 2026年9月5日

作成対象：

中級
ユーザー

このページでは、高度なスタイル設定を行うためにメール Designerでカスタム CSSをメールコンテンツに追加する方法、CSSを有効に保つ方法、適用されないスタイルをトラブルシューティングする方法について説明します。

style

shade-box

メールをデザインする際に、Journey OptimizerE メールデザイナー内で独自のカスタム CSS を直接追加できます。この機能により、高度で特定のスタイル設定を適用して、コンテンツの外観に対する柔軟性と制御を高めることができます。

カスタム CSS の定義 define-custom-css

メールコンテンツにカスタム CSS を追加するには、次の手順に従います。

1 つ以上のコンポーネントを追加して、E メールデザイナーにコンテンツが定義されていることを確認します。

左側の ナビゲーションツリー または右側のパネルの上部にある「本文」を選択します。右側に「CSS スタイル」セクションが表示されます。

「カスタム CSS を追加」ボタンを選択 {width="85%"}

note
NOTE
「CSS スタイル」セクションは、エディターにコンテンツが既に存在する場合にのみ使用できます。

「カスタム CSS を追加」ボタンをクリックします。

note
NOTE
「カスタム CSS を追加」ボタンは、「本文」を選択した場合にのみ使用できます。ただし、コンテンツ内のすべてのコンポーネントにカスタム CSS スタイルを適用できます。

ポップアップ表示される専用のテキスト領域に CSS コードを入力します。カスタム CSS が有効で、適切な構文に従っていることを確認します。詳細情報

専用のテキスト領域にカスタム CSS を入力 {width="65%"}

note
NOTE
コンテンツがロックされたテンプレートを使用する場合、コンテンツにカスタム CSS を追加できません。ボタンのラベルがカスタム CSS を表示に変わり、コンテンツに既に存在するカスタム CSS は読み取り専用になります。

カスタム CSS を保存し、カスタム CSS がコンテンツに正しく適用されていることを確認します。該当しない場合は、トラブルシューティングの節を確認してください。

{width="85%"}
すべてのコンテンツを削除すると、セクションは非表示になり、以前に定義したカスタム CSS は適用されなくなります。
コンテンツをエディターに追加し直すと、「CSS スタイル」セクションが再表示されます。カスタム CSS が再度適用されます。

有効な CSS の使用の確認 use-valid-css

「カスタム CSS を追加」テキスト領域に有効な CSS 文字列を入力できます。適切に書式設定した CSS はコンテンツにすぐに適用されます。

CAUTION

カスタム CSS のセキュリティについては、ユーザーが責任を負います。 CSS によって脆弱性が発生したり、既存のコンテンツと競合したりしていないことを確認します。

意図せずコンテンツのレイアウトや機能を損なう可能性がある CSS の使用は回避します。

CSS のサンプル

有効な CSS の例を以下に示します。

code language-css

.acr-component[data-component-id="form"] {
  display: flex;
  justify-content: center;
  background: none;
}

.acr-Form {
  width: 100%;
  padding: 20px 100px;
  border-spacing: 0px 8px;
  box-sizing: border-box;
  margin: 0;
}

.acr-Form .spectrum-FieldLabel {
  width: 20%;
}

.acr-Form.spectrum-Form--labelsAbove .spectrum-FieldLabel,
.acr-Form [data-form-item="checkbox"] .spectrum-FieldLabel {
  width: auto;
}

.acr-Form .spectrum-Textfield {
  width: 100%;
}

#acr-form-error,
#acr-form-confirmation {
  width: 100%;
  padding: var(--spectrum-global-dimension-static-size-500);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: var(--spectrum-global-dimension-static-size-200);
}

.spectrum-Form-item.is-required .spectrum-FieldLabel:after{
  content: '*';
  font-size: 1.25rem;
  margin-left: 5px;
  position: absolute;
}

/* Error field placeholder */
.spectrum-HelpText {
  display: none !important;
}

.spectrum-HelpText.is-invalid,
.is-invalid ~ .spectrum-HelpText {
  display: flex !important;
}

code language-css
`@media only screen and (min-width: 600px) { .acr-paragraph-1 { width: 100% !important; } }`

無効な CSS のサンプル

無効な CSS を入力すると、CSS を保存できないことを示すエラーメッセージが表示されます。無効な CSS の例を以下に示します。

<style> タグの使用は許可されていません。

code language-html
`<style type="text/css"> .acr-Form { width: 100%; padding: 20px 100px; border-spacing: 0px 8px; box-sizing: border-box; margin: 0; } </style>`

中括弧の欠落などの無効な構文は許可されていません。

code language-css
`body { background: red;`

技術的な実装 implementation

次の例に示すように、カスタム CSS は、data-name="global-custom" 属性を持つ <style> タグの一部として <head> セクションの末尾に追加されます。これにより、カスタムスタイルがコンテンツにグローバルに適用されます。

詳しくは、サンプルを参照してください

code language-html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="content-version" content="3.3.31">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style data-name="default" type="text/css">
      td { padding: 0; }
      th { font-weight: normal; }
    </style>
    <style data-name="grid" type="text/css">
      .acr-grid-table { width: 100%; }
    </style>
    <style data-name="acr-theme" type="text/css" data-theme="default" data-variant="0">
      body { margin: 0; font-family: Arial; }
    </style>
    <style data-name="media-default-max-width-500px" type="text/css">
      @media screen and (max-width: 500px) {
        body { width: 100% !important; }
      }
    </style>
    <style data-name="global-custom" type="text/css">
      /* Add you custom CSS here */
    </style>
  </head>
  <body>
    <!-- Minimal content -->
  </body>
</html>

カスタム CSS は、E メールデザイナーの設定パネルでは解釈または検証されません。これは完全に独立しており、「カスタム CSS を追加」オプションを通じてのみ変更できます。

ガードレール - インポートしたコンテンツ

E メールデザイナーに読み込んだコンテンツでカスタム CSS を使用する場合は、次の点を考慮します。

CSS を含む外部 HTML コンテンツを読み込む場合、そのコンテンツを変換しない限り、互換性モードになり、「CSS スタイル」セクションは使用できません。既存のコンテンツの読み込みの詳細情報
「カスタム CSS を追加」オプションを通じて適用された CSS を含む、E メールデザイナーで作成したコンテンツを読み込む場合、以前に適用された CSS は同じオプションから表示および編集できます。

トラブルシューティング troubleshooting

カスタム CSS が適用されない場合は、以下のオプションを考慮します。

CSS が有効で、構文エラー（中括弧の欠落、プロパティ名の誤りなど）がないことを確認します。方法についてはこちらを参照
CSS が data-name="global-custom" 属性を持つ <style> タグに追加されていることを確認します。

global-custom スタイルのタグに属性 data-disabled が true に設定されているかどうかを確認します。該当する場合、カスタム CSS は適用されません。

accordion

例：

code language-html
`<style data-name="global-custom" type="text/css" data-disabled="true"> body: { color: red; } </style>`

コンテンツに適用されたテーマを含む、他の CSS ルールによって CSS が上書きされないようにします。

ブラウザーの開発者ツールを使用してコンテンツを検査し、CSS が正しいセレクターをターゲットにしていることを確認します。

優先されるようにするには、宣言に !important を追加することを考慮します。

accordion

例：

code language-css
`.acr-Form { background: red !important; }`

AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

TL;DR: This page explains how to add custom CSS to email content in the Email Designer for advanced styling, how to keep the CSS valid, how it is implemented in the HTML, and how to troubleshoot styles that are not applied.

Intents:

Add custom CSS to email content for advanced and specific styling
Ensure the entered CSS is valid so it is applied and can be saved
Understand where custom CSS is injected in the generated HTML
Troubleshoot custom CSS that is not applied
Understand custom CSS behavior with imported content

Glossary:

Add Custom CSS: The Email Designer option (available when Body is selected) to enter custom CSS in a dedicated text area (product-specific)
CSS styles section: The section, shown when Body is selected and content is present, from which custom CSS is added (product-specific)
global-custom: The data-name="global-custom" <style> tag added to the end of the <head> where custom CSS is placed (product-specific)
Compatibility mode: The mode for imported external HTML content (unless converted) in which the CSS styles section is not available (product-specific)

Guardrails:

The CSS styles section is only available when content is already present in the editor; the Add custom CSS button is only available when Body is selected.
Custom CSS must be valid and follow proper syntax; invalid CSS (for example using <style> tags, or syntax errors such as missing braces) triggers an error message and cannot be saved.
When using a template with locked content, you cannot add custom CSS; the button changes to View custom CSS and existing custom CSS is read-only.
If you remove all content, the CSS styles section disappears and the previously defined custom CSS is no longer applied; adding content back reapplies it.
For imported external HTML content in Compatibility mode (unless converted), the CSS styles section is not available.
Users are responsible for the security of their custom CSS and should ensure it does not introduce vulnerabilities or break the layout.
Custom CSS is not interpreted or validated by the Settings pane; it is independent and can only be modified through the Add Custom CSS option.

Terminology:

Canonical name: Custom CSS — Acronym: CSS — variants: Add Custom CSS, custom CSS styles
Synonyms: “Add custom CSS” = “Add Custom CSS” (button); becomes “View custom CSS” for locked content
Do not confuse: “custom CSS” (global-custom style tag) ≠ default/system-generated CSS styles (other data-name style tags such as default, grid, acr-theme)
Do not confuse: “Compatibility mode” (imported external HTML, no CSS styles section) ≠ content created with the Email Designer (custom CSS visible and editable)

FAQ:

Q: Why is the Add custom CSS button missing? — The CSS styles section requires content in the editor, and the button is only available when Body is selected.
Q: What happens if my CSS is invalid? — An error message is displayed indicating the CSS cannot be saved; <style> tags and syntax errors such as missing braces are not accepted.
Q: Where is my custom CSS added in the HTML? — To the end of the <head> section as a <style data-name="global-custom"> tag.
Q: My custom CSS is not applied — what should I check? — Verify the CSS is valid, that it is in the global-custom style tag, that data-disabled is not set to true, and that it is not overridden by other rules including an applied theme; consider adding !important.
Q: Can I add custom CSS to a template with locked content? — No; the button becomes View custom CSS and any existing custom CSS is read-only.

recommendation-more-help

journey-optimizer-help