> 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). # コンテンツエディターでウィジェットとマイクロサイトをカスタマイズするコンテンツエディターを使えば、ブランドのアイデンティティにシームレスに合致するウィジェットやマイクロサイトを作成でき、顧客に一貫性があり信頼できる体験を提供できます。ブランドが適切に反映された接点は、高いエンゲージメントとプログラムの採用を促進するうえで重要です。 {% embed url="" %} ## 集中管理されたブランディング設定ウィジェットまたはマイクロサイトのスタイルオプションを使えば、ブランドのコアなデザイン要素を簡単に見つけて更新できます。すべてのブランディング設定は専用のブランディングセクションにあります。ウィジェットやマイクロサイトは、ユーザーの状況によって表示が異なります。たとえば、ログインしているか、エラーに遭遇しているか、モバイル端末で表示しているかなどです。エディターのプレビューでは、ウィジェットやマイクロサイトのあり得るすべての状態を簡単に切り替えて確認できます。 {% hint style="success" %} **注**: プレビューは、ウィジェット（例: 即時アクセスウィジェット）およびコンポーネント（例: 現金、報酬交換）により適しています。マイクロサイトをプレビューするには、異なるマイクロサイトのページに移動して状態を確認する必要があります。 {% endhint %} これにより、コンポーネントの見た目を確認するために手動で操作を完了する必要がなくなります。ユーザージャーニーの各ステップについて、テキストとデザインを自信を持って編集できるようになりました。以下を含みます。 * ログイン済み表示とログアウト済み表示 * エラーおよび成功メッセージ * 複数ステップのフローにおける異なるステップ（現金支払いの検証など）ブランディングスタイルをカスタマイズするには： 1. 左側のナビゲーションメニューで、 ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[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 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/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 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.