> For the complete documentation index, see [llms.txt](https://help.impact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.impact.com/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/edit-your-widget-or-microsite-html-and-css-for-advocate.md).
# 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. 選択して  **［コード表示］** を上部メニューバーで。
5. 必要に応じて HTML と CSS を追加または変更します。
6. CSS は次の 3 つの方法で追加できます：
* 外部 CSS スタイルシートをインポートする
* ページ上部の次の場所に `
```
* インラインで、特定の HTML 要素にスタイルを適用するには：
```programlisting
友達が当社の製品を使うと特典を受け取れます
```
7. 選択して  **［ペイントブラシ］** で更新内容をプレビューします。
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. 次の項目の下の *プログラム ウィジェット*で、編集したいウィジェットを選択します。
1. 上部メニューバーで、次を選択します  **［ブラケット］**.
2. ページの body 内で HTML を追加または編集します。
3. CSS は次の 3 つの方法で追加できます：
* 外部 CSS スタイルシートをインポートする
* ページ上部の次の場所に `
```
* インラインで、特定の HTML 要素にスタイルを適用するには：
```programlisting
友達が当社の製品を使うと特典を受け取れます
```
4. 選択して  **［ペイントブラシ］** で更新内容をプレビューします。
5. 選択して **下書きを保存** で保存するか、 **公開** で変更を公開します。
{% endtab %}
{% endtabs %}
#### **CSS パーツを使ってコンポーネントを編集する**
ウィジェットやマイクロサイトの一部の組み込みコンポーネントは、ビジュアルエディターだけでは完全にスタイル設定できません。場合によっては、より細かく制御できる CSS パーツを使って外観を上書きできます。
高度なスタイル更新を行いたい場合は、impact.com チームが可能な内容を案内し、関連する CSS パーツセレクターを共有できます。CSS パーツを使ってコンポーネントを編集したい場合は、Advocate の導入チームまたはリリース後サポートチームにお問い合わせください。
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://help.impact.com/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/edit-your-widget-or-microsite-html-and-css-for-advocate.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.