# マイクロサイトエディターの概要

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

この記事ではエディタのインターフェースを説明し、レイアウト、ページ、コンポーネントなど、マイクロサイトの構造に関する一般的な情報を提供します。詳細は [マイクロサイトの設定](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite) および [ブランディングとコンテンツのカスタマイズ](https://help.impact.com/brand/ja/nitsuitebitaidesuka/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] → コンテンツ**.
2. の *マイクロサイト* カードで、次を選択します **コンテンツを編集**.

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

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

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

* を選択 **レイヤー** ページやレイアウト上のすべてのコンポーネントの詳細ビューを表示するには
* を選択 **テンプレート** マイクロサイトのページ用に利用可能なテンプレートを表示するには
* 選択したページ、レイアウト、ウィジェット、またはメールに基づいてコンテキスト依存の第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%2Fgit-blob-3de3488148e89adc893ddbf2940d67dedea36a75%2F6564954dd5c2ac36c28fe92e6602750c13ebe01d18f84f6781593d1ec66448f5.jpg?alt=media" alt="" width="122"><figcaption></figcaption></figure></div>

{% endtab %}

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

ブランディングレベルでさらにスタイリングを行うには、マイクロサイトスタイルオプションを選択してください。次を参照してください [コンテンツエディタでウィジェットとマイクロサイトをカスタマイズする](https://help.impact.com/brand/ja/nitsuitebitaidesuka/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;">**認証済み（Verified）**</mark>：ログイン済み参加者のみ。
* <mark style="color:$danger;">**未認証（Unverified）**</mark>：メールアドレスを確認していないログイン済み参加者。
* **公開（Public）**：誰でも閲覧可能。

自動設定を使用してマイクロサイトを作成した場合、サイトには次のレイアウトを継承するいくつかのページが標準で含まれます。 *ログイン後レイアウト* および *ログイン後レイアウト*.

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

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

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

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

</details>

<details>

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

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

コンポーネントはコンポーネントメニュー内でグループ化されています。参照してください [ウィジェットとマイクロサイトのコンポーネントの説明](https://help.impact.com/brand/ja/nitsuitebitaidesuka/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>