Visual Experience Composer のオプション
Adobe Target Visual Experience Composer （VEC）でページ要素をクリックすると、その要素タイプで使用できるオプションがメニューに表示されます。 さらに、ページの下部に DOM パスが表示されるので、ページ構造を簡単にナビゲートできます。
様々な Visual Experience Composer （VEC）アクションが適切なメニューオプションにグループ化され、ジョブの迅速化と効率化を実現します。
画像オプション
A/B Test アクティビティの画像をクリックすると、VEC は次の図のようになります。
左側のコンポーネント フレームからコンポーネントを選択して、次の要素を挿入します。
- 基本（ディバイダー、HTML、画像）。
- テキスト（見出し、段落、リンク）。
- 動的（ レコメンデーション、 エクスペリエンスフラグメント、HTMLオファー）。
画像上部のメニューでは、次の操作を実行できます。
- リンクを挿入します（
- 画像を変更します（
- パーソナライゼーションを追加（
- 画像を削除します（
右側のフレームを使用すると、画像のプロパティをさらに設定できます。
フレームの上部にあるアイコンを使用すると、次の操作を実行できます。
- HTMLを編集します（
- 画像を複製します（
- 画像を削除します（
- 画像を非表示にします（
右側のフレームのオプションを使用すると、次の操作を実行できます。
- CSS クラスを編集します。
- 画像のプロパティ（ソース、タイトル、代替テキスト）を設定します。
- リンク URL を編集します。
- 画像のサイズ（高さと幅）を設定します。 「Show Advanced Options」をクリックして、画像の最小および最大サイズ、幅、高さ、オーバーフロー、オブジェクトのフィットを設定します。
- ページ上の画像の位置（絶対パス、固定パス、相対パス、静的パス、スティッキーの各パス）を設定します。
- 余白やパディングを含む、要素の間隔を設定します。
- 要素の効果（不透明度）を設定します。 「Show Advanced Options」をクリックして、画像のセピア、グレースケール、コントラスト、明るさ、ブラーの値を設定します。 また、画像を反転または回転させることもできます。
- 画像のインラインスタイルを設定します。
テキストオプション
A/B Test アクティビティでテキストをクリックすると、VEC は次の図のようになります。
左側の Components フレームからコンポーネントを選択して、次の要素を挿入します。
- 基本（ディバイダー、HTML、画像）。
- テキスト（見出し、段落、リンク）。
- 動的（ レコメンデーション、 エクスペリエンスフラグメント、HTMLオファー）。
Show Modifications アイコン（
テキスト要素の上部にあるメニューを使用すると、次の操作を実行できます。
- テキストのプロパティ（見出しレベル、段落、ブロック引用、等幅）を設定する
- テキストのカラーを選択します（
- テキストの属性（太字、斜体、下線、取り消し線）を設定します（
- テキストの整列（左、中央、右、両端揃え）（
- リンクを挿入します（
- コンテンツをHTMLオファー、 エクスペリエンスフラグメントまたは [Recommendation]/help/main/c-recommendations/recommendations-as-an-offer.md）に置き換えます。
- HTMLを編集します（
- パーソナライゼーションを追加（
- 画像を削除します（
右側のフレームを使用すると、テキストのプロパティをさらに設定できます。
フレームの上部にあるアイコンを使用すると、次の操作を実行できます。
- HTMLを編集します（
- テキストを複製します（
- テキストを削除します
- テキストを非表示にします（
右側のフレームのオプションを使用すると、次の操作を実行できます。
- CSS クラスを編集します。
- テキストの背景色と画像を設定します。
- テキストのタイポグラフィ（見出しスタイル、フォントサイズ、フォントの太さ、行の高さ、配置、テキストカラー、テキストスタイル（太字、斜体、下線、取り消し線））を設定します。
- 箇条書き、番号付き、A、B、C などのリストを設定します。
- 境界線のカラーを選択します。
- テキストボックスのサイズ（高さと幅）を設定します。 テキスト ボックスの最小サイズ、最大サイズ、幅、高さ、オーバーフロー、およびオブジェクトの自動調整を設定するには、[Show Advanced Options] をクリックします。
- ページ上のテキストボックスの位置（絶対、固定、相対、静的、固定）を設定し、上、右、下、左からのピクセル数を設定します。
- 余白やパディングを含む、要素の間隔を設定します。
- 要素の効果（不透明度）を設定します。 「Show Advanced Options」をクリックして、画像のセピア、グレースケール、コントラスト、明るさ、ブラーの値を設定します。 テキストを反転または回転することもできます。
- インラインスタイルを設定します。
HTMLを編集 html
HTML コードだけでなく、カスタム JavaScript を編集および挿入することもできます。
A/B アクティビティと Experience Targeting アクティビティでテキストとHTMLを編集する場合は、いくつかのリッチテキスト書式設定オプションを使用できます。 フォントの選択、フォントスタイルの選択、テキストの整列方法の変更およびその他の標準的なテキスト書式オプションの設定が可能です。HTMLを変更する際に、HTMLのコードビューとリッチ編集ビューを切り替えることができます。
次の HTML5 タグをネストできます。
<a><h1-h6>、<p>、<ul>、<ol>、<menu>、<div>、<figure>、<figcaption><ins><h1-h6>、<p>、<ul>、<ol>、<menu><del><ul>、<ol>、<menu>、<h1-h6>、<p><label><p>DOM パスを使用して要素をナビゲートする dom-path
ページで要素をクリックすると、VEC オプションメニューが表示されます。さらに、要素をクリックすると、対応する DOM パスがページの下部に表示されます。
DOM パスが表示されていない場合は、Show DOM アイコン（
DOM パスを使用すると、選択した要素に関する情報（タイプ、ID、クラス）をすばやく確認したり、DOM パスを上下に移動して目的の要素を選択したりできます。
DOM パスを使用すれば、VEC 内で任意の親要素、兄弟要素、子要素に容易に移動できます。
DOM パス機能は、クリックの追跡を設定するときにも使用できます。