# プログラムウィジェットをカスタマイズする

#### ウィジェットエディターにアクセスする

1. 左側のナビゲーションメニューから、 ![](/files/7ddd72d8e69e7055d9408cf4847c5c54abf9f71d) **\[Engage] → Content**.
2. で、 *Widgets* カードを選択して、 **ウィジェットを編集する。**
3. 左側のスライドアウトメニューから、編集したいウィジェットの名前を選択します。

   <div data-with-frame="true"><figure><img src="/files/082b53be34223301b0efe56ac8e3ddaea2383c44" alt="" width="347"><figcaption></figcaption></figure></div>

#### ウィジェットをカスタマイズする

{% stepper %}
{% step %}
**ステップ 1: テンプレートを選択する**

1. 左側のスライドアウトメニューで、 *Current Widget*の下にある **Templates**.
2. を選択します **テンプレートを適用** して、開始したいテンプレートの横にあるものを選択します。

   <div data-with-frame="true"><figure><img src="/files/2d548e40db573fa9f19170c373238e98a0189f21" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="success" %}
**注:** 変更を確定せずにテンプレートの見た目を確認したい場合は、保存前に ![](/files/3424e56c9f78203a6405370d17bb4e345a0f5f57) **\[Preview]** を選択してください。変更を確定する準備ができたら、 **Save** ボタンのみを選択してください。
{% endhint %}
{% endstep %}

{% step %}
**ステップ 2: ウィジェットのコンテンツを調整する**

コンポーネントを追加、編集、移動、または削除して、ウィジェット内で顧客アドボケイトに表示される内容を変更できます。

{% hint style="success" %}
**注:** ウィジェットエディターの各要素の説明については、 [ウィジェットエディターの概要](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview.md).
{% endhint %}

{% tabs %}
{% tab title="追加" %}

1. ページ右側の *Component* メニューの **追加** タブで、コンポーネントグループを選択します。
   * について詳しくは、 [利用可能なコンポーネント](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md) と、それらがどのようにグループ化されているかをご覧ください。
2. 適切なコンポーネントを選択します。
3. 青い **Add to** ボタンを、キャンバス上でコンポーネントを表示したい場所で選択します。

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

{% endtab %}

{% tab title="編集" %}
編集できるプロパティは、選択したコンポーネントの種類によって異なります。たとえば、 *Hero Image* コンポーネントを選択すると、新しい画像を選択して背景色を変更できます。見出しのようなテキストのみの要素を選択した場合は、フォント、テキスト色、テキスト内容を変更できます。

1. 編集したいコンポーネントを選択します。
2. プロパティを変更するには、 *Component* メニューの **編集** タブのオプションを使用します。

   * テキストコンポーネントにリンクを挿入したい場合は、 [ウィジェットのHTMLを編集して行えます](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/edit-your-widget-or-microsite-html-and-css-for-advocate.md).

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

{% endtab %}

{% tab title="移動" %}

1. キャンバス上で、移動したいコンポーネントを選択します。
2. を選択します ![](/files/6e3b561a11f46c93d04a21bf903a8b2f41195d90) **\[Move]**.
   * 一部のコンポーネントは移動できません。 ![](/files/6e3b561a11f46c93d04a21bf903a8b2f41195d90) **\[Move]** オプションは、そのコンポーネントを移動できる別の有効な場所がキャンバス上にある場合にのみ表示されます。
3. 青い **移動先** ボタンを、コンポーネントを移動したい場所で選択します。

   * ドラッグ＆ドロップの代わりに、ボタンを選択してから移動先を選ぶ必要があります。

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

{% endtab %}

{% tab title="削除" %}

1. キャンバス上で、削除したいコンポーネントを選択します。
2. を選択します ![](/files/d532d03631ab792748e7ee46e4497981451d14d0) **\[Remove]**.

   <div data-with-frame="true"><figure><img src="/files/46b7b8523efaf0d67df929987c4557d84b541143" alt="" width="507"><figcaption></figcaption></figure></div>

{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}
**ステップ 3: ウィジェットの外観とテーマをカスタマイズする**

**画像またはロゴを追加する**

1. 右側の *Component* メニューの **追加** タブから、 **Common Components** カテゴリを選択します。
2. 次のいずれかを選択します:
   * **Overlay Hero Image** （編集可能なテキストが重ねられた画像）
   * **Image** （上にテキストのない通常の画像）
3. 画像をキャンバスに追加します。
4. から、 *Component Menu の* **編集** タブから、 **Choose File** ボタンを、 *Image* 見出しの下で選択します。

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

**画像またはロゴを置き換える**

1. キャンバス内で、変更したい写真を選択します。
2. で、 **編集** メニューから、 ![](/files/3bd40d6a05bc93db8771fd9f3fa91901dad25746) **\[Remove]** を選択し、その後 **Choose File** を選択して新しい画像を再アップロードします。

   <div data-with-frame="true"><figure><img src="/files/3d31d4ffccac1b6a905924c2a77182db357f2536" alt="" width="299"><figcaption></figcaption></figure></div>
3. 次のいずれかの方法で画像をアップロードします:
   * 画像をドラッグ＆ドロップする
   * コンピューター上のファイルを参照する
   * で、 *Web Address* タブで、ファイルの公開URLを貼り付けます
4. を選択します **完了**.

**表示する共有ボタンを調整する**

既存の共有ボタンは **編集** メニューを使用して編集できます。

1. キャンバス上で、編集したい共有ボタンを選択します。
2. で、 **編集** タブで、 *Share medium* 見出しの下で選択します。

   <div data-with-frame="true"><figure><img src="/files/2a2772ffe341cff8cfc54fecd8eb7f00794414d3" alt="" width="296"><figcaption></figcaption></figure></div>

を使用して新しい共有ボタンを追加します。 **追加** メニューを使用して編集できます。

1. から、 **追加** タブで、 **Sharing**.

   <div data-with-frame="true"><figure><img src="/files/c16d239b1a2143422a802387ee333185e4176994" alt="" width="283"><figcaption></figcaption></figure></div>
2. 適切なカードを選択します。
3. 青い **Add to** ボタンを選択して、コンポーネントをキャンバスに配置します。
   {% endstep %}

{% step %}
**ステップ 4: プレビューして保存する**

1. 上部メニューバーから ![](/files/3424e56c9f78203a6405370d17bb4e345a0f5f57) **\[Preview]** を選択して、参加者に表示されるウィジェットの見え方をプレビューします。
   * 次のプレビューを切り替えられます: ![](/files/562c0f6077b61db4a239763b34f3d4808cfa4b36) **\[Desktop]**, ![](/files/bcac58b1df72a1d66eb501c6dfe28190c01dbf02) **\[Tablet]**、または ![](/files/296ec8ad5c4f5aef8e11c020dc01e32148fd614a) **\[Mobile]** それぞれのデバイスアイコンを選択して、ユーザー向けの表示を確認します。
2. 編集画面に戻るには、 ![](/files/20d1a387779aaf484f1decb3846cdda832728b7a) **\[Edit]** を選択して、参加者に表示されるウィジェットの見え方をプレビューします。

   <div data-with-frame="true"><figure><img src="/files/4871bc78da3ff15138c1c03ea5f169cb86a0417f" alt="" width="563"><figcaption></figcaption></figure></div>
3. **Save** 変更を選択します。

   <div data-gb-custom-block data-tag="hint" data-style="warning" class="hint hint-warning"><p><strong>警告:</strong> ウィジェットエディターは変更を自動保存しません。作業内容を失わないように、 <strong>Save</strong> をこまめにクリックしてください。</p></div>

を選択すると、変更は **Save**program draft [に追加されます](/brand/ja/nitsuitebitaidesuka/advocate-program/getting-started-with-advocate/create-and-publish-a-program-draft-for-advocate.md).
{% endstep %}
{% endstepper %}

#### 高度なカスタマイズオプション

高度なコンポーネントを使用すると、参加者の *メール*, *セグメント*、または *カスタムフィールド*に基づく条件付きコンテンツを含めることができます。たとえば、ゴールド会員の参加者にだけリーダーボードを表示したい場合、 **conditional section on segment** コンポーネントを使えば実現できます。

高度なコンポーネントは **追加** タブから追加できます。設定には、条件が満たされるときのロジックを定義する [JSONata 式](http://docs.jsonata.org/overview.html) を *Condition* ボックスに入力する必要があるため、少し追加作業が必要です。必要な場合は、 [サポートチーム](mailto:saasquatch-support@impact.com) までお問い合わせください。

#### 詳細はこちら

* [アドボケイト用のウィジェットまたはマイクロサイトのHTMLを編集する](#access-the-widget-editor-0-0)
* [アドボケイト用のカスタムNPMパッケージをインストールする](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/install-custom-npm-packages-for-advocate.md)


---

# 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/widget-experiences/customize-program-widgets.md?ask=<question>
```

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.