ドキュメント Journey Optimizer B2B Journey Optimizer B2B エディションのドキュメント

コンテンツコンポーネント content-components

最終更新日： 2026年4月9日

トピック：
Content Design Tools

作成対象：

User

メール、ランディングページ、テンプレート、ビジュアルフラグメントのコンテンツをデザインする場合は、コンテンツコンポーネントを使用してビジュアルデザイン要素を追加します。レイアウトを定義する1つ以上の構造コンポーネント内に、必要な数のコンテンツコンポーネントを追加できます。

コンテンツライブラリ

コンポーネントライブラリの下部にあるContents セクションには、使用可能なコンテンツコンポーネントが表示されます。

アイコン

コンポーネント

説明

コンテナ

このコンポーネントをデザインに追加して、コンポーネントをグループ化したり、背景や境界線のスタイルを領域に適用したりするために使用できる長方形のコンテナを含めます。

ボタン

このコンポーネントをデザインに追加して、クリック可能なボタン要素を含めます。

テキスト

このコンポーネントをデザインに追加して、テキストの本文を含めます。

ディバイダー

このコンポーネントをデザインに追加して、コンテンツの個別の領域に水平線を含めます。

HTML

このコンポーネントをデザインに追加して、既存のHTMLの様々な部分をコピー&ペーストします。このコンポーネントを使用して、一部の外部コンテンツを再利用するための無料のモジュラーHTML ブロックを作成します。

画像

このコンポーネントをデザインに追加して、画像ファイルを挿入します。

Social

このコンポーネントをデザインに追加して、ソーシャルメディアページへのリンクを挿入します。

フォーム

ランディングページでのみ使用できます。 このコンポーネントをデザインに追加して、作成したフォームを挿入します。

コンテンツコンポーネントツールバー

各コンテンツコンポーネントタイプは、キャンバスで選択したときにツールバーを表示します。使用可能なツールは、コンポーネントタイプによって異なりますが、レンダリングされたコンテンツ内でコンポーネントを直接操作する簡単な方法を提供します。これには、コンポーネントタイプに適用できるフォーマット機能と機能機能が含まれます。

コンテンツコンポーネントツールバー {width="450"}

書式設定ツール

テキストスタイルを変更

table 0-row-3 1-row-3 html-authored
ツール	使用方法	コンポーネント
{width="120px"}	選択したテキスト文字列に、太字、斜体、下線、取り消し線、上付き文字、下付き文字を適用します。	ボタンテキスト

水平方向の整列

table 0-row-3 1-row-3 html-authored
ツール	使用方法	コンポーネント
{width="120px"}	コンポーネントコンテンツに水平配置タイプを適用します。左、中央揃え、右または両端揃えを選択します。	ボタンテキスト

リストを作成

table 0-row-3 1-row-3 html-authored
ツール	使用方法	コンポーネント
{width="120px"}	コンポーネントテキストに順序付きリストまたは順序付きリストの書式を適用します。	テキスト

見出しを設定

table 0-row-3 1-row-3 html-authored
ツール	使用方法	コンポーネント
{width="60px"}	カーソル位置の段落に見出しレベルの書式を適用します。	ボタンテキスト

フォントサイズ

table 0-row-3 1-row-3 html-authored
ツール	使用方法	コンポーネント
{width="60px"}	選択したテキストにフォントサイズを適用します。ツールをクリックし、サイズを選択するか、px値を入力します。	ボタンテキスト

フォントカラー

table 0-row-3 1-row-3 html-authored
ツール	使用方法	コンポーネント
{width="160px"}	選択したテキストにフォントカラーを適用します。ピッカーからカラーを選択し、カラースライダーとカラーフィールドを使用してカラーを選択します。または、既知のRGB、HSL、HSB、または16進数値を入力することもできます。	ボタンテキスト

リンクを挿入

table 0-row-3 1-row-3 html-authored
ツール	使用方法	コンポーネント
{width="120px"}	選択したテキストまたは要素のクリック可能なリンク（外部URLまたはランディングページ）を作成します。	ボタンテキスト Image

リンクを削除

table 0-row-3 1-row-3 html-authored
ツール	使用方法	コンポーネント
{width="80px"}	選択したテキストまたは要素のクリック可能なリンク（外部URLまたはランディングページ）を削除します。	ボタンテキスト Image

機能ツール

ツール

名前

使用方法

{width="40"}

パーソナライゼーションの追加

パーソナライゼーションエディターを使用して、コンポーネントコンテンツにパーソナライゼーショントークンを挿入します。詳細情報

{width="40"}

ソースコードを表示

コンポーネントのHTML ソースコードを読み取り専用ポップアップで表示します。

{width="200"}

{width="40"}

条件付きコンテンツの有効化

（メールとフラグメント）コンポーネントの条件付きバリアントを有効にします。詳細情報

{width="40"}

複製

コンポーネントのコピーを作成し、以下に直接追加します。

{width="40"}

削除

コンポーネントを削除します。

デザインにコンテンツコンポーネントを追加する

ビジュアルデザイン空間で、既存のテンプレートを使用するか、必要な構造コンポーネントを空のキャンバスに追加してレイアウトを定義します。
コンポーネント ライブラリで、選択したコンテンツコンポーネントのドラッグハンドル を取得し、それを構造コンポーネントにドラッグ&ドロップします。

単一の構造コンポーネントおよび構造コンポーネントの各列に複数のコンポーネントを追加できます。

{width="600" modal="regular"}
右側の設定タブとスタイル タブ、またはキャンバスに表示されるコンテキストツールバーを使用して、コンポーネントの表示を調整します。

例えば、コンポーネントのテキストスタイル、パディング、マージンを変更できます。

{width="600" modal="regular"}

デザインを操作する際に、コンポーネントを削除または複製することもできます。

コンテンツコンポーネントの設定とスタイル

コンポーネントを追加すると、ビジュアルデザインスペースでコンポーネントが選択され、右側のパネルにそのプロパティが表示されます。また、いつでもコンポーネントを選択して、設定やスタイルを変更することもできます。多くの設定やスタイルはコンポーネントに固有ですが、選択したコンテンツコンポーネントに適用できる標準設定やスタイルがいくつかあります。

表示オプション

デスクトップまたはモバイルデバイスの表示からコンポーネントを除外する場合は、表示オプション設定を変更します。デフォルトの すべてのデバイスに表示 では、すべてのデバイスで表示が有効になります。別の設定を選択して、デバイスタイプ別にコンポーネントを排他的にします。

デスクトップデバイスでのみ表示 - コンポーネントをデスクトップデバイスに表示し、モバイルデバイスに対して除外する場合は、この設定を選択します。
モバイルデバイスでのみ表示 – この設定は、スマートフォンやタブレットなどのモバイルデバイスにコンポーネントを表示し、デスクトップデバイスに対しては除外する場合に選択します。

コンテンツコンポーネントの表示オプション {width="400" modal="regular"}

コンテナ

コンテナを使用して、コンテンツコンポーネントのグループに特定のスタイルを適用します。 Container コンポーネントを追加してから、その中に他のコンテンツコンポーネントを追加します。このコンポーネントは、HTMLでdiv要素を使用する方法と似ています。コンテナに含まれるコンテンツコンポーネントに適用されるスタイルとは異なる、明確なスタイルをコンテナに適用できます。

例えば、コンテナコンポーネントを追加してから、 ボタンコンポーネントをそのコンテナ内に追加します。コンテナに特定のエリアのスタイル設定を使用し、必要に応じてボタンとその背景のスタイルを設定できます。

コンテナコンテンツコンポーネントスタイル {width="600" modal="regular"}

背景

右側のパネルで「スタイル」タブを選択した状態で、背景セクションを使用して、コンポーネントの背景色を定義します。

チェックボックスを選択し、カラーの正方形をクリックして、ピッカーからカラーを選択します。 RGB、HSL、HSB、または16進数値を入力すると、カラーを選択できます。または、カラースライダーとカラーフィールドを使用してカラーを選択することもできます。

背景カラーピッカー {width="300"}

境界

「スタイル」タブが選択された右側のパネルで、境界線 セクションを展開し、コンポーネントの境界線を表示するオプションを設定します。
境界線の表示オプションを有効にするには、切り替えスイッチを右に動かし、デザイン基準に従って設定します。
- 境界線カラーを設定するには、チェックボックスを選択し、カラーの正方形をクリックしてピッカーからカラーを選択します。 RGB、HSL、HSB、または16進数値を入力すると、カラーを選択できます。または、カラースライダーとカラーフィールドを使用してカラーを選択することもできます。
{width="300"}
- 境界線サイズ （線幅）を設定するには、上下の矢印アイコンをクリックして、ピクセル数を増減します。
- 境界線スタイルを設定するには、標準CSS border-style値のリストから値を選択します。
- 境界線が表示される場所を決めるには、各境界線の位置 チェックボックスを選択します。
{width="250"}
境界線の半径に対して、角に対する曲線に応じて数値を設定します。

値が0 （デフォルト）の場合、角は四角形になります。

サイズ

「スタイル」タブが選択された右側のパネルで、サイズ セクションを展開し、コンポーネントの高さと幅のオプションを設定します。

高さ – 上下の矢印アイコンをクリックして、ピクセル数を増減します。空の値（Auto）がデフォルトで、要素の高さが要素の内容に応じてサイズ調整されます。
幅 - トグルを使用して、幅をピクセルまたはパーセント単位で設定します。
- パーセンテージ幅の場合は、スライダーを使用してパーセンテージ値を設定します。パーセンテージは、含まれるブロックのコンテンツボックスに基づいてエレメントのサイズを決定します。このボックスでは、パディングと境界線は除外されます。例えば、値が50の場合、要素の幅は、含まれるブロックコンテンツの幅の50%に設定されます。
  
  {width="250"}
- ピクセルベースの幅の場合は、上下の矢印アイコンをクリックして、ピクセル数を増減します。空の値（Auto）がデフォルトで、要素の幅を内容に応じてサイズ調整します。
  
  {width="250"}

マージン

「スタイル」タブが選択された右側のパネルで、マージン セクションを展開し、構造コンポーネント内のマージン間隔のオプションを設定します。このスタイルは、コンポーネントの境界線の外側のスペースに制御するCSS margin パラメーターを複製し、他のコンポーネントから分離します。コンポーネントの周囲にギャップを作成して、コンポーネントの位置と周囲のコンテンツのレイアウトに影響を与えます。

デザインのニーズに応じて、余白の値をピクセル単位で設定します。コンポーネントのすべての辺、上端、左右、または各辺のマージンを個別に設定できます。

すべての辺 – すべての辺に適用する値を1つ設定するには、各辺の異なる余白 チェックボックスをオフにします。上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
Top-bottom – 上下の余白を同じ値に設定するには、上下の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。
左から右 – 左右の余白を同じ値に設定するには、左右の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
独立 – 各余白を独立した値に設定するには、上下の設定と左右の設定の間にロック解除 アイコンを設定します。各設定で、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}

パディング

「スタイル」タブが選択された右側のパネルで、パディング セクションを展開し、構造コンポーネント内のパディングのオプションを設定します。このスタイルは、コンポーネントのコンテンツと境界線の間のスペースであるCSS padding パラメーターを複製します。パディングには、コンテンツとコンポーネントの境界線の間の距離を制御するために使用できる内部間隔が用意されています。

デザインのニーズに応じて、パディング値をピクセル単位で設定します。コンポーネントのすべての側面、上部下部、左右側面、または各側面に対して、それぞれ個別にパディングを設定できます。

すべての辺 – すべての辺に適用する1つの値を設定するには、各辺に対する異なるパディング チェックボックスをオフにします。上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
Top-bottom – 上下のパディングを同じ値に設定するには、上下の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。
Left-right – 左右のパディングを同じ値に設定するには、左右の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
独立 – 各辺のパディングを独立した値に設定するには、上下の設定と左右の設定の間にロック解除 アイコンを設定します。各設定で、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}

ボタン

ボタンコンポーネントを使用して、1つまたは複数のクリック可能なボタンをコンテンツに挿入します。ボタンを使用して、ページビューアまたはメール受信者をサポートコンテンツ（公開されたランディングページまたは外部リンク）にリダイレクトします。

ボタンのテキストを追加

ボタンコンポーネントがキャンバスに表示されると、ツールバーには、テキスト書式設定のオプションと、パーソナライゼーションおよび条件付きバリアントが含まれます。エディターツールバーのオプションについて詳しくは、#を参照してください。

ボタンのラベルテキストを入力して書式を設定すると、コンテンツに合わせてボタンのサイズが変更されます。

ツールバーに表示されるボタンコンポーネント {width="500" modal="regular"}

リンクオプションの設定

「設定」タブで、リンク オプションを使用して、ボタンのテキスト、リンク先、およびターゲットページを読み込むためのブラウザーの動作を定義します。

リンクの Type を設定します。
- 外部リンク – 標準URLをリンク先として使用するには、このタイプを選択します。
  
  Urlに、リンク先のURLを入力します。 パーソナライズ （）アイコンをクリックして、パーソナライゼーショントークンをURLのパラメーターとして使用します。
  
  {width="200"}
- ランディングページ – このタイプを選択すると、接続されているMarketo Engage インスタンスで公開されたランディングページが選択されます。
  
  「ランディングページ」オプションで、公開されたランディングページを選択します。 ページを選択 アイコン（）をクリックし、公開されたランディングページを選択。
  
  {width="200"}
Labelに、ボタン内に表示するテキストを入力します。

ボタンのサイズは、テキストと設定したスタイルに応じて調整されます。
Targetの場合、リンク先をメールまたはページからリダイレクトする方法を選択します。
- なし - デフォルトのブラウザーまたはクライアントの動作（デフォルト）を使用してリンクを開きます。
- 空白 – 新しいウィンドウまたはタブでリンクを開きます。
- 自分 – 同じフレームでリンクを開きます。
- 親 – 親フレーム内のリンクを開きます。
- トップ - ウィンドウの本文のリンクを開きます。

スタイルを設定

「スタイル」タブでボタンのスタイル設定をカスタマイズします。

背景

右側のパネルで「スタイル」タブを選択した状態で、背景セクションを使用して、コンポーネントの背景色を定義します。

背景カラーピッカー {width="300"}

テキスト

「スタイル」タブが選択された右側のパネルで、テキスト セクションを展開し、コンポーネントテキストスタイルのオプションを設定します。

フォントファミリー - コンポーネント内のテキストのフォントファミリーを選択するには、下向き矢印アイコンをクリックします。
フォントサイズ - フォントサイズを増減するか、値を入力するには、上下の矢印アイコンをクリックします。入力された値には、小数を使用できます。
線の高さ – 上下の矢印アイコンをクリックして、線の高さを増減するか、値を入力します。入力された値には、小数を使用できます。

{width="250"}
テキストスタイル - テキストスタイルのアイコン（太字、斜体、下線付き、または取り消し線）を選択します。
テキストの整列 – 横組みテキストの整列のアイコンを選択します：左、中央、右、または正当化。
フォントカラー - カラーの正方形をクリックして、ピッカーからフォントカラーを選択します。 RGB、HSL、HSB、または16進数値を入力すると、カラーを選択できます。または、カラースライダーとカラーフィールドを使用してカラーを選択することもできます。

{width="300"}

境界

「スタイル」タブが選択された右側のパネルで、境界線 セクションを展開し、コンポーネントの境界線を表示するオプションを設定します。
境界線の表示オプションを有効にするには、切り替えスイッチを右に動かし、デザイン基準に従って設定します。
- 境界線カラーを設定するには、チェックボックスを選択し、カラーの正方形をクリックしてピッカーからカラーを選択します。 RGB、HSL、HSB、または16進数値を入力すると、カラーを選択できます。または、カラースライダーとカラーフィールドを使用してカラーを選択することもできます。
{width="300"}
- 境界線サイズ （線幅）を設定するには、上下の矢印アイコンをクリックして、ピクセル数を増減します。
- 境界線スタイルを設定するには、標準CSS border-style値のリストから値を選択します。
- 境界線が表示される場所を決めるには、各境界線の位置 チェックボックスを選択します。
{width="250"}
境界線の半径に対して、角に対する曲線に応じて数値を設定します。

値が0 （デフォルト）の場合、角は四角形になります。

サイズ

「スタイル」タブが選択された右側のパネルで、サイズ セクションを展開し、コンポーネントの高さと幅のオプションを設定します。

高さ – 上下の矢印アイコンをクリックして、ピクセル数を増減します。空の値（Auto）がデフォルトで、要素の高さが要素の内容に応じてサイズ調整されます。
幅 - トグルを使用して、幅をピクセルまたはパーセント単位で設定します。
- パーセンテージ幅の場合は、スライダーを使用してパーセンテージ値を設定します。パーセンテージは、含まれるブロックのコンテンツボックスに基づいてエレメントのサイズを決定します。このボックスでは、パディングと境界線は除外されます。例えば、値が50の場合、要素の幅は、含まれるブロックコンテンツの幅の50%に設定されます。
  
  {width="250"}
- ピクセルベースの幅の場合は、上下の矢印アイコンをクリックして、ピクセル数を増減します。空の値（Auto）がデフォルトで、要素の幅を内容に応じてサイズ調整します。
  
  {width="250"}

配置

「線形」セクションを展開し、使用する水平方向と垂直方向の整列を選択します。整列スタイルは、HTML コンポーネントを含むコンポーネント（構造またはコンテナ）内で配置する方法に影響します。

水平方向の整列は標準のtext-align CSS スタイルに変換され、左、中央、または右から選択できます。垂直方向の整列は標準のvertical-align CSS スタイルに変換され、上、中、下から選択できます。

HTML コンポーネントの整列スタイル {width="300"}

ボタンマージン

すべての辺 – すべての辺に適用する値を1つ設定するには、各辺の異なる余白 チェックボックスをオフにします。上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
Top-bottom – 上下の余白を同じ値に設定するには、上下の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。
左から右 – 左右の余白を同じ値に設定するには、左右の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
独立 – 各余白を独立した値に設定するには、上下の設定と左右の設定の間にロック解除 アイコンを設定します。各設定で、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}

コンテナマージン

すべての辺 – すべての辺に適用する値を1つ設定するには、各辺の異なる余白 チェックボックスをオフにします。上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
Top-bottom – 上下の余白を同じ値に設定するには、上下の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。
左から右 – 左右の余白を同じ値に設定するには、左右の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
独立 – 各余白を独立した値に設定するには、上下の設定と左右の設定の間にロック解除 アイコンを設定します。各設定で、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}

パディング

すべての辺 – すべての辺に適用する1つの値を設定するには、各辺に対する異なるパディング チェックボックスをオフにします。上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
Top-bottom – 上下のパディングを同じ値に設定するには、上下の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。
Left-right – 左右のパディングを同じ値に設定するには、左右の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
独立 – 各辺のパディングを独立した値に設定するには、上下の設定と左右の設定の間にロック解除 アイコンを設定します。各設定で、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}

アドバンス

値を含むCSSに準拠する属性を追加で適用するには、詳細スタイル設定を使用します。既存の属性の値を変更したり、新しい属性を追加したりできます。スタイル設定は、親子コンポーネント（要素）のCSS継承モデルを使用してコンポーネントに適用されます。

表示される属性には、コンポーネントに対して現在定義されているスタイルが反映されます。値は、CSS定義に従って変更できます。追加（+）アイコンをクリックして、コンポーネントの新しいスタイル属性を追加します。

詳細スタイル {width="250"}

テキスト

テキストコンポーネントを使用して、コンテンツにテキストブロックを挿入します。テキストコンポーネントがキャンバスで選択されている場合は、テキストを入力し、ツールバーオプションを使用して、インラインの書式設定と、パーソナライゼーショントークンや条件付きバリアントなどのオプションを追加します。

「スタイル」タブで、テキストコンポーネントのスタイル設定をカスタマイズします。

背景

右側のパネルで「スタイル」タブを選択した状態で、背景セクションを使用して、コンポーネントの背景色を定義します。

背景カラーピッカー {width="300"}

テキスト

これらのスタイルは、テキストブロック全体に適用されます。選択したテキスト文字列にインラインスタイルを適用できます。

「スタイル」タブが選択された右側のパネルで、テキスト セクションを展開し、コンポーネントテキストスタイルのオプションを設定します。

フォントファミリー - コンポーネント内のテキストのフォントファミリーを選択するには、下向き矢印アイコンをクリックします。
フォントサイズ - フォントサイズを増減するか、値を入力するには、上下の矢印アイコンをクリックします。入力された値には、小数を使用できます。
線の高さ – 上下の矢印アイコンをクリックして、線の高さを増減するか、値を入力します。入力された値には、小数を使用できます。

{width="250"}
テキストスタイル - テキストスタイルのアイコン（太字、斜体、下線付き、または取り消し線）を選択します。
テキストの整列 – 横組みテキストの整列のアイコンを選択します：左、中央、右、または正当化。
フォントカラー - カラーの正方形をクリックして、ピッカーからフォントカラーを選択します。 RGB、HSL、HSB、または16進数値を入力すると、カラーを選択できます。または、カラースライダーとカラーフィールドを使用してカラーを選択することもできます。

{width="300"}

境界

「スタイル」タブが選択された右側のパネルで、境界線 セクションを展開し、コンポーネントの境界線を表示するオプションを設定します。
境界線の表示オプションを有効にするには、切り替えスイッチを右に動かし、デザイン基準に従って設定します。
- 境界線カラーを設定するには、チェックボックスを選択し、カラーの正方形をクリックしてピッカーからカラーを選択します。 RGB、HSL、HSB、または16進数値を入力すると、カラーを選択できます。または、カラースライダーとカラーフィールドを使用してカラーを選択することもできます。
{width="300"}
- 境界線サイズ （線幅）を設定するには、上下の矢印アイコンをクリックして、ピクセル数を増減します。
- 境界線スタイルを設定するには、標準CSS border-style値のリストから値を選択します。
- 境界線が表示される場所を決めるには、各境界線の位置 チェックボックスを選択します。
{width="250"}
境界線の半径に対して、角に対する曲線に応じて数値を設定します。

値が0 （デフォルト）の場合、角は四角形になります。

サイズ

「スタイル」タブが選択された右側のパネルで、サイズ セクションを展開し、コンポーネントの高さと幅のオプションを設定します。

高さ – 上下の矢印アイコンをクリックして、ピクセル数を増減します。空の値（Auto）がデフォルトで、要素の高さが要素の内容に応じてサイズ調整されます。
幅 - トグルを使用して、幅をピクセルまたはパーセント単位で設定します。
- パーセンテージ幅の場合は、スライダーを使用してパーセンテージ値を設定します。パーセンテージは、含まれるブロックのコンテンツボックスに基づいてエレメントのサイズを決定します。このボックスでは、パディングと境界線は除外されます。例えば、値が50の場合、要素の幅は、含まれるブロックコンテンツの幅の50%に設定されます。
  
  {width="250"}
- ピクセルベースの幅の場合は、上下の矢印アイコンをクリックして、ピクセル数を増減します。空の値（Auto）がデフォルトで、要素の幅を内容に応じてサイズ調整します。
  
  {width="250"}

マージン

すべての辺 – すべての辺に適用する値を1つ設定するには、各辺の異なる余白 チェックボックスをオフにします。上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
Top-bottom – 上下の余白を同じ値に設定するには、上下の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。
左から右 – 左右の余白を同じ値に設定するには、左右の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
独立 – 各余白を独立した値に設定するには、上下の設定と左右の設定の間にロック解除 アイコンを設定します。各設定で、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}

パディング

すべての辺 – すべての辺に適用する1つの値を設定するには、各辺に対する異なるパディング チェックボックスをオフにします。上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
Top-bottom – 上下のパディングを同じ値に設定するには、上下の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。
Left-right – 左右のパディングを同じ値に設定するには、左右の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
独立 – 各辺のパディングを独立した値に設定するには、上下の設定と左右の設定の間にロック解除 アイコンを設定します。各設定で、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}

アドバンス

詳細スタイル {width="250"}

ディバイダー

Divider コンポーネントを追加して、コンテンツのセクション間に線形の除算を組み込みます。

背景

右側のパネルで「スタイル」タブを選択した状態で、背景セクションを使用して、コンポーネントの背景色を定義します。

背景カラーピッカー {width="300"}

折れ線グラフ

「スタイル」タブが選択された右側のパネルで、行セクションを展開し、コンポーネントの高さと幅のオプションを設定します。

カラー - カラーの正方形をクリックして、ピッカーからカラーを選択します。 RGB、HSL、HSB、または16進数値を入力すると、カラーを選択できます。または、カラースライダーとカラーフィールドを使用してカラーを選択することもできます。
高さ – 上下の矢印アイコンをクリックして、ピクセル数を増減します。空の値（Auto）がデフォルトで、要素の高さが要素の内容に応じてサイズ調整されます。
幅 - トグルを使用して、幅をピクセルまたはパーセント単位で設定します。
- パーセンテージ幅の場合は、スライダーを使用してパーセンテージ値を設定します。パーセンテージは、含まれるブロックのコンテンツボックスに基づいてエレメントのサイズを決定します。このボックスでは、パディングと境界線は除外されます。例えば、値が50の場合、要素の幅は、含まれるブロックコンテンツの幅の50%に設定されます。
{width="250"}
- ピクセルベースの幅の場合は、上下の矢印アイコンをクリックして、ピクセル数を増減します。空の値（Auto）がデフォルトで、要素の幅を内容に応じてサイズ調整します。
スタイル - Solid、Dotted、Dashedなど、標準CSS line-style値のリストから値を選択します。

サイズ

「スタイル」タブが選択された右側のパネルで、サイズ セクションを展開し、コンポーネントの高さと幅のオプションを設定します。

高さ – 上下の矢印アイコンをクリックして、ピクセル数を増減します。空の値（Auto）がデフォルトで、要素の高さが要素の内容に応じてサイズ調整されます。
幅 - トグルを使用して、幅をピクセルまたはパーセント単位で設定します。
- パーセンテージ幅の場合は、スライダーを使用してパーセンテージ値を設定します。パーセンテージは、含まれるブロックのコンテンツボックスに基づいてエレメントのサイズを決定します。このボックスでは、パディングと境界線は除外されます。例えば、値が50の場合、要素の幅は、含まれるブロックコンテンツの幅の50%に設定されます。
  
  {width="250"}
- ピクセルベースの幅の場合は、上下の矢印アイコンをクリックして、ピクセル数を増減します。空の値（Auto）がデフォルトで、要素の幅を内容に応じてサイズ調整します。
  
  {width="250"}

配置

「線形」セクションを展開し、使用する水平方向の整列（左、中央、右）を選択します。このスタイルは、標準のtext-align CSS スタイルに変換され、コンポーネントが含まれるコンポーネント内でどのように配置されるかに影響します。

横組み整列スタイル {width="250"}

マージン

すべての辺 – すべての辺に適用する値を1つ設定するには、各辺の異なる余白 チェックボックスをオフにします。上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
Top-bottom – 上下の余白を同じ値に設定するには、上下の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。
左から右 – 左右の余白を同じ値に設定するには、左右の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
独立 – 各余白を独立した値に設定するには、上下の設定と左右の設定の間にロック解除 アイコンを設定します。各設定で、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}

パディング

すべての辺 – すべての辺に適用する1つの値を設定するには、各辺に対する異なるパディング チェックボックスをオフにします。上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
Top-bottom – 上下のパディングを同じ値に設定するには、上下の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。
Left-right – 左右のパディングを同じ値に設定するには、左右の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
独立 – 各辺のパディングを独立した値に設定するには、上下の設定と左右の設定の間にロック解除 アイコンを設定します。各設定で、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}

アドバンス

詳細スタイル {width="250"}

HTML

HTML コンポーネントを使用して、既存のHTMLの一部を追加します。このコンポーネントを使用すると、外部コンテンツを再利用するHTMLのモジュール要素を簡単に作成できます。

キャンバス上のコンポーネントを選択し、ツールバーの「ソースコードを表示」アイコンをクリックします。

コードエディターを開き、Adobe HTMLの
テキストボックスにHTMLを貼り付け、保存をクリックします。

HTMLを編集ダイアログ

HTMLが有効な場合は、カンバス上にエレメントがレンダリングされます。他のコンテンツコンポーネントのいずれかにマッピングするエレメントの場合は、コンポーネントタイプに応じて右側のパネルの設定とスタイルを変更できます。そうでない場合は、HTML コンポーネントとして残ります。

HTML コンポーネントの場合、右側のパネルで、HTML コンポーネント全体に対して次のスタイルを設定できます。

背景

右側のパネルで「スタイル」タブを選択した状態で、背景セクションを使用して、コンポーネントの背景色を定義します。

背景カラーピッカー {width="300"}

境界

「スタイル」タブが選択された右側のパネルで、境界線 セクションを展開し、コンポーネントの境界線を表示するオプションを設定します。
境界線の表示オプションを有効にするには、切り替えスイッチを右に動かし、デザイン基準に従って設定します。
- 境界線カラーを設定するには、チェックボックスを選択し、カラーの正方形をクリックしてピッカーからカラーを選択します。 RGB、HSL、HSB、または16進数値を入力すると、カラーを選択できます。または、カラースライダーとカラーフィールドを使用してカラーを選択することもできます。
{width="300"}
- 境界線サイズ （線幅）を設定するには、上下の矢印アイコンをクリックして、ピクセル数を増減します。
- 境界線スタイルを設定するには、標準CSS border-style値のリストから値を選択します。
- 境界線が表示される場所を決めるには、各境界線の位置 チェックボックスを選択します。
{width="250"}
境界線の半径に対して、角に対する曲線に応じて数値を設定します。

値が0 （デフォルト）の場合、角は四角形になります。

サイズ

「スタイル」タブが選択された右側のパネルで、サイズ セクションを展開し、コンポーネントの高さと幅のオプションを設定します。

高さ – 上下の矢印アイコンをクリックして、ピクセル数を増減します。空の値（Auto）がデフォルトで、要素の高さが要素の内容に応じてサイズ調整されます。
幅 - トグルを使用して、幅をピクセルまたはパーセント単位で設定します。
- パーセンテージ幅の場合は、スライダーを使用してパーセンテージ値を設定します。パーセンテージは、含まれるブロックのコンテンツボックスに基づいてエレメントのサイズを決定します。このボックスでは、パディングと境界線は除外されます。例えば、値が50の場合、要素の幅は、含まれるブロックコンテンツの幅の50%に設定されます。
  
  {width="250"}
- ピクセルベースの幅の場合は、上下の矢印アイコンをクリックして、ピクセル数を増減します。空の値（Auto）がデフォルトで、要素の幅を内容に応じてサイズ調整します。
  
  {width="250"}

配置

HTML コンポーネントの整列スタイル {width="300"}

マージン

すべての辺 – すべての辺に適用する値を1つ設定するには、各辺の異なる余白 チェックボックスをオフにします。上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
Top-bottom – 上下の余白を同じ値に設定するには、上下の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。
左から右 – 左右の余白を同じ値に設定するには、左右の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
独立 – 各余白を独立した値に設定するには、上下の設定と左右の設定の間にロック解除 アイコンを設定します。各設定で、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}

パディング

すべての辺 – すべての辺に適用する1つの値を設定するには、各辺に対する異なるパディング チェックボックスをオフにします。上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
Top-bottom – 上下のパディングを同じ値に設定するには、上下の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。
Left-right – 左右のパディングを同じ値に設定するには、左右の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
独立 – 各辺のパディングを独立した値に設定するには、上下の設定と左右の設定の間にロック解除 アイコンを設定します。各設定で、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}

アドバンス

詳細スタイル {width="250"}

Image

画像コンポーネントを使用して、画像アセットをコンテンツに挿入します。画像コンポーネントがキャンバスで選択されている場合、表示されている画像アセットファイルを追加または変更できます。

ツールバーと共に表示される画像コンポーネント {width="400" modal="regular"}

画像アセットの追加

アセットソースタイプを選択し、画像ファイルを選択します。

Marketo Engage Assets – このタイプを選択すると、Journey Optimizer B2B edition ライブラリまたは接続されたMarket Engage インスタンスから画像アセットを参照して選択できます。

{width="700" modal="regular"}

ダイアログから、選択したリポジトリから画像を選択できます。「選択」をクリックして、アセットを追加します。

必要なアセットを見つけるのに役立つツールがあります。
- 左上のフィルター アイコンをクリックして、条件に従って表示される項目をフィルタリングします。
- 「検索」フィールドにテキストを入力して、アセット名に一致する表示アイテムをフィルタリングします。
  
  {width="700" modal="regular"}
Experience Manager Assets – このタイプを選択すると、設定されたExperience Manager Assets リポジトリから画像アセットを参照して選択できます。

「Assetsを選択」ダイアログで、使用可能なツールを使用して画像を選択し、必要なアセットを見つけて「選択」をクリックします。
- 右上の リポジトリ を変更します。
- 右上の アセットの管理 をクリックして、別のブラウザータブでAssets リポジトリを開き、AEM Assets管理ツールを使用します。
- 右上の表示タイプ セレクターをクリックして、表示をリストビュー、グリッドビュー、ギャラリービュー、または ウォーターフォールビュー に変更します。
- 「並べ替え順序」アイコンをクリックして、並べ替え順序を昇順と降順で変更します。
  
  {width="700" modal="regular"}
- 「並べ替え」メニューの矢印をクリックして、並べ替え条件を名前、サイズ、または変更に変更します。
- 左上のフィルター アイコンをクリックして、条件に従って表示される項目をフィルタリングします。
- 「検索」フィールドにテキストを入力して、アセット名に一致する表示アイテムをフィルタリングします。
{width="700" modal="regular"}
メディアの読み込み – このタイプを選択して、システムからファイルを選択し、Journey Optimizer B2B edition アセットライブラリに読み込みます。

画像をアップロード ダイアログで、システムからファイルをファイルボックスにドラッグ&ドロップします。最大ファイルサイズは100 MBです。

{width="450"}にインポートします

選択した画像のファイル名がダイアログに表示されます。アセットファイル名は（フォルダー間で）一意である必要があり、名前のファイルが既に存在する場合は、メッセージが表示されます。名前の最大文字数は100文字です。特殊文字（;、:、\、|など）を含めることはできません。

「読み込み」をクリックします。

右側のパネルで、画像のタイトルと代替テキストを追加できます。

画像の設定 {width="250"}

リンクオプションの設定

設定タブで、リンク オプションを使用して、画像を宛先とリンクさせ、ターゲットページを読み込むためのブラウザーの動作を行います。

リンクの Type を設定します。
- 外部リンク – 標準URLをリンク先として使用するには、このタイプを選択します。
  
  Urlに、リンク先のURLを入力します。 パーソナライズ （）アイコンをクリックして、パーソナライゼーショントークンをURLのパラメーターとして使用します。
  
  {width="250"}
- ランディングページ – このタイプを選択すると、接続されているMarketo Engage インスタンスで公開されたランディングページが選択されます。
  
  「ランディングページ」オプションで、公開されたランディングページを選択します。 ページを選択 アイコン（）をクリックし、公開されたランディングページを選択。
  
  {width="250"}
Labelに、ボタン内に表示するテキストを入力します。

ボタンのサイズは、テキストと設定したスタイルに応じて調整されます。
Targetの場合、リンク先をメールまたはページからリダイレクトする方法を選択します。
- なし - デフォルトのブラウザーまたはクライアントの動作（デフォルト）を使用してリンクを開きます。
- 空白 – 新しいウィンドウまたはタブでリンクを開きます。
- 自分 – 同じフレームでリンクを開きます。
- 親 – 親フレーム内のリンクを開きます。
- トップ - ウィンドウの本文のリンクを開きます。

スタイルの設定

右側のパネルで、画像コンポーネントのスタイルを設定します。

背景

右側のパネルで「スタイル」タブを選択した状態で、背景セクションを使用して、コンポーネントの背景色を定義します。

背景カラーピッカー {width="300"}

境界

「スタイル」タブが選択された右側のパネルで、境界線 セクションを展開し、コンポーネントの境界線を表示するオプションを設定します。
境界線の表示オプションを有効にするには、切り替えスイッチを右に動かし、デザイン基準に従って設定します。
- 境界線カラーを設定するには、チェックボックスを選択し、カラーの正方形をクリックしてピッカーからカラーを選択します。 RGB、HSL、HSB、または16進数値を入力すると、カラーを選択できます。または、カラースライダーとカラーフィールドを使用してカラーを選択することもできます。
{width="300"}
- 境界線サイズ （線幅）を設定するには、上下の矢印アイコンをクリックして、ピクセル数を増減します。
- 境界線スタイルを設定するには、標準CSS border-style値のリストから値を選択します。
- 境界線が表示される場所を決めるには、各境界線の位置 チェックボックスを選択します。
{width="250"}
境界線の半径に対して、角に対する曲線に応じて数値を設定します。

値が0 （デフォルト）の場合、角は四角形になります。

サイズ

「スタイル」タブが選択された右側のパネルで、サイズ セクションを展開し、コンポーネントの高さと幅のオプションを設定します。

高さ – 上下の矢印アイコンをクリックして、ピクセル数を増減します。空の値（Auto）がデフォルトで、要素の高さが要素の内容に応じてサイズ調整されます。
幅 - トグルを使用して、幅をピクセルまたはパーセント単位で設定します。
- パーセンテージ幅の場合は、スライダーを使用してパーセンテージ値を設定します。パーセンテージは、含まれるブロックのコンテンツボックスに基づいてエレメントのサイズを決定します。このボックスでは、パディングと境界線は除外されます。例えば、値が50の場合、要素の幅は、含まれるブロックコンテンツの幅の50%に設定されます。
  
  {width="250"}
- ピクセルベースの幅の場合は、上下の矢印アイコンをクリックして、ピクセル数を増減します。空の値（Auto）がデフォルトで、要素の幅を内容に応じてサイズ調整します。
  
  {width="250"}

配置

横組み整列スタイル {width="250"}

マージン

すべての辺 – すべての辺に適用する値を1つ設定するには、各辺の異なる余白 チェックボックスをオフにします。上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
Top-bottom – 上下の余白を同じ値に設定するには、上下の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。
左から右 – 左右の余白を同じ値に設定するには、左右の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
独立 – 各余白を独立した値に設定するには、上下の設定と左右の設定の間にロック解除 アイコンを設定します。各設定で、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}

パディング

すべての辺 – すべての辺に適用する1つの値を設定するには、各辺に対する異なるパディング チェックボックスをオフにします。上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
Top-bottom – 上下のパディングを同じ値に設定するには、上下の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。
Left-right – 左右のパディングを同じ値に設定するには、左右の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
独立 – 各辺のパディングを独立した値に設定するには、上下の設定と左右の設定の間にロック解除 アイコンを設定します。各設定で、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}

アドバンス

詳細スタイル {width="250"}

ソーシャル

ソーシャル コンポーネントを使用して、ソーシャルメディアページへのリンクをコンテンツに挿入します。 3つのデフォルトのソーシャルメディアタイプが含まれていますが、ニーズに応じてタイプを追加または削除できます。

デフォルトタイプを持つ新しいソーシャルコンポーネント {width="600" modal="regular"}

ソーシャルメディアタイプを追加するには、追加（+）アイコンをクリックし、追加するソーシャルメディアタイプを選択します。

{width="250"}
ソーシャルメディアの種類を削除するには、ソーシャルメディアアイコンの横にある X をクリックします。

ソーシャルメディアタイプを選択した状態で、そのタイプのオプションを設定します。

URL - ソーシャルメディアのグラフィックまたはアイコンにリンクするソーシャルメディア URLを入力します。
Source - デフォルトではなく独自の画像を使用する場合は、を選択して画像アセットを選択します。接続されているMarketo Engage アセットリポジトリ、Experience Manager Assets リポジトリ（設定されている場合）から画像を選択するか、システムから画像ファイルを読み込むことができます。画像アセットの選択と読み込みについて詳しくは、画像コンポーネント情報を参照してください。
代替テキスト – 表示される画像の代替テキストを入力します。

{width="250"}

すべてのソーシャルメディアグラフィックに対して一貫した表示サイズを定義するには、画像のサイズを設定します。

ソーシャル コンポーネントには、次のスタイルオプションを設定できます。

背景

右側のパネルで「スタイル」タブを選択した状態で、背景セクションを使用して、コンポーネントの背景色を定義します。

背景カラーピッカー {width="300"}

境界

「スタイル」タブが選択された右側のパネルで、境界線 セクションを展開し、コンポーネントの境界線を表示するオプションを設定します。
境界線の表示オプションを有効にするには、切り替えスイッチを右に動かし、デザイン基準に従って設定します。
- 境界線カラーを設定するには、チェックボックスを選択し、カラーの正方形をクリックしてピッカーからカラーを選択します。 RGB、HSL、HSB、または16進数値を入力すると、カラーを選択できます。または、カラースライダーとカラーフィールドを使用してカラーを選択することもできます。
{width="300"}
- 境界線サイズ （線幅）を設定するには、上下の矢印アイコンをクリックして、ピクセル数を増減します。
- 境界線スタイルを設定するには、標準CSS border-style値のリストから値を選択します。
- 境界線が表示される場所を決めるには、各境界線の位置 チェックボックスを選択します。
{width="250"}
境界線の半径に対して、角に対する曲線に応じて数値を設定します。

値が0 （デフォルト）の場合、角は四角形になります。

サイズ

「スタイル」タブが選択された右側のパネルで、サイズ セクションを展開し、コンポーネントの高さと幅のオプションを設定します。

高さ – 上下の矢印アイコンをクリックして、ピクセル数を増減します。空の値（Auto）がデフォルトで、要素の高さが要素の内容に応じてサイズ調整されます。
幅 - トグルを使用して、幅をピクセルまたはパーセント単位で設定します。
- パーセンテージ幅の場合は、スライダーを使用してパーセンテージ値を設定します。パーセンテージは、含まれるブロックのコンテンツボックスに基づいてエレメントのサイズを決定します。このボックスでは、パディングと境界線は除外されます。例えば、値が50の場合、要素の幅は、含まれるブロックコンテンツの幅の50%に設定されます。
  
  {width="250"}
- ピクセルベースの幅の場合は、上下の矢印アイコンをクリックして、ピクセル数を増減します。空の値（Auto）がデフォルトで、要素の幅を内容に応じてサイズ調整します。
  
  {width="250"}

配置

横組み整列スタイル {width="250"}

マージン

すべての辺 – すべての辺に適用する値を1つ設定するには、各辺の異なる余白 チェックボックスをオフにします。上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
Top-bottom – 上下の余白を同じ値に設定するには、上下の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。
左から右 – 左右の余白を同じ値に設定するには、左右の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
独立 – 各余白を独立した値に設定するには、上下の設定と左右の設定の間にロック解除 アイコンを設定します。各設定で、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}

パディング

すべての辺 – すべての辺に適用する1つの値を設定するには、各辺に対する異なるパディング チェックボックスをオフにします。上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
Top-bottom – 上下のパディングを同じ値に設定するには、上下の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。
Left-right – 左右のパディングを同じ値に設定するには、左右の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
独立 – 各辺のパディングを独立した値に設定するには、上下の設定と左右の設定の間にロック解除 アイコンを設定します。各設定で、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}

アドバンス

詳細スタイル {width="250"}

フォーム（ランディングページ）

[Beta]{class="badge informative" title="Betaの機能"}

Form コンポーネントを使用して、公開したフォームをランディングページまたはランディングページテンプレートに追加します。フォームの作成と公開について詳しくは、Formsを参照してください。

コンポーネントツールバーのForm ツールをクリックするか、右側の埋め込みフォーム プロパティを使用して、公開されたフォームを選択します。

{width="600"}

フォームのデフォルトの フォローアップタイプ を上書きする場合は、ページまたはテンプレートの要件に従って設定を変更します。

このページは、フォームの ありがとうページ とも呼ばれ、この設定により、訪問者がフォームを送信したときに何が起こるかが決まります。

ページを維持 - フォームの送信時に訪問者を同じページに維持するには、このオプションを選択します。
ランディングページ - フォローアップとして任意のJourney Optimizer B2B editionまたはMarketo Engage ランディングページを選択するには、このオプションを選択します。

外部URL – 任意のURLをフォローアップページとして指定するには、このオプションを選択します。訪問者がフォームを送信すると、ブラウザーは指定されたURLを読み込みます。

note tip
TIP
フォームを使用してファイルをダウンロードする場合は、ホストされているファイルのURLを指定できます。この設定では、送信ボタンはダウンロードボタンとして機能します。

フォローアップ設定の変更 {width="280"}

必要に応じて、右側のパネルで「スタイル」タブを選択し、構造コンポーネント内のフォームマージンを設定します。

すべての辺 – すべての辺に適用する値を1つ設定するには、各辺の異なる余白 チェックボックスをオフにします。上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
Top-bottom – 上下の余白を同じ値に設定するには、上下の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。
左から右 – 左右の余白を同じ値に設定するには、左右の設定の間にロック アイコンを設定します。上下の矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}
独立 – 各余白を独立した値に設定するには、上下の設定と左右の設定の間にロック解除 アイコンを設定します。各設定で、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

{width="250"}

recommendation-more-help

journey-optimizer-b2b-help-user