リンクオプションを設定

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

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

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

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

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

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

{width="450"}

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

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

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

画像設定 {width="250"}

リンクオプションを設定

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

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

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

スタイルの設定

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

背景

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

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

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

境界

「スタイル」タブを選択した右側のパネルで、「境界線」セクションを展開し、コンポーネントの境界線を表示するオプションを設定します。
切替スイッチを右に移動して図面枠の表示オプションを有効にし、設計基準に従って設定します。
- 境界線のカラー を設定するには、チェックボックスを選択し、カラーの四角形をクリックして、ピッカーから色を選択します。色を選択するには、RGB、HSL、HSB、または 16 進数値を入力します。または、カラースライダーとカラーフィールドを使用して、カラーを選択できます。
{width="300"}
- 境界線のサイズ （線の幅）を設定するには、上向き矢印アイコンと下向き矢印アイコンをクリックしてピクセル数を増減します。
- 境界線スタイル を設定するには、標準 CSS border-style 値のリストから値を選択します。
- 境界線の表示場所を指定するには、それぞれの 境界線の位置 チェックボックスを選択します。
{width="250"}
境界半径 には、コーナーに必要なカーブに従って数値を設定します。

値が 0 （デフォルト）の場合、コーナーは 2 乗になります。

サイズ

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

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

配置

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

水平方向揃えスタイル {width="250"}

余白

「スタイル」タブを選択した右側のパネルで、「余白」セクションを展開し、構造コンポーネント内の余白の間隔のオプションを設定します。このスタイルは、コンポーネント境界線の外側の領域をコントロールする CSS margin パラメーターを複製して、他のコンポーネントと分離します。コンポーネントの周囲に隙間ができ、周囲のコンテンツの配置やレイアウトに影響します。

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

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

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

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

{width="250"}

パディング

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

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

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

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

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

{width="250"}

アドバンス

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

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

詳細スタイル {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 （デフォルト）の場合、コーナーは 2 乗になります。

サイズ

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

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

配置

水平方向揃えスタイル {width="250"}

余白

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

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

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

{width="250"}

パディング

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

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

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

{width="250"}

アドバンス

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

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

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

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

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

{width="600"}

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

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

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

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

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

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

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

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

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

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

{width="250"}

recommendation-more-help