> 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. ［Microsite］タブで、コードを編集したいレイアウトまたはページを選択します。
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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
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 what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.
