# コンテンツエディターでウィジェットとマイクロサイトをカスタマイズするコンテンツエディターを使えば、ブランドのアイデンティティにシームレスに一致するウィジェットやマイクロサイトを作成でき、一貫性があり信頼感のある顧客体験を提供できます。適切にブランド化された接点は、高いエンゲージメントとプログラムの利用促進に不可欠です。 #### 一元化されたブランド設定ウィジェットまたはマイクロサイトのスタイルオプションを使用すると、ブランドの核となるデザイン要素を簡単に見つけて更新できます。すべてのブランド設定は専用のブランドセクションにあります。ウィジェットやマイクロサイトは、ユーザーがログインしているか、エラーが発生しているか、モバイル端末で閲覧しているかなど、ユーザーの状況によって表示が異なります。エディターのプレビューを使えば、ウィジェットやマイクロサイトのあらゆる状態を簡単に切り替えて確認できます。 {% hint style="info" %} **注**：このプレビューは、ウィジェット（例：インスタントアクセスウィジェット）やコンポーネント（例：現金、報酬交換）により適しています。マイクロサイトをプレビューするには、各マイクロサイトのページに移動して状態を確認する必要があります。 {% endhint %} これにより、コンポーネントの見た目を確認するために手動で操作を完了する必要がなくなります。これからは、以下を含むユーザージャーニーのすべてのステップについて、テキストとデザインを自信を持って編集できます。 * ログイン済み表示とログアウト表示 * エラーメッセージと成功メッセージ * 複数ステップのフロー（現金支払いの確認など）における各ステップブランドスタイルをカスタマイズするには： 1. 左側のナビゲーションメニューで、 ![](/files/7ddd72d8e69e7055d9408cf4847c5c54abf9f71d) **\[Engage] → コンテンツ**. * ウィジェットの場合は、を選択します **ウィジェットを編集** マイクロサイトの場合は、を選択します **コンテンツを編集する**. 2. 左側のメニューで、マイクロサイトまたはウィジェットのどちらを編集するかを選択します。 3. 編集したいページテンプレートを選択し、次にを選択します **ウィジェットのスタイル**/**マイクロサイトのスタイル**. 4. ブランドカラーを選択して、ウィジェットまたはマイクロサイトに表示されるメインカラーを変更します。 5. 次に、使用したいフォントスタイルを選択します。 6. **\[任意]** 残りのスタイルオプションを順に設定して、ウィジェットまたはマイクロサイト内でブランドのアイデンティティを完全にカスタマイズします。

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

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

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

この色は、編集オプションのさらに下にある［主要ボタン］および［副次ボタン］セクションでも使用されます。

| | フォント |

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

| | 色 |

ウィジェットまたはマイクロサイト内に表示したいさまざまな色やアクセントを選択します。

• 背景

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

• テキスト

ウィジェットまたはマイクロサイト内のメインテキストと薄いテキストの両方のフォント色を変更できます。

• アクセントカラー

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

• 追加の色

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

| | 主要ボタン |

主要ボタン、つまりメインボタンに使用したい配色を選択します。また、ボタンの角丸のピクセル値も調整できます。

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

| | 副次ボタン |

副次ボタンに使用したい配色を選択します。また、ボタンの角丸のピクセル値も調整できます。

| | 枠線 |

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

• 色

枠線の色を選択します。

• 太さ

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

• 角丸

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

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

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

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

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

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

--- # Agent Instructions: 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: ``` GET https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.