> 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を編集する
追加のHTMLとCSSを使用して、Advocateのウィジェットやマイクロサイトを、ブランドのルック＆フィールにより適合するようカスタマイズできます。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. ページの本文で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.