> 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/customize-widgets-and-microsites-with-the-content-editor.md).

# コンテンツエディターでウィジェットとマイクロサイトをカスタマイズする

コンテンツエディターを使えば、ブランドのアイデンティティにシームレスに一致するウィジェットやマイクロサイトを作成でき、お客様に一貫性があり信頼できる体験を提供できます。ブランドが適切に反映された接点は、高いエンゲージメントとプログラムの利用促進に不可欠です。

#### 一元化されたブランディング管理

ウィジェットまたはマイクロサイトのスタイルオプションを使えば、ブランドの中核となるデザイン要素を簡単に見つけて更新できます。すべてのブランディング設定は、専用のブランディングセクションにまとめられています。

ウィジェットやマイクロサイトは、ユーザーがログインしているか、エラーに遭遇しているか、モバイルデバイスで閲覧しているかなど、状況によって表示が異なります。エディターのプレビューを使えば、ウィジェットやマイクロサイトのあらゆる状態を簡単に切り替えて確認できます。

{% hint style="info" %}
**注**：プレビューはウィジェット（例：即時アクセスウィジェット）やコンポーネント（例：現金、リワード交換）により適しています。マイクロサイトをプレビューするには、各マイクロサイトのページに移動して状態を確認する必要があります。
{% endhint %}

これにより、コンポーネントの見た目を確認するために手動で操作を完了する必要がなくなります。これからは、ユーザージャーニーの各ステップにおけるテキストとデザインを安心して編集できます。たとえば、以下が含まれます：

* ログイン済み表示とログアウト時表示
* エラーメッセージと成功メッセージ
* 複数ステップのフローにおける異なる手順（現金支払いの確認など）

ブランディングスタイルをカスタマイズするには：

1. 左側のナビゲーションメニューで、 ![](/files/7ddd72d8e69e7055d9408cf4847c5c54abf9f71d) **\[Engage] → コンテンツ**.
   * ウィジェットの場合は、 **ウィジェットを編集** 、マイクロサイトの場合は、 **コンテンツを編集**.
2. 左側メニューで、編集対象をマイクロサイトにするかウィジェットにするかを選択します。
3. 編集したいページテンプレートを選択し、次に **ウィジェットのスタイル**/**マイクロサイトのスタイル**.
4. ウィジェットまたはマイクロサイトに表示されるメインカラーを変更するには、ブランドカラーを選択します。
5. 次に、使用したいフォントスタイルを選択します。
6. **\[任意]** 残りのスタイルオプションを順に設定して、ウィジェットまたはマイクロサイト内でブランドアイデンティティを完全にカスタマイズします。

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

<details>

<summary>スタイルエディター要素の参照</summary>

| スタイル要素     | 説明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| メインブランドカラー | <p>この色は、ウィジェットまたはマイクロサイト全体のさまざまな要素に使用されるため、この手順は重要です。メインブランドカラーを選択してください。</p><p>この色は、編集オプションの下部にあるプライマリボタンおよびセカンダリボタンのセクションでも使用されます。</p><p><img src="/files/efe1d64c61c05af461fc7edc4962b55219c66ee8" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                    |
| フォント       | <p>ウィジェットまたはマイクロサイトに表示したいフォントスタイルを選択します。</p><p><img src="/files/e3fbeb21de8fac19cf593ae5a58502719854c66e" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| 色          | <p>ウィジェットまたはマイクロサイトに表示したい各種の色とアクセントを選択します：</p><p>• <strong>背景</strong></p><p>ウィジェットまたはマイクロサイトの背景色を選択します。</p><p>• <strong>テキスト</strong></p><p>ウィジェットまたはマイクロサイト内のメインテキストと控えめなテキストの両方のフォントカラーを変更できます。</p><p>• <strong>アクセントカラー</strong></p><p>アクセントの色を変更します。これには、ウィジェットまたはマイクロサイト内のタブやアイコンなどの要素が含まれます。</p><p><img src="/files/7b34ccbc5e7d8aa702b5402714c12a4a5c8f0082" alt="" data-size="original"></p><p>• <strong>追加の色</strong> <img src="/files/6f8314de4650eb50296a22f0905ff81ab67391cc" alt=""></p><p>ウィジェットまたはマイクロサイトの種類に応じて、各要素の色やアクセントをさらに調整できます。</p><p><img src="/files/46ba204c39950fa3a5dda38e3cb1c86f91fad3cc" alt="" data-size="original"></p> |
| プライマリボタン   | <p>プライマリボタンまたはメインボタンの配色を選択します。ボタンの角丸の半径もピクセル単位で調整できます。</p><p><img src="/files/b7b72343476411086eb92818a994ef0dc8c5157f" alt="" data-size="original"></p><p>展開する <img src="/files/6f8314de4650eb50296a22f0905ff81ab67391cc" alt=""> <strong>ホバー状態</strong> セクションを展開すると、ユーザーがボタンにホバーしたり操作したりしたときにボタンが変化する色をさらに選択または変更できます。</p><p><img src="/files/d922a912fa9b6d0754ea27579050f7966fb61f37" alt="" data-size="original"></p>                                                                                                                                                                                                                                |
| セカンダリボタン   | <p>セカンダリボタンの配色を選択します。ボタンの角丸の半径もピクセル単位で調整できます。</p><p><img src="/files/8db39b721eb2b6de86ab7a4c9c94a57e5d90f0a1" alt="" data-size="original"></p><p>展開する <img src="/files/6f8314de4650eb50296a22f0905ff81ab67391cc" alt=""> <strong>ホバー状態</strong> セクションを展開すると、ユーザーがボタンにホバーしたり操作したりしたときにボタンが変化する色をさらに選択または変更できます。</p><p><img src="/files/04383e575b25ff2557b5309beccfc70ff0c40f67" alt="" data-size="original"></p>                                                                                                                                                                                                                                         |
| 枠線         | <p>ウィジェットまたはマイクロサイト内の表やカードなどのコンポーネントの色と枠線の輪郭を変更します。</p><p>• <strong>色</strong></p><p>枠線の色を選択します。</p><p>• <strong>太さ</strong></p><p>枠線の太さを決めるために、ピクセル単位を入力してください。</p><p>• <strong>角丸半径</strong></p><p>枠線の角丸半径を決めるために、ピクセル単位を入力してください。</p><p><img src="/files/e48034790b6df6b80beb852915b34c933f8fad4c" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                    |
| フォームフィールド  | <p>ウィジェットまたはマイクロサイト内の各種フォームフィールドに使用する色を選択します。これには、ユーザーが入力するすべての入力フィールドが含まれます。角丸半径のサイズを変更するために、ピクセル単位も入力できます。</p><p><img src="/files/e1e9fde2c28b945e2a6f28bf965db7ab55919d88" alt="" data-size="original"></p><p>展開する <img src="/files/6f8314de4650eb50296a22f0905ff81ab67391cc" alt=""> <strong>詳細オプション</strong> セクションを展開すると、フォームフィールドの選択時状態やホバー状態の色をさらにカスタマイズできます。</p><p><img src="/files/d66075ef31a8c2deb45813d69178572aca808f8f" alt="" data-size="original"></p>                                                                                                                                                                                    |
| ウィジェットサイズ  | <p>テンプレート内のウィジェットのサイズを変更します。埋め込みウィジェットとポップアップウィジェットの両方のサイズを調整できます。最小サイズと最大サイズを選択し、ドロップダウンで単位を選びます。測定方法はピクセル単位またはパーセンテージで設定できます。</p><p><img src="/files/7bff4b224f8fd39262d20d083bed47733b600773" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                                         |

</details>


---

# 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/customize-widgets-and-microsites-with-the-content-editor.md?ask=<question>&goal=<endgoal>
```

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