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

メール、ランディングページ、テンプレート、ビジュアルフラグメントのコンテンツをデザインする場合は、​ コンテンツコンポーネント ​を使用してビジュアルデザイン要素を追加します。

レイアウトを定義する1つ以上の構造コンポーネント ​内に、必要な数のコンテンツコンポーネントを追加できます。

コンテンツライブラリ

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

アイコン
コンポーネント
説明
​ コンテナアイコン ​
コンテナ
このコンポーネントをデザインに追加して、コンポーネントをグループ化したり、背景や境界線のスタイルを領域に適用したりするために使用できる長方形のコンテナを含めます。
​ ボタンアイコン ​
​ ボタン ​
このコンポーネントをデザインに追加して、クリック可能なボタン要素を含めます。
​ テキストアイコン ​
テキスト
このコンポーネントをデザインに追加して、テキストの本文を含めます。
​ ディバイダーアイコン ​
​ ディバイダー
このコンポーネントをデザインに追加して、コンテンツの個別の領域に水平線を含めます。
HTML アイコン ​
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="200px"} 選択したテキストにフォントカラーを適用します。 ピッカーからカラーを選択し、カラースライダーとカラーフィールドを使用してカラーを選択します。 または、既知のRGB、HSL、HSB、または16進数値を入力することもできます。
  • ボタン

  • テキスト

リンクを挿入
table 0-row-3 1-row-3 html-authored
ツール 使用方法 コンポーネント
リンクツールを挿入{width="200px"}

選択したテキストまたは要素のクリック可能なリンクを作成します。

  • メールコンテンツ – 外部URLまたはランディングページを指定します。

  • ランディングページコンテンツ – 外部リンクを指定します。

  • ボタン

  • テキスト

  • Image

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

  • テキスト

  • Image

機能ツール

ツール
名前
使用方法
パーソナライゼーションの追加{width="40"}
パーソナライゼーションの追加
パーソナライゼーションエディターを使用して、コンポーネントコンテンツにパーソナライゼーショントークンを挿入します。 詳細情報
​ ソースコードを表示{width="40"}
ソースコードを表示
コンポーネントのHTML ソースコードを読み取り専用ポップアップで表示します。
HTML コードを表示{width="200"}
条件付きコンテンツを有効にする{width="40"}
条件付きコンテンツの有効化
(メールとフラグメント) コンポーネントの条件付きバリアントを有効にします。
複製{width="40"}
複製
コンポーネントのコピーを作成し、以下に直接追加します。
削除{width="40"}
削除
コンポーネントを削除します。

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

  1. ビジュアルデザイン空間で、既存のテンプレートを使用するか、必要な構造コンポーネントを空のキャンバスに追加してレイアウトを定義します。

  2. コンポーネント ライブラリで、選択したコンテンツコンポーネントの​ドラッグハンドル ​ ドラッグハンドル ​を取得し、それを構造コンポーネントにドラッグ&ドロップします。

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

    ​ コンテンツコンポーネントを構造コンポーネントにドラッグします{width="600" modal="regular"}

  3. 右側の​ 設定 ​および​スタイル タブ、またはキャンバスに表示されるコンテキストツールバーを使用して、コンポーネントの表示を調整します。

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

    ​ コンテンツコンポーネントの設定とスタイルを定義{width="600" modal="regular"}

デザインの作業中に、機能ツール ​ セクションの​ 削除 ​および​複製 ツールを使用して、コンポーネントを削除または複製することもできます。

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

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

表示オプション

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

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

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

コンテナ container

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

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

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

背景
{{styles-background}}
境界
{{styles-border}}
サイズ
{{styles-size}}
マージン
{{styles-margin}}
パディング
{{styles-padding}}

ボタン button

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

ボタンのテキストを追加

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

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

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

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

  1. リンクの​ Type ​を設定します。

    • 外部リンク – 標準URLをリンク先として使用するには、このタイプを選択します。

      Url​に、リンク先のURLを入力します。 パーソナライズ​ パーソナライズアイコン ​)アイコンをクリックして、パーソナライゼーショントークンをURLのパラメーターとして使用します。

      ​ ボタンコンポーネントの外部リンクを定義{width="200"}

    • ランディングページ – このタイプを選択すると、接続されているMarketo Engage インスタンス で公開されたランディングページが選択されます。

      ランディングページ」オプションで、公開されたランディングページを選択します。 ページを選択 アイコン ( ​ リンクを表示アイコン ​)をクリックし、公開されたランディングページを選択

      ​ ボタンコンポーネントのランディングページへのリンクを定義{width="200"}

  2. Label​に、ボタン内に表示するテキストを入力します。

    ボタンのサイズは、テキストと設定したスタイルに従って調整されます。

  3. Target​の場合、リンク先をメールまたはページからリダイレクトする方法を選択します。

    • なし - デフォルトのブラウザーまたはクライアントの動作(デフォルト)を使用してリンクを開きます。
    • 空白 – 新しいウィンドウまたはタブでリンクを開きます。
    • 自分 – 同じフレームでリンクを開きます。
    • – 親フレーム内のリンクを開きます。
    • トップ - ウィンドウの本文のリンクを開きます。

スタイルを設定

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

背景
{{styles-background}}
テキスト
{{styles-text}}
境界
{{styles-border}}
サイズ
{{styles-size}}
配置
{{styles-alignment-h-v}}
ボタンマージン
{{styles-margin}}
コンテナマージン
{{styles-margin}}
パディング
{{styles-padding}}
アドバンス
{{styles-advanced}}

テキスト text

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

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

背景
{{styles-background}}
テキスト

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

{{styles-text}}

境界
{{styles-border}}
サイズ
{{styles-size}}
マージン
{{styles-margin}}
パディング
{{styles-padding}}
アドバンス
{{styles-advanced}}

ディバイダー divider

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

背景
{{styles-background}}
折れ線グラフ

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

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

  • 高さ – 上下の矢印アイコンをクリックして、ピクセル数を増減します。 空の値(Auto)がデフォルトで、要素の高さが要素の内容に応じてサイズ調整されます。

  • - トグルを使用して、幅をピクセルまたはパーセント単位で設定します。

    • パーセンテージ幅の場合は、スライダーを使用してパーセンテージ値を設定します。 パーセンテージは、含まれるブロックのコンテンツボックスに基づいてエレメントのサイズを決定します。このボックスでは、パディングと境界線は除外されます。 例えば、値が50の場合、要素の幅は、含まれるブロックコンテンツの幅の50%に設定されます。

    区切りコンポーネントの行スタイルを定義{width="250"}

    • ピクセルベースの幅の場合は、上下の矢印アイコンをクリックして、ピクセル数を増減します。 空の値(Auto)がデフォルトで、要素の幅を内容に応じてサイズ調整します。
  • スタイル - SolidDottedDashed​など、標準CSS line-style値のリストから値を選択します。

サイズ
{{styles-size}}
配置
{{styles-alignment-h}}
マージン
{{styles-margin}}
パディング
{{styles-padding}}
アドバンス
{{styles-advanced}}

HTML html

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

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

    ​ コードエディターを開いて、HTML{width="450"}を追加します

  2. テキストボックスにHTMLを貼り付け、保存​をクリックします。

    HTMLを編集ダイアログ ​{width="600" modal="regular"}

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

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

背景
{{styles-background}}
境界
{{styles-border}}
サイズ
{{styles-size}}
配置
{{styles-alignment-h-v}}
マージン
{{styles-margin}}
パディング
{{styles-padding}}
アドバンス
{{styles-advanced}}

Image image

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

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

画像アセットの追加 add-image-asset

画像アセットを追加する方法を選択します。

  • アセットを選択 – このタイプを選択すると、Marketo Optimizer Assets ライブラリから画像アセットを参照して選択できます。

    使用可能な画像アセットを参照{width="700" modal="regular"}

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

    必要なアセットを見つけるのに役立つツールがあります。

    • 左上の​フィルター アイコンをクリックして、条件に従って表示される項目をフィルタリングします。

    • 検索」フィールドにテキストを入力して、アセット名に一致する表示アイテムをフィルタリングします。

  • メディアの読み込み – このタイプを選択して、システムからファイルを選択し、Marketo Optimizer アセットライブラリに読み込みます。

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

    画像ファイルをアセットライブラリに読み込む{width="450"}

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

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

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

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

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

  1. リンクの​ Type ​を設定します。

    • 外部リンク – 標準URLをリンク先として使用するには、このタイプを選択します。

      Url​に、リンク先のURLを入力します。 パーソナライズ​ パーソナライズアイコン ​)アイコンをクリックして、パーソナライゼーショントークンをURLのパラメーターとして使用します。

      画像コンポーネントの外部リンクを定義{width="250"}

    • ランディングページ – このタイプを選択すると、接続されているMarketo Engage インスタンス で公開されたランディングページが選択されます。

      ランディングページ」オプションで、公開されたランディングページを選択します。 ページを選択 アイコン ( ​ リンクを表示アイコン ​)をクリックし、公開されたランディングページを選択

      画像コンポーネントのランディングページへのリンクを定義{width="250"}

  2. Label​の場合、オプションで画像リンクの説明テキストを入力します。

  3. Target​の場合、リンク先をメールまたはページからリダイレクトする方法を選択します。

    • なし - デフォルトのブラウザーまたはクライアントの動作(デフォルト)を使用してリンクを開きます。
    • 空白 – 新しいウィンドウまたはタブでリンクを開きます。
    • 自分 – 同じフレームでリンクを開きます。
    • – 親フレーム内のリンクを開きます。
    • トップ - ウィンドウの本文のリンクを開きます。

スタイルの設定

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

背景
{{styles-background}}
境界
{{styles-border}}
サイズ
{{styles-size}}
配置
{{styles-alignment-h}}
マージン
{{styles-margin}}
パディング
{{styles-padding}}
アドバンス
{{styles-advanced}}

ソーシャル social

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

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

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

    ​ 「+」をクリックしてソーシャルメディアの種類を追加{width="250"}

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

各ソーシャルメディアの種類のカードを展開して、オプションを設定します。

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

拡張ソーシャルメディアタイプの設定{width="250"}

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

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

背景
{{styles-background}}
境界
{{styles-border}}
サイズ
{{styles-size}}
配置
{{styles-alignment-h}}
マージン
{{styles-margin}}
パディング
{{styles-padding}}
アドバンス
{{styles-advanced}}

フォーム(ランディングページのみ) form

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

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

    公開したフォームを選択{width="600"}

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

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

    • ページを維持 - フォームの送信時に訪問者を同じページに維持するには、このオプションを選択します。

    • ランディングページ - Marketo OptimizerまたはMarketo Engage ランディングページをフォローアップとして選択するには、このオプションを選択します。

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

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

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

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

{{styles-margin}}

recommendation-more-help
marketo-optimizer-help-user-guide