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 （デフォルト）の場合、角は四角形になります。

サイズ

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

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

配置

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

横組み整列スタイル {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"}

アドバンス

詳細スタイル {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