WebエクスペリエンスでのCSSの使用
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Webエクスペリエンス でカスケード スタイル シート (CSS) を使用して、組織の色、フォント、レイアウト、およびブランドを エクスペリエンスに適用できます。
また、バリアント内のCSSを編集して、動的データを実行して1対1のパーソナライゼーションを容易にする エクスペリエンス を作成することもできます。これを行うには、バリアントの実行時にデータがサーバーからリクエストされ、バリアントに渡されるように、動的データを含むようにAPIレスポンスを設定する必要があります 。
WebエクスペリエンスでCSSを使用するには:
-
Experienceタイルで、設定するバリアントの横にあるEditアイコンをクリックします。
-
コード エディターのCSSタブで、Webエクスペリエンスのレイアウトの書式設定に使用する任意のCSSを入力します。
-
動的データをCSSに挿入するには、DataタブのData Selector検索ボックスに、ゲストのメール アドレスまたはその他の識別子を入力して検索します。これにより、データ・モデルの属性とパスにアクセスできます。
先端コードの設定やテスト時に頻繁に使用するデータを持つゲストがいる場合は、星のアイコンをクリックしてゲストをブックマークすると、そのゲストを検索する必要がなくなります。
-
動的ゲスト データを含めるには、Guest data modelツリーの下にある
をクリックし、Copy Path as Handlebarsをクリックします。 -
意思決定モデルの応答から動的データを含めるには、Decision Model Responseツリーを展開し、「
」をクリックして「 Copy Path as Handlebars」をクリックします。 -
エクスペリエンスレスポンスの動的データを含めるには、Experience Responseツリーを展開し、「
」をクリックして、「 Copy Path as Handlebars」をクリックします。 -
CSSタブで、データを貼り付け、プレフィックスとしてcontextを付けます。たとえば、{{decisionOffers.0.attributes.PromoText}} のデータをCSSに含めるには、{{context.decisionOffers.0.attributes.PromoText}}として参照する必要があります。
-
「 Save」をクリックします。
-
をクリックして、コード エディターを閉じます。
すぐに使用できるWebテンプレートを使用する場合、またはそのようなテンプレートからJavaScriptをコピーした場合は、contextオブジェクト内のAPI応答から属性を参照する必要があります。たとえば、APIレスポンスのimageURLをCSSに含めるには、次のように参照します。