# Advocate向けにウィジェットまたはマイクロサイトのHTMLとCSSを編集する

Advocate のウィジェットとマイクロサイトは、追加の HTML と CSS を使って、ブランドの見た目や雰囲気により合うようにカスタマイズできます。Advocate の組み込み HTML エディターを使用すると、構造やスタイルを追加したり、さらに細かなカスタマイズのために一部のデフォルトコンポーネントを上書きしたりできます。

{% hint style="info" %}
**注**: カスタム HTML/CSS の編集は、特定の Advocate エディションでのみ利用できます。 [サポート](mailto:saasquatch-support@impact.com) に連絡してアカウントをアップグレードし、この機能にアクセスしてください。
{% endhint %}

#### なぜカスタム HTML や CSS を使うのですか？

カスタム HTML とインライン CSS を使うと、以下が可能です:

* 自社のブランドガイドラインにより近づける
* レイアウトと余白を再調整する
* デフォルトエディターで利用できる範囲を超えてスタイルを適用する
* 選択したウィジェットまたはマイクロサイトのコンポーネントのスタイルを上書きする

{% hint style="warning" %}
**重要**: カスタムコードによって発生した問題について、弊社サポートチームが提供できる支援は限定的です。ご不明な場合は、Advocate の導入担当チームまたは公開後サポートチームと連携することを推奨します。
{% endhint %}

#### HTML または CSS を編集する

{% tabs %}
{% tab title="マイクロサイトを編集する" %}
組み込みの HTML エディターを使用して、HTML または CSS を編集し、マイクロサイトをさらにカスタマイズできます。HTML エディターによりマイクロサイト設計の柔軟性は高まりますが、カスタム HTML や CSS で加えた変更については、弊社ではトラブルシューティングできないことにご注意ください。

1. 左側のナビゲーションメニューで、 ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → コンテンツ**.
2. マイクロサイトカードで、 **コンテンツを編集**.
3. を選択します。
4. 次を選択します ![](/files/3d8c371321e818aeb1828ecc9b606dc371bbf4a6)![](/files/fe64806517bb7cde48a79400e0aa01c33e1cc677) **\[コードビュー]** を上部メニューバーで選択します。
5. 必要に応じて HTML と CSS を追加または変更します。
6. CSS は 3 つの方法で追加できます:

   * 外部 CSS スタイルシートをインポートする
   * ページ上部の `<style>` タグ内で:

   ```programlisting
   <style>
     p {
       color: blue;
     }

     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }

     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 
   ```

   * インラインで、特定の HTML 要素にスタイルを適用する場合:

   ```programlisting
   <h3 style="font-size:30px;color:blue;">友人が当社の製品を使うと特典がもらえます</h3> 
   ```
7. 次を選択します ![](/files/3f8a985d99af992659d3d468f135ea2c589d126b) **\[ブラシ]** を選択して更新内容をプレビューします。
8. 次を選択します **下書きを保存** を保存するか、 **公開** して変更を反映します。
   {% endtab %}

{% tab title="ウィジェットを編集する" %}
組み込みの HTML エディターを使用して、HTML または CSS を編集し、ウィジェットをさらにカスタマイズできます。HTML エディターによりウィジェット設計の柔軟性は高まりますが、カスタム HTML や CSS で加えた変更については、弊社ではトラブルシューティングできないことにご注意ください。

1. 左側のナビゲーションメニューで、 ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → コンテンツ**.
2. で、 *ウィジェット* カードで、 **ウィジェットを編集**.
3. の下で、 *プログラムウィジェット*を選択し、編集したいウィジェットを選択します。

<div data-with-frame="true"><figure><img src="/files/763a229d83177baa09c8b8160c0a2fb7a2c1e650" alt="" width="563"><figcaption></figcaption></figure></div>

1. 上部メニューバーで、 ![](/files/3d8c371321e818aeb1828ecc9b606dc371bbf4a6)![](/files/fe64806517bb7cde48a79400e0aa01c33e1cc677) **\[ブラケット]**.
2. ページの本文に HTML を追加または編集します。
3. CSS は 3 つの方法で追加できます:

   * 外部 CSS スタイルシートをインポートする
   * ページ上部の `<style>` タグ内で:

   ```programlisting
   <style>
     p {
       color: blue;
     }

     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }

     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 
   ```

   * インラインで、特定の HTML 要素にスタイルを適用する場合:

   ```programlisting
   <h3 style="font-size:30px;color:blue;">友人が当社の製品を使うと特典がもらえます</h3> 
   ```
4. 次を選択します ![](/files/3f8a985d99af992659d3d468f135ea2c589d126b) **\[ブラシ]** を選択して更新内容をプレビューします。
5. 次を選択します **下書きを保存** を保存するか、 **公開** して変更を反映します。
   {% endtab %}
   {% endtabs %}

#### **CSS パーツを使用してコンポーネントを編集する**

ウィジェットまたはマイクロサイト内の一部の組み込みコンポーネントは、ビジュアルエディターだけでは完全にはスタイル設定できません。場合によっては、より細かな制御を可能にする CSS パーツを使って外観を上書きできます。

高度なスタイル更新をご希望の場合は、impact.com チームが可能な範囲についてご案内し、関連する CSS パーツセレクターを共有できます。CSS パーツを使ってコンポーネントを編集したい場合は、Advocate の導入担当チームまたは公開後サポートチームにお問い合わせください。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/edit-your-widget-or-microsite-html-and-css-for-advocate.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.