# Advocate用にウィジェットまたはマイクロサイトのHTMLとCSSを編集する

追加のHTMLおよびCSSを使用して、Advocateウィジェットやマイクロサイトをカスタマイズし、ブランドの外観により合わせることができます。Advocate内蔵のHTMLエディタを使用すると、構造やスタイルを追加したり、特定のデフォルトコンポーネントを上書きしてより深いカスタマイズを行うことも可能です。

{% hint style="info" %}
**注意**： カスタムHTML/CSS編集は特定のAdvocateエディションでのみ利用可能です。アップグレードについては [サポート](mailto:saasquatch-support@impact.com) にお問い合わせください。この機能にアクセスできるようにアカウントをアップグレードできます。
{% endhint %}

#### なぜカスタムHTMLやCSSを使うのか？

カスタムHTMLとインラインCSSを使うと、次のことができます：

* 自社のブランドガイドラインにより近づける
* レイアウトや間隔を再フォーマットする
* デフォルトエディタで利用できるものを超えるスタイルを適用する
* 特定のウィジェットまたはマイクロサイトコンポーネントのスタイリングを上書きする

{% hint style="warning" %}
**重要**： カスタムコードによって生じた問題に関して、当社のサポートチームは支援を限定的に提供します。確信がない場合は、Advocateの導入チームまたはポストローンチチームと連携することをお勧めします。
{% endhint %}

#### HTMLまたはCSSを編集する

{% tabs %}
{% tab title="マイクロサイトを編集する" %}
内蔵のHTMLエディタを使用して、マイクロサイトのさらなるカスタマイズのためにHTMLやCSSを編集できます。HTMLエディタはマイクロサイトデザインに追加の柔軟性を提供しますが、カスタムHTMLやCSSで行った調整については当社でトラブルシューティングできないことにご注意ください。

1. 左側のナビゲーションメニューで、 ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → Content**.
2. マイクロサイトカードで、 **コンテンツを編集**.
3. マイクロサイトタブで、コードを編集したいレイアウトまたはページを選択します。
4. を選択します ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3364b389815e6386c73528dda541e583d2fe0c16%2F0eceeaaa32f185a9932075cd699744ed6b755396902ea2e4cabff73869cb9f6f.svg?alt=media)![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6104f36947b882897acb25b42d057dee1ebd572a%2F80d3875a58861553d70eb3df7d72c3e6820128c3d4212b3bb623e44832b6ee2c.svg?alt=media) **\[コード表示]** トップメニューバーで。
5. 必要に応じてHTMLおよびCSSを追加または変更します。
6. CSSは次の3つの方法で追加できます：

   * 外部CSSスタイルシートをインポートすることによって
   * ページの上部の `<style>` タグ：

   ```programlisting
   <style>
     p {
       color: blue;
     }

     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }

     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 
   ```

   * 特定のHTML要素にスタイルを適用するためにインラインで：

   ```programlisting
   <h3 style="font-size:30px;color:blue;">友人が私たちの製品を利用したときに報酬を獲得する</h3> 
   ```
7. を選択します ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-1782d05738c13ec58eb6efb9c77d0c3e5ac96f02%2F309574593b8707c978ca25cd69a36a5a0faa4589103874c5ddc1dd96307e696e.svg?alt=media) **\[ペイントブラシ]** を選択して更新内容をプレビューします。
8. を選択します **下書きを保存** を選択して保存、または **公開** を選択して変更を反映（ライブ化）します。
   {% endtab %}

{% tab title="ウィジェットを編集する" %}
内蔵のHTMLエディタを使用して、ウィジェットのさらなるカスタマイズのためにHTMLやCSSを編集できます。HTMLエディタはウィジェットデザインに追加の柔軟性を提供しますが、カスタムHTMLやCSSで行った調整については当社でトラブルシューティングできないことにご注意ください。

1. 左側のナビゲーションメニューで、 ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → Content**.
2. の *ウィジェット* カードで、 **ウィジェットを編集**.
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-a43ec359ba16080d17bc57dc7faaa602268158cf%2Fdfb3191356adad2577e4a1e24b0646a647f8e08aa012feb467a38841a9b5a788.png?alt=media" alt=""><figcaption></figcaption></figure></div>

1. トップメニューバーで、 ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3364b389815e6386c73528dda541e583d2fe0c16%2F0eceeaaa32f185a9932075cd699744ed6b755396902ea2e4cabff73869cb9f6f.svg?alt=media)![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6104f36947b882897acb25b42d057dee1ebd572a%2F80d3875a58861553d70eb3df7d72c3e6820128c3d4212b3bb623e44832b6ee2c.svg?alt=media) **\[角括弧]**.
2. ページ本文にHTMLを追加または編集します。
3. CSSは次の3つの方法で追加できます：

   * 外部CSSスタイルシートをインポートすることによって
   * ページの上部の `<style>` タグ：

   ```programlisting
   <style>
     p {
       color: blue;
     }

     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }

     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 
   ```

   * 特定のHTML要素にスタイルを適用するためにインラインで：

   ```programlisting
   <h3 style="font-size:30px;color:blue;">友人が私たちの製品を利用したときに報酬を獲得する</h3> 
   ```
4. を選択します ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-1782d05738c13ec58eb6efb9c77d0c3e5ac96f02%2F309574593b8707c978ca25cd69a36a5a0faa4589103874c5ddc1dd96307e696e.svg?alt=media) **\[ペイントブラシ]** を選択して更新内容をプレビューします。
5. を選択します **下書きを保存** を選択して保存、または **公開** を選択して変更を反映（ライブ化）します。
   {% endtab %}
   {% endtabs %}

#### **CSSパーツを使用してコンポーネントを編集する**

ウィジェットやマイクロサイトの一部の組み込みコンポーネントは、ビジュアルエディタだけでは完全にスタイル設定できない場合があります。特定の場合には、より細かい制御を可能にするCSSパーツを使用して外観を上書きできます。

高度なスタイル更新を行いたい場合、impact.comチームは可能なことを助言し、関連するCSSパーツセレクタを共有できます。CSSパーツでコンポーネントを編集することに興味がある場合は、Advocateの導入チームまたはポストローンチサポートチームにお問い合わせください。