コンテンツコンポーネント content-components
メール、ランディングページ、テンプレート、ビジュアルフラグメントのコンテンツをデザインする場合は、 コンテンツコンポーネント を使用してビジュアルデザイン要素を追加します。
レイアウトを定義する1つ以上の構造コンポーネント 内に、必要な数のコンテンツコンポーネントを追加できます。
コンテンツライブラリ
コンポーネントライブラリのContents セクションには、使用可能なコンテンツコンポーネントが表示されます。
コンテンツコンポーネントツールバー
各コンテンツコンポーネントタイプは、キャンバスで選択したときにツールバーを表示します。 使用可能なツールは、コンポーネントタイプによって異なりますが、レンダリングされたコンテンツ内でコンポーネントを直接操作する簡単な方法を提供します。 ツールバーには、コンポーネントタイプに適用できる書式設定機能と機能機能が含まれています。
{width="450"}
書式設定ツール
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| ツール | 使用方法 | コンポーネント |
|
|
選択したテキスト文字列に、太字、斜体、下線、取り消し線、上付き文字、下付き文字を適用します。 |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| ツール | 使用方法 | コンポーネント |
|
|
コンポーネントコンテンツに水平配置タイプを適用します。 左、中央揃え、右または両端揃えを選択します。 |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| ツール | 使用方法 | コンポーネント |
|
|
コンポーネントテキストに順序付きリストまたは順序付きリストの書式を適用します。 |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| ツール | 使用方法 | コンポーネント |
|
|
カーソル位置の段落に見出しレベルの書式を適用します。 |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| ツール | 使用方法 | コンポーネント |
|
|
選択したテキストにフォントサイズを適用します。 ツールをクリックし、サイズを選択するか、px値を入力します。 |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| ツール | 使用方法 | コンポーネント |
|
|
選択したテキストにフォントカラーを適用します。 ピッカーからカラーを選択し、カラースライダーとカラーフィールドを使用してカラーを選択します。 または、既知のRGB、HSL、HSB、または16進数値を入力することもできます。 |
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| ツール | 使用方法 | コンポーネント |
|
|
選択したテキストまたは要素のクリック可能なリンクを作成します。
|
|
| table 0-row-3 1-row-3 html-authored | ||
|---|---|---|
| ツール | 使用方法 | コンポーネント |
|
|
選択したテキストまたは要素のクリック可能なリンクを削除します。 |
|
機能ツール
デザインにコンテンツコンポーネントを追加する
-
ビジュアルデザイン空間で、既存のテンプレートを使用するか、必要な構造コンポーネントを空のキャンバスに追加してレイアウトを定義します。
-
コンポーネント ライブラリで、選択したコンテンツコンポーネントのドラッグハンドル
を取得し、それを構造コンポーネントにドラッグ&ドロップします。
単一の構造コンポーネントおよび構造コンポーネントの各列に複数のコンポーネントを追加できます。
{width="600" modal="regular"}
-
右側の 設定 およびスタイル タブ、またはキャンバスに表示されるコンテキストツールバーを使用して、コンポーネントの表示を調整します。
例えば、コンポーネントのテキストスタイル、パディング、マージンを変更できます。
{width="600" modal="regular"}
デザインの作業中に、機能ツール セクションの 削除 および複製 ツールを使用して、コンポーネントを削除または複製することもできます。
コンテンツコンポーネントの設定とスタイル
コンポーネントを追加すると、ビジュアルデザインスペースでコンポーネントが選択され、右側のパネルにそのプロパティが表示されます。 また、いつでもコンポーネントを選択して、設定やスタイルを変更することもできます。 多くの設定やスタイルはコンポーネントに固有ですが、選択したコンテンツコンポーネントに適用できる標準設定やスタイルがいくつかあります。
表示オプション
デスクトップまたはモバイルデバイスの表示からコンポーネントを除外する場合は、表示オプション設定を変更します。 デフォルトの すべてのデバイスに表示 では、すべてのデバイスで表示が有効になります。 別の設定を選択して、デバイスタイプ別にコンポーネントを排他的にします。
- デスクトップデバイスでのみ表示 - コンポーネントをデスクトップデバイスに表示し、モバイルデバイスに対して除外する場合は、この設定を選択します。
- モバイルデバイスでのみ表示 – この設定は、スマートフォンやタブレットなどのモバイルデバイスにコンポーネントを表示し、デスクトップデバイスに対しては除外する場合に選択します。
{width="400" modal="regular"}
コンテナ container
コンテナを使用して、コンテンツコンポーネントのグループに特定のスタイルを適用します。 Container コンポーネントを追加してから、その中に他のコンテンツコンポーネントを追加します。 このコンポーネントは、HTMLでdiv要素を使用する方法と似ています。 コンテナに含まれるコンテンツコンポーネントに適用されるスタイルとは異なる、明確なスタイルをコンテナに適用できます。
例えば、コンテナコンポーネントを追加してから、 ボタンコンポーネントをそのコンテナ内に追加します。 コンテナに特定のエリアのスタイル設定を使用し、必要に応じてボタンとその背景のスタイルを設定できます。
{width="600" modal="regular"}
ボタン button
ボタン コンポーネントを使用して、1つまたは複数のクリック可能なボタンをコンテンツに挿入します。 ボタンを使用して、ページビューアまたはメール受信者をサポートコンテンツ(公開されたランディングページまたは外部リンク)にリダイレクトします。
ボタンのテキストを追加
ボタンコンポーネントがキャンバスに表示されると、ツールバーには、テキスト書式設定のオプションと、パーソナライゼーションおよび条件付きバリアントが含まれます。 エディターツールバーのオプションについて詳しくは、 コンテンツコンポーネントツールバーを参照してください。
ボタンのラベルテキストを入力して書式を設定すると、コンテンツに合わせてボタンのサイズが変更されます。
{width="500" modal="regular"}
リンクオプションの設定 button-set-link-options
「設定」タブで、リンク オプションを使用して、ボタンのテキスト、リンク先、およびターゲットページを読み込むためのブラウザーの動作を定義します。
-
リンクの Type を設定します。
-
外部リンク – 標準URLをリンク先として使用するには、このタイプを選択します。
Urlに、リンク先のURLを入力します。 パーソナライズ (
)アイコンをクリックして、パーソナライゼーショントークンをURLのパラメーターとして使用します。
{width="200"}
-
ランディングページ – このタイプを選択すると、接続されているMarketo Engage インスタンス で公開されたランディングページが選択されます。
「ランディングページ」オプションで、公開されたランディングページを選択します。 ページを選択 アイコン (
)をクリックし、公開されたランディングページを選択。
{width="200"}
-
-
Labelに、ボタン内に表示するテキストを入力します。
ボタンのサイズは、テキストと設定したスタイルに従って調整されます。
-
Targetの場合、リンク先をメールまたはページからリダイレクトする方法を選択します。
- なし - デフォルトのブラウザーまたはクライアントの動作(デフォルト)を使用してリンクを開きます。
- 空白 – 新しいウィンドウまたはタブでリンクを開きます。
- 自分 – 同じフレームでリンクを開きます。
- 親 – 親フレーム内のリンクを開きます。
- トップ - ウィンドウの本文のリンクを開きます。
スタイルを設定
「スタイル」タブでボタンのスタイル設定をカスタマイズします。
テキスト text
テキストコンポーネントを使用して、コンテンツにテキストブロックを挿入します。 テキストコンポーネントがキャンバスで選択されている場合は、テキストを入力し、ツールバーオプションを使用して、インラインの書式設定と、パーソナライゼーショントークンや条件付きバリアントなどのオプションを追加します。
「スタイル」タブで、テキストコンポーネントのスタイル設定をカスタマイズします。
これらのスタイルは、テキストブロック全体に適用されます。 選択したテキスト文字列にインラインスタイルを適用できます。
{{styles-text}}
ディバイダー divider
Divider コンポーネントを追加して、コンテンツのセクション間に線形の除算を組み込みます。
「スタイル」タブが選択された右側のパネルで、行 セクションを展開し、コンポーネントの高さと幅のオプションを設定します。
-
カラー - カラーの正方形をクリックして、ピッカーからカラーを選択します。 RGB、HSL、HSB、または16進数値を入力すると、カラーを選択できます。 または、カラースライダーとカラーフィールドを使用してカラーを選択することもできます。
-
高さ – 上下の矢印アイコンをクリックして、ピクセル数を増減します。 空の値(Auto)がデフォルトで、要素の高さが要素の内容に応じてサイズ調整されます。
-
幅 - トグルを使用して、幅をピクセルまたはパーセント単位で設定します。
- パーセンテージ幅の場合は、スライダーを使用してパーセンテージ値を設定します。 パーセンテージは、含まれるブロックのコンテンツボックスに基づいてエレメントのサイズを決定します。このボックスでは、パディングと境界線は除外されます。 例えば、値が50の場合、要素の幅は、含まれるブロックコンテンツの幅の50%に設定されます。
{width="250"}
- ピクセルベースの幅の場合は、上下の矢印アイコンをクリックして、ピクセル数を増減します。 空の値(Auto)がデフォルトで、要素の幅を内容に応じてサイズ調整します。
-
スタイル - Solid、Dotted、Dashedなど、標準CSS
line-style値のリストから値を選択します。
HTML html
HTML コンポーネントを使用して、既存のHTMLの一部を追加します。 このコンポーネントを使用すると、外部コンテンツを再利用するHTMLのモジュール要素を簡単に作成できます。
-
キャンバス上のコンポーネントを選択し、ツールバーの「ソースコードを表示」アイコンをクリックします。
{width="450"}を追加します
-
テキストボックスにHTMLを貼り付け、保存をクリックします。
{width="600" modal="regular"}
HTMLが有効な場合は、カンバス上にエレメントがレンダリングされます。 他のコンテンツコンポーネントのいずれかにマッピングするエレメントの場合は、コンポーネントタイプに応じて右側のパネルの設定とスタイルを変更できます。 そうでない場合は、HTML コンポーネントとして残ります。
HTML コンポーネントの場合、右側のパネルで、HTML コンポーネント全体に対して次のスタイルを設定できます。
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"}
リンクオプションの設定 image-set-link-options
設定 タブで、リンク オプションを使用して、画像を宛先とリンクさせ、ターゲットページを読み込むためのブラウザーの動作を行います。
-
リンクの Type を設定します。
-
外部リンク – 標準URLをリンク先として使用するには、このタイプを選択します。
Urlに、リンク先のURLを入力します。 パーソナライズ (
)アイコンをクリックして、パーソナライゼーショントークンをURLのパラメーターとして使用します。
{width="250"}
-
ランディングページ – このタイプを選択すると、接続されているMarketo Engage インスタンス で公開されたランディングページが選択されます。
「ランディングページ」オプションで、公開されたランディングページを選択します。 ページを選択 アイコン (
)をクリックし、公開されたランディングページを選択。
{width="250"}
-
-
Labelの場合、オプションで画像リンクの説明テキストを入力します。
-
Targetの場合、リンク先をメールまたはページからリダイレクトする方法を選択します。
- なし - デフォルトのブラウザーまたはクライアントの動作(デフォルト)を使用してリンクを開きます。
- 空白 – 新しいウィンドウまたはタブでリンクを開きます。
- 自分 – 同じフレームでリンクを開きます。
- 親 – 親フレーム内のリンクを開きます。
- トップ - ウィンドウの本文のリンクを開きます。
スタイルの設定
右側のパネルで、画像コンポーネントのスタイルを設定します。
ソーシャル social
ソーシャル コンポーネントを使用して、ソーシャルメディアページへのリンクをコンテンツに挿入します。 3つのデフォルトのソーシャルメディアタイプが含まれていますが、ニーズに応じてタイプを追加または削除できます。
{width="600" modal="regular"}
-
ソーシャルメディアタイプを追加するには、追加 (+)アイコンをクリックし、追加するソーシャルメディアタイプを選択します。
{width="250"}
-
ソーシャルメディアの種類を削除するには、ソーシャルメディアアイコンの横にある X をクリックします。
各ソーシャルメディアの種類のカードを展開して、オプションを設定します。
- URL - ソーシャルメディアのグラフィックまたはアイコンにリンクするソーシャルメディア URLを入力します。
- Source - デフォルトではなく独自の画像を使用する場合は、画像アセットを選択します。 Assets ライブラリから画像を選択するか、システムから画像ファイルを読み込むことができます。 画像アセットの選択と読み込みについて詳しくは、画像コンポーネント情報を参照してください。
- 代替テキスト – 表示される画像の代替テキストを入力します。
{width="250"}
すべてのソーシャルメディアグラフィックに対して一貫した表示サイズを定義するには、画像のサイズを設定します。
ソーシャル コンポーネントには、次のスタイルオプションを設定できます。
フォーム(ランディングページのみ) form
Form コンポーネントを使用して、公開したフォームをランディングページまたはランディングページテンプレートに追加します。 フォームの作成と公開について詳しくは、Formsを参照してください。
-
コンポーネントツールバーのForm ツールをクリックするか、右側の埋め込みフォーム プロパティを使用して、公開されたフォームを選択します。
{width="600"}
-
フォームのデフォルトの フォローアップタイプ を上書きする場合は、ページまたはテンプレートの要件に従って設定を変更します。
このページは、フォームの ありがとうページ とも呼ばれ、この設定により、訪問者がフォームを送信したときに何が起こるかが決まります。
-
ページを維持 - フォームの送信時に訪問者を同じページに維持するには、このオプションを選択します。
-
ランディングページ - Marketo OptimizerまたはMarketo Engage ランディングページをフォローアップとして選択するには、このオプションを選択します。
-
外部URL – 任意のURLをフォローアップページとして指定するには、このオプションを選択します。 訪問者がフォームを送信すると、ブラウザーは指定されたURLを読み込みます。
note tip TIP フォームを使用してファイルをダウンロードする場合は、ホストされているファイルのURLを指定できます。 この設定では、送信ボタンはダウンロードボタンとして機能します。 {width="280"}
-
必要に応じて、右側のパネルで「スタイル」タブを選択し、構造コンポーネント内のフォームマージンを設定します。
{{styles-margin}}