Image

アドバンス

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

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

詳細スタイル {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の場合、リンク先をメールまたはページからリダイレクトする方法を選択します。
- なし - デフォルトのブラウザーまたはクライアントの動作（デフォルト）を使用してリンクを開きます。
- 空白 – 新しいウィンドウまたはタブでリンクを開きます。
- 自分 – 同じフレームでリンクを開きます。
- 親 – 親フレーム内のリンクを開きます。
- トップ - ウィンドウの本文のリンクを開きます。

スタイルの設定

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

背景

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

チェックボックスを選択してカラーの四角形をクリックし、ピッカーからカラーを選択します。色を選択するには、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"}

アドバンス

詳細スタイル {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の機能"}

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

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

{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