ウェブ体験を作ろう

ウェブ体験でCSSを使う

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

ウェブ体験でカスケーディングスタイルシート(CSS)を使い、組織の色、フォント、レイアウト、ブランディングを体験に適用できます。

また、動的データを実行することで1

、バリアントのCSSを編集することも可能です。これを行うには、API応答に動的データを含めるように設定し、バリアントが実行された際にサーバーからデータを要求し、その後バリアントに渡すようにする必要があります。

ウェブ体験でCSSを使用する方法:

エクスペリエンスタイルで、設定したいバリアントの隣にある編集アイコンをクリックします。
コードエディターのCSSタブで、ウェブ体験のレイアウトをフォーマットするために使いたいCSSを入力してください。
CSSに動的データを挿入するには、データ タブの データセレクタ 検索ボックスで、ゲストのメールアドレスやその他の識別子を入力して検索してください。これにより、データモデルの属性やパスにアクセスできます。

!ヒントコードの設定やテスト時によく使うゲストがいる場合は、スターアイコンをクリックしてゲストをブックマークし、検索しなくて済むようにしましょう。
動的なゲストデータを含めるには、ゲストデータモデル ツリーの下で「」をクリックし、「 Copy Path as Handlebars」をクリックしてください。
意思決定モデル応答からの動的データを含めるには、意思決定モデル応答 ツリーを展開し、「」をクリックして「 パスをハンドルバーとしてコピー」をクリックしてください。
体験応答の動的データを含めるには、体験応答 ツリーを展開し、をクリックして「 Copy Path as Handlebars」をクリックしてください。
CSSタブでデータを貼り付け、接頭辞にcontextを付けます。例えば、CSSの {{decisionOffers.0.attributes.PromoText}} に含まれるデータを含めるには、{{context.decisionOffers.0.attributes.PromoText}}として参照しなければなりません。
「保存」をクリックします。
コードエディタを閉じるにはをクリックしてください。

!注箱出しのウェブテンプレートを使う場合、またはそのテンプレートからJavaScriptをコピーした場合は、contextオブジェクト内でAPI応答の属性を参照しなければなりません。例えば、CSSにAPI応答のimageURLを含めるには、次のように参照してください:

background-image: URL("{{context.imageURL}}")

この記事を改善するための提案がある場合は、お知らせください!