> ## Documentation Index
> Fetch the complete documentation index at: https://domoinc-openapi-sync-dataflows.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# キャンペーンAppでDomoカード画像にCSSを適用する

## はじめに

キャンペーンのメール本文に埋め込むカードに、CSSのスタイルを適用することができます。この記事では、そのプロセスについて説明します。

キャンペーンの作成についての詳細は、「 [DomoキャンペーンApp](/ja/s/article/360042933494) 」を参照してください。

### 既知の制限事項

この機能における既知の制限事項は以下の通りです。

* サポートされるコンポーネント：

  ・カード
* 1つのコンポーネントに追加できるCSSのクラスは1つだけです。
* 以下のカードフィールドでは、クラスタグを追加してもカードのスタイルは変更されません。

  ・タイトル

  ・まとめ数字

  ・説明

  ・アラート

  ・コメント

  ・登録解除
* 上記のフィールドにCSSタグを追加してもエラーは発生しませんが、タグはHTMLノードに追加されません。

## カードにCSSを追加する

1. キャンペーンAppで、キャンペーンを選択して開きます。
2. **［メール本文］** タブで、 **メール本文エディター** を開きます。
3. ツールバーにある
   <img src="https://mintlify.s3.us-west-1.amazonaws.com/domoinc-openapi-sync-dataflows/images/kb/ja/ka05w00000126DC-00N5w00000Ri7BU-0EM5w000005wZOL.jpg" style={{width: 20, height: 20, display: 'inline', verticalAlign: 'start', margin: '0'}} /> **［Change mode］** を選択して、HTMLモードに切り替えます。

   <Frame>
     <img alt="change mode.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/STh97d86twEaUU5_/images/kb/ka05w00000125Kw-00N5w00000Ri7BU-0EM5w000005wZOa.jpg?fit=max&auto=format&n=STh97d86twEaUU5_&q=85&s=c01ced8327d53b41ae82a74a1cc02e20" width="2256" height="1416" data-path="images/kb/ka05w00000125Kw-00N5w00000Ri7BU-0EM5w000005wZOa.jpg" />
   </Frame>
4. エディタの上部にHTMLスタイルタグを追加します
5. そのスタイルタグ内に、カスタムのCSSクラスを記述します。スタイルタグ\</style>を閉じます。
6. **［カードを追加］** を選択してカードをメールに追加します。
7. カードタグを編集し、クラスタグの後にカスタムのクラス名を追加します。

   <Frame>
     <img alt="applying css examples.png" src="https://mintcdn.com/domoinc-openapi-sync-dataflows/STh97d86twEaUU5_/images/kb/ka05w00000125Kw-00N5w00000Ri7BU-0EM5w000005wZNc.jpg?fit=max&auto=format&n=STh97d86twEaUU5_&q=85&s=e115c84abc7b8afa1bb65e4a4074545c" width="936" height="256" data-path="images/kb/ka05w00000125Kw-00N5w00000Ri7BU-0EM5w000005wZNc.jpg" />
   </Frame>
8. **［保存］** を選択して変更を保存します。

カードがレンダリングされると、そのCSSクラスがコンポーネントに適用されます。

日本語