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

マイクロサイトエディタでは、レイアウト、ページ、コンテンツ、フォントや色などのブランディング要素をカスタマイズすることで、アドボケートプログラムの参加者が目にする内容を制御できます。

この記事では、エディタのインターフェースを説明し、レイアウト、ページ、コンポーネントを含むマイクロサイトの構造に関する一般情報を提供します。詳細は [マイクロサイトの設定](https://help.impact.com/brand/ja/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite) および [ブランディングとコンテンツのカスタマイズ](https://help.impact.com/brand/ja/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages) （レイアウトとページの）について参照してください。

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

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］→Content**.
2. の *Microsite* カードで、次を選択します **コンテンツを編集**.

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

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

<div data-with-frame="true"><figure><img src="https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6147ebf2ae47ca4606bdd34277af56999a671280%2Fc61b460557871deb1aecbb27a3518982408cf45b72156fca43f3e46dbc54f913.png?alt=media" alt=""><figcaption></figcaption></figure></div>

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

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

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

  <div data-with-frame="true"><figure><img src="https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3de3488148e89adc893ddbf2940d67dedea36a75%2F6564954dd5c2ac36c28fe92e6602750c13ebe01d18f84f6781593d1ec66448f5.jpg?alt=media" alt="" width="122"><figcaption></figcaption></figure></div>

{% endtab %}

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

ブランディングレベルでさらにスタイリングを行うには、Microsite Styleオプションを選択します。次を参照してください： [コンテンツエディタでウィジェットとマイクロサイトをカスタマイズする](https://help.impact.com/brand/ja/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor) 利用可能なスタイリングオプションの詳細については。
{% endtab %}

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

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

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

<details>

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

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

レイアウトとページは継承構造でリンクされています。ページとレイアウトの両方がレイアウトを継承することができます。継承されたレイアウトを持つページやレイアウトは、継承先のレイアウトのコンテンツでラップされます。

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

自動セットアップでマイクロサイトを作成した場合、サイトにはデフォルトで3つのレイアウトがあります。

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

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

次の両方が *ログイン後レイアウト* および *ログアウト時レイアウト* が継承しています： *ベースレイアウト*.

<div data-with-frame="true"><figure><img src="https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2F3NHdmPGgjMudnsCGd1Yy%2Fimage.png?alt=media&#x26;token=54feac69-8c46-48be-9f14-32209f3c2539" alt="" width="312"><figcaption></figcaption></figure></div>

**ログイン後レイアウト**

は、ログインしているすべての参加者がどのページにいても目にするコンポーネントを追加できる場所です。たとえば、マイクロサイトのサイドバーナビゲーションメニューはレイアウト内のコンポーネントとして作成されます。レイアウトに追加されているため、そのレイアウトを継承する任意のページにはそのサイドバーが含まれます。 *ログイン後レイアウト* （上記の説明文と併せて使用される文）

<div data-with-frame="true"><figure><img src="https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FRFRn1J9JxD4iYpmKIAv0%2Flogged-in-layout.jpg?alt=media&#x26;token=4815b054-264d-46e5-bcc8-88ed3ea5a624" alt="" width="310"><figcaption></figcaption></figure></div>

**ログアウト時レイアウト**

は、ログインしているすべての参加者がどのページにいても目にするコンポーネントを追加できる場所です。たとえば、マイクロサイトのサイドバーナビゲーションメニューはレイアウト内のコンポーネントとして作成されます。レイアウトに追加されているため、そのレイアウトを継承する任意のページにはそのサイドバーが含まれます。 *ログアウト時レイアウト* は、現在認証されていない参加者が見る内容をカスタマイズする場所です。

<div data-with-frame="true"><figure><img src="https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fzmg9mkIeow7cpu0katqi%2Flogged-out-layout.jpg?alt=media&#x26;token=9bbd561b-237e-43f1-833b-d1076bf9e857" alt="" width="291"><figcaption></figcaption></figure></div>

</details>

<details>

<summary>ページ</summary>

ページは、プログラムの説明、リファラルや共有情報、テキスト/画像など、サイトのコンテンツを構築する場所です。レイアウトの中の個別のページを選択して、そのコンテンツを開いて編集します。

<div data-with-frame="true"><figure><img src="https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-0a6c026b6fbf6429ea9a8ff3ee2db4f6acfc84fd%2F87f7c50502733db94119262cc22612ef67923c5fc190d8c29938be0f4fd5a34f.jpg?alt=media" alt="" width="318"><figcaption></figcaption></figure></div>

表示設定はページレベルでも設定でき、次のオプションのいずれかにアクセス制限を設定できます：

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

自動セットアップでマイクロサイトを作成した場合、サイトには次のを継承するいくつかのページが用意されています： *ログイン後レイアウト* および *ログイン後レイアウト*.

**ログイン後レイアウトのページ：**

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

**ログアウト時レイアウトのページ：**

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

</details>

<details>

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

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

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

<div data-with-frame="true"><figure><img src="https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-75004e7777739ce86600fd0a716eedbd7aa6c52d%2Ff413cd8a60e0c449e8d8a0e0ea0821173134ae92203976190fe299ac2ac079c6.jpg?alt=media" alt="" width="229"><figcaption></figcaption></figure></div>

</details>
