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

Advocate のウィジェットやマイクロサイトは、追加の HTML と CSS でカスタマイズし、ブランドの見た目や雰囲気により近づけることができます。Advocate に組み込みの HTML エディターを使えば、構造やスタイルを追加したり、さらに高度なカスタマイズのために一部の既定コンポーネントを上書きしたりすることもできます。

注：カスタム HTML/CSS の編集は、特定の Advocate エディションでのみ利用できます。お問い合わせください サポート アカウントをアップグレードしてこの機能を利用できるようにするには。

カスタム HTML や CSS を使う理由は？

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

• 自社のブランドガイドラインにより厳密に合わせる
• レイアウトや余白を再調整する
• 既定のエディターで利用できる範囲を超えたスタイルを適用する
• 特定のウィジェットやマイクロサイトコンポーネントのスタイルを上書きする

重要：サポートチームは、カスタムコードによって生じた問題については限定的なサポートのみ提供します。ご不明な場合は、Advocate の導入チームまたはリリース後のチームと連携することをおすすめします。

HTML または CSS を編集する

マイクロサイトを編集する

組み込みの HTML エディターを使って、HTML または CSS を編集し、マイクロサイトをさらにカスタマイズできます。HTML エディターはマイクロサイトのデザインに柔軟性を追加しますが、カスタム HTML または CSS による変更については、当社ではトラブルシューティングできないことにご注意ください。

1. 左側のナビゲーションメニューで次を選択します [Engage] → コンテンツ.
2. マイクロサイトカードで、次を選択します コンテンツを編集.
3. ［マイクロサイト］タブで、コードを編集したいレイアウトまたはページを選択します。
4. 選択して ［コード表示］ を上部メニューバーで。
5. 必要に応じて HTML と CSS を追加または変更します。
6. CSS は次の 3 つの方法で追加できます：

   • 外部 CSS スタイルシートをインポートする
   • ページ上部の次の場所に <style> タグ：

   <style>
     p {
       color: blue;
     }
   
     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }
   
     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 

   • インラインで、特定の HTML 要素にスタイルを適用するには：

   <h3 style="font-size:30px;color:blue;">友達が当社の製品を使うと特典を受け取れます</h3> 

7. 選択して ［ペイントブラシ］ で更新内容をプレビューします。
8. 選択して 下書きを保存 で保存するか、 公開 で変更を公開します。

ウィジェットを編集する

CSS パーツを使ってコンポーネントを編集する

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

高度なスタイル更新を行いたい場合は、impact.com チームが可能な内容を案内し、関連する CSS パーツセレクターを共有できます。CSS パーツを使ってコンポーネントを編集したい場合は、Advocate の導入チームまたはリリース後サポートチームにお問い合わせください。