> 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.
