> ## 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を適用する

export const InlineImage = ({src, alt = '', height = '1.6em'}) => {
  return <img noZoom src={src} alt={alt} style={{
    display: 'inline',
    verticalAlign: 'start',
    height: height,
    margin: '0'
  }} />;
};

## はじめに

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

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

### 既知の制限事項

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

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

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

  ・タイトル

  ・まとめ数字

  ・説明

  ・アラート

  ・コメント

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

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

1. キャンペーンAppで、キャンペーンを選択して開きます。
2. **［メール本文］** タブで、 **メール本文エディター** を開きます。
3. ツールバーにある
   <InlineImage src="/images/kb/ja/ka05w00000126DC-00N5w00000Ri7BU-0EM5w000005wZOL.jpg" /> **［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" style={{width: 767.99, height: 481.996}} 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" style={{width: 754.993, height: 205.994}} width="936" height="256" data-path="images/kb/ka05w00000125Kw-00N5w00000Ri7BU-0EM5w000005wZNc.jpg" />
   </Frame>
8. **［保存］** を選択して変更を保存します。

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

日本語