> 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. **\[任意]** 残りのスタイルオプションを順に設定して、ウィジェットまたはマイクロサイト内でブランドアイデンティティを完全にカスタマイズします。

スタイルエディター要素の参照

| スタイル要素 | 説明 | | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | メインブランドカラー |

この色はウィジェットまたはマイクロサイト内のさまざまな要素に使用されるため、この手順を完了することが重要です。メインブランドカラーを選択してください。

この色は、編集オプションの下部にある「プライマリボタン」および「セカンダリボタン」セクションでも使用されます。

| | フォント |

ウィジェットまたはマイクロサイト内で使用したいフォントスタイルを選択します。

| | 色 |

ウィジェットまたはマイクロサイト内で使用したいさまざまな色とアクセントを選択します：

・背景

ウィジェットまたはマイクロサイトの背景にしたい色を選択します。

・ テキスト

ウィジェットまたはマイクロサイト内の主要テキストと控えめなテキストの両方のフォント色を変更できます。

・ アクセントカラー

アクセントの色を変更します。これには、ウィジェットまたはマイクロサイト内のタブやアイコンなどの要素が含まれます。

・ 追加の色

ウィジェットまたはマイクロサイトの種類に応じて、各要素の色やアクセントをさらに調整できます。

| | プライマリボタン |

プライマリまたはメインボタンに使用したい配色を選択します。また、ボタン周囲の角丸の半径をピクセル単位で調整できます。

を展開 ホバー時の状態 セクションを展開して、ユーザーがボタンにホバーまたは操作したときにボタンが変化する色をさらに選択または変更します。

| | セカンダリボタン |

セカンダリボタンに使用したい配色を選択します。また、ボタン周囲の角丸の半径をピクセル単位で調整できます。

| | 枠線 |

ウィジェットまたはマイクロサイト内の表やカードなどのコンポーネントの色と枠線を変更します。

・色

枠線の色を選択します。

・太さ

枠線の太さを決めるために、ピクセル単位の値を入力します。

・角丸

枠線の角の丸みを決めるために、ピクセル単位の値を入力します。

| | フォームフィールド |

ウィジェットまたはマイクロサイト内のさまざまなフォームフィールドに使用したい色を選択します。これには、ユーザーが入力するすべての入力フィールドが含まれます。角丸の半径サイズを変更するために、ピクセル単位の値を入力することもできます。

を展開 詳細オプション セクションを展開して、フォームフィールドの選択時またはホバー時の色をさらにカスタマイズします。

| | ウィジェットサイズ |

テンプレート内のウィジェットのサイズを変更します。埋め込みウィジェットとポップアップウィジェットの両方のサイズを調整できます。最小サイズと最大サイズを選択し、ドロップダウンオプションから単位の種類を選びます。測定単位はピクセルまたはパーセンテージで設定できます。

--- # 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=&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.