# マイクロサイトエディターの解説

マイクロサイトエディターを使うと、レイアウト、ページ、コンテンツ、フォントや色などのブランディング要素をカスタマイズして、Advocate プログラムの参加者に表示される内容を制御できます。

このヘルプ記事では、エディターのインターフェースについて説明し、レイアウト、ページ、コンポーネントを含むマイクロサイトの構成に関する一般情報を提供します。詳細はこちらをご覧ください [マイクロサイトの設定](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite.md) と [ブランディングとコンテンツのカスタマイズ](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages.md) そのレイアウトとページの。

#### マイクロサイトエディターを開く

1. 左側のナビゲーションメニューから、 ![](/files/7ddd72d8e69e7055d9408cf4847c5c54abf9f71d) **\[Engage] → Content**.
2. で、 *マイクロサイト* カードで、選択します **コンテンツを編集**.

#### エディターのインターフェース

マイクロサイトエディターは、上部メニューバー、編集キャンバス、マイクロサイトのスライドアウト、およびコンポーネントメニューで構成されています。

<div data-with-frame="true"><figure><img src="/files/ca98ebba30b67b7c4d5e9b92039aef2279c22b34" alt=""><figcaption></figcaption></figure></div>

{% tabs %}
{% tab title="上部メニューバー" %}
ページ上部のメニューバーでは、操作の取り消し、HTMLコードの表示、完成したマイクロサイトのプレビューを行えます。デスクトップ、タブレット、モバイルの各アイコンを使うと、画面サイズの異なるデバイスでマイクロサイトがどのように表示されるかを確認できます。
{% endtab %}

{% tab title="キャンバス" %}
キャンバスには、マイクロサイトの現在のコンテンツが表示されます。個々のコンポーネントを選択して編集したり、新しいコンポーネントを追加して、参加者にどのように表示されるかをひと目で確認できます。これらのコンポーネントは、マイクロサイトのスライドアウトセクション内の左側に一覧表示されます。

* を選択します **レイヤー** ページまたはレイアウト上のすべてのコンポーネントを詳細表示するには
* を選択します **Templates** マイクロサイトのページで利用可能なテンプレートを表示するには。
* 選択したページ、レイアウト、ウィジェット、またはメールに応じて、コンテキスト依存の第3のメニューが表示されます

  <div data-with-frame="true"><figure><img src="/files/01d2ecb769dc6dca78f598a589eb3e413d418369" alt="" width="122"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="マイクロサイトのスライドアウト" %}
マイクロサイトのスライドアウトは、キャンバス左側にある折りたたみ可能なパネルです。レイアウトとページの継承構造をツリーとして視覚化します。個々のレイアウトまたはページを選択してコンテンツを表示し、調整できます。ここではページやレイアウトを追加することもできます。

ブランディングのレベルでさらにスタイルを調整するには、Microsite Style オプションを選択します。 [Content Editor でウィジェットとマイクロサイトをカスタマイズする](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor.md) 利用可能なスタイル設定オプションの詳細については、こちらをご覧ください。
{% endtab %}

{% tab title="コンポーネントメニュー" %}
コンポーネントメニューは、キャンバス右側のパネルです。 *追加* タブを使って新しいコンポーネントをキャンバスに挿入し、 *編集* タブを使って既存の内容を調整します。
{% endtab %}
{% endtabs %}

#### マイクロサイトの構造

マイクロサイトをカスタマイズする際に理解しておくべき重要な構成要素がいくつかあります。レイアウト、ページ、コンポーネントです。

<details>

<summary>レイアウト</summary>

レイアウトは、マイクロサイトの「フレーム」として機能します。ヘッダーやバナー画像のように、マイクロサイト全体に表示したいコンポーネントを配置する場所です。

レイアウトとページは、継承構造を通じてリンクされています。ページとレイアウトのどちらもレイアウトを継承できます。継承したレイアウトを持つページやレイアウトでは、そのコンテンツが継承元レイアウトのコンテンツで囲まれます。

{% hint style="info" %}
**例:** ベースレイアウトにヘッダー画像が含まれている場合、ベースレイアウトを継承するすべてのページに、同じ場所に同じヘッダー画像が表示されます。
{% endhint %}

自動セットアップを使ってマイクロサイトを作成した場合、サイトには標準で3つのレイアウトがあります。

**ベースレイアウト**

ベースレイアウトは、参加者がどのページにいるかや、サイトに認証済みかどうかに関係なく表示したいコンテンツを配置する場所です。サイト全体に表示したいヘッダーやフッターを追加できます。ベースレイアウトには、サイト全体の色とフォントを管理するブランドコンテナも含まれています。

両方の *ログイン済みレイアウト* と *ログアウト時レイアウト* が継承します *ベースレイアウト*.

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

**ログイン済みレイアウト**

その *ログイン済みレイアウト* は、ログインしている参加者全員が、どのページにいても表示されるコンポーネントを追加する場所です。たとえば、マイクロサイトのサイドバーナビゲーションメニューは、このレイアウト内のコンポーネントによって作成されます。レイアウトに追加されているため、そのレイアウトを継承するすべてのページにこのサイドバーが含まれます。

<div data-with-frame="true"><figure><img src="/files/357d01e852bf574b68c23b43f6ff7f548962fd82" alt="" width="310"><figcaption></figcaption></figure></div>

**ログアウト済みレイアウト**

その *ログアウト時レイアウト* は、現在認証されていない参加者に何が表示されるかをカスタマイズする場所です。

<div data-with-frame="true"><figure><img src="/files/f225494f36c4ca3cb8690736428e66908dbea4d2" alt="" width="291"><figcaption></figcaption></figure></div>

</details>

<details>

<summary>ページ</summary>

ページは、プログラムの説明、紹介および共有に関する情報、テキスト/画像など、サイトのコンテンツを作成する場所です。レイアウト内の個々のページを選択すると、そのコンテンツを開いて編集できます。

<div data-with-frame="true"><figure><img src="/files/9e20d6692471082af3bee5628e1793a16f1b1c0a" alt="" width="318"><figcaption></figcaption></figure></div>

表示設定はページ単位でも設定でき、ページへのアクセスを次のいずれかに制限できます:

* <mark style="color:$success;">**確認済み**</mark>: ログイン済みの参加者のみ。
* <mark style="color:$danger;">**未検証**</mark>: メールアドレスを確認していないログイン済みの参加者。
* **公開**: 誰でも閲覧可能。

自動セットアップを使ってマイクロサイトを作成した場合、サイトには以下を継承する複数のページが含まれています *ログイン済みレイアウト* と *ログイン済みレイアウト*.

**ログイン済みレイアウトのページ:**

* アクティビティ
* ダッシュボード
* プロフィールを編集
* リード送信
* 税金と現金

**ログアウト済みレイアウトのページ:**

* メール認証
* パスワードを忘れた場合
* ログイン
* ログアウト
* ページが見つかりません
* 登録
* パスワードをリセット
* メールを確認

</details>

<details>

<summary>コンポーネント</summary>

コンポーネントは、参加者のマイクロサイト体験をさらにパーソナライズするためにページやレイアウトに追加できる個別要素です。たとえば、ヒーロー画像や紹介フィードなどです。

コンポーネントはコンポーネントメニュー内でグループ化されています。 [ウィジェットとマイクロサイトのコンポーネントの説明](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences.md) コンポーネントのグループ分けと個々のコンポーネントの完全な一覧については、こちらを参照してください。

<div data-with-frame="true"><figure><img src="/files/5d925d8969c7fa46363ab32ed2b6550bdfd98d0f" alt="" width="229"><figcaption></figcaption></figure></div>

</details>


---

# 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/microsite-experiences/microsite-editor-explained.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.