ドキュメントMarketo EngageMarketo ガイド

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

Last update: Tue Aug 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • 中級

独自のカスタム CSS をMarketo Engage メールDesigner内に直接追加して、高度な特定のスタイル設定を行います。

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

  1. 少なくとも 1 つのコンポーネントを追加して、メールDesignerでコンテンツの一部が定義されていることを確認します。

  2. 左側の ナビゲーションツリー または右側のパネルから 本文 を選択します。 CSS スタイル が右側に表示されます。

    {width="800" modal="regular"}

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

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

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

  4. ポップアップ表示される専用のテキスト領域に CSS コードを入力します。カスタム CSS が有効で、適切な構文に従っていることを確認します。 終了したら「保存」をクリックします。

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

  5. CSS がコンテンツに適用されていることを確認します。 表示されない場合は、 トラブルシューティングの節を確認してください。

    note note
    NOTE
    すべてのコンテンツを削除すると、セクションが非表示になり、以前に定義したカスタム CSS は適用されなくなります。 コンテンツを追加して CSS スタイル セクションを再表示します。 カスタム CSS が再度適用されます。

有効な CSS の使用 using-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 を追加」オプションを通じてのみ変更できます。

ガードレール – 読み込まれたコンテンツ guardrails

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

  • CSS を含むコンテンツを 外部HTMLの読み込みする場合、そのコンテンツを変換しない限り、コンテンツは 互換モード になり、「CSS スタイル」セクションは使用できません。

  • メールのDesignerで作成されたコンテンツに、「カスタム CSS を追加」オプションを通じて適用された CSS が含まれている場合、以前に適用された CSS は、同じオプションから表示および編集できます。

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

カスタム CSS が適用されていない場合は、以下の提案を試してください。

  • CSS が有効で、構文エラー（中括弧の欠落、プロパティ名の誤りなど）がないことを確認します。 詳細情報

  • CSS が、<style> 属性を持つ data-name="global-custom" タグに追加されていることを確認します。

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

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

  • CSS が他の CSS ルールによって上書きされていないことを確認します。

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

    • 必ず優先されるように、宣言に !important を追加することを検討してください。

例：
code language-none 
 ```css
 .acr-Form {
   background: red !important;
 }
 ```
NOTE
Marketo Engage サポートは、カスタム CSS のトラブルシューティングを支援するように設定されていません。 CSS のサポートについては、web 開発者にお問い合わせください。
recommendation-more-help
94ec3174-1d6c-4f51-822d-5424bedeecac