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