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

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

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

この記事では、エディターのインターフェースについて説明し、レイアウト、ページ、コンポーネントを含むマイクロサイトの構成について一般的な情報を提供します。詳しくは、 [マイクロサイトの設定](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite.md) と [ブランディングとコンテンツのカスタマイズ](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages.md) と、そのレイアウトおよびページについて学べます。

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

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

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

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

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

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

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

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

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

{% endtab %}

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

さらにブランド レベルでスタイルを調整するには、マイクロサイト スタイル オプションを選択します。 [コンテンツ エディターでウィジェットとマイクロサイトをカスタマイズする](/brand/ja/what-would-you-like-to-learn-about/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/what-would-you-like-to-learn-about/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
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/microsite-experiences/microsite-editor-explained.md?ask=<question>&goal=<endgoal>
```

`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.