ランディングページのデザイン designing-a-landing-page
ランディングページのコンテンツデザインのコンテンツデザインについて about-content-design
ランディングページは、任意のマーケティングアクティビティとして作成されます。
ランディングページをデザインする場合、ページそのもの、確認ページ、エラーページのコンテンツを定義する必要があります。アクションバーの下の切り替えボタンを使用して、各ページを表示し設定します。
ランディングページのコンテンツは、Campaign コンテンツエディターでデザインします。
ここでは、ランディングページコンテンツエディターに特有の事項について説明します。1 つ以上のマーケティングアクティビティに共通するアクションについて詳しくは、次の メールコンテンツのデザイン ガイドの節を参照してください。
ランディングページのコンテンツエディターインターフェイス landing-page-content-editor-interface
ランディングページコンテンツエディターを使用すると、Adobe Campaign でコンテンツを簡単に定義、変更およびパーソナライズできます。アクセスするには、ランディングページのダッシュボードで Content ブロックをクリックします。
コンテンツエディターは 3 つのセクションに分かれています。これらのセクションでは、コンテンツの表示と編集が可能です。
- 画面の左側の パレット を使用すると、選択したブロックにリンクされた一般オプションを変更できます。変更できるオプションは背景色、境界線、テキストの整列、表示条件などです。パーソナライゼーションフィールドの挿入を参照してください。
- アクションバー には、ページの一般的なオプションが含まれています。テンプレートを選択し、表示モードを変更できます。
- メイン 編集ゾーン では、コンテキストツールバーを使用して、コンテンツを直接操作できます。画像にリンクを挿入する、フォントを変更する、フィールドを削除するなどです。
アクションバー には、作成中のコンテンツを操作するための様々なボタンが含まれています。
ツールバー はエディターインターフェイスのコンテキスト要素で、選択したゾーンに応じて様々な機能を提供します。テキストのスタイルを変更するためのアクションボタンと各ボタンが含まれています。実行された変更は、常に選択したゾーンに適用されます。ブロックを選択すると、それを削除したり、複製したりできます。ブロック内のテキストを選択した後に、そのテキストをリンクに変えたり、太字にしたりできます。
ランディングページの構造とスタイルの管理 managing-landing-page-structure-and-style
コンテンツエディターでのブロックの管理 managing-blocks-in-the-content-editor
様々な HTML コンテンツ要素がブロック（<div> </div> タグに対応）としてランディングページに表示されます。操作するブロックを選択します。そのブロックが青いボックスで囲まれます。
ブロックを選択した場合、対応する HTML 要素の親オブジェクトが、編集ゾーンの下部にあるパンくずリストに表示されます。
パンくず要素の 1 つにマウスを合わせると、関連する要素がハイライト表示されます。したがって、様々なブロック間を簡単に移動でき、変更する HTML 要素を正確に選択できます。
パレットとコンテキストツールバーのオプションを使用すると、ブロックの変更、削除、複製をおこなえます。
テキストを含むブロックの場合は、ブロック内を再度クリックして、テキスト編集モードを有効にします。ブロックの周りのフレームが緑色に変わります。その後、テキストを選択または入力できます。パレットとコンテキストツールバーのオプションを使用すると、リンクを追加したり、テキストの書式設定を変更したりできます。
ブロック内の要素（リンク、パーソナライゼーションフィールド、コンテンツブロックなど）に対して定義されたパラメーターは、パレットからいつでも変更できます。
コンテンツエディターでの境界線と背景の追加 adding-a-border-and-a-background-in-the-content-editor
また、チャートから色を選択することで、背景色 を定義できます。この色は、選択したブロックに適用されます。
選択したブロックに 境界線 を追加できます。
コンテンツエディターでのテキストスタイルの変更 changing-the-text-style-in-the-content-editor
テキストのスタイルを変更するには、テキストブロック内をクリックする必要があります。
テキストの整列を変更するには、左側のパレットで次の 3 つのアイコンのいずれかを選択します。
- 左揃え：選択されたブロックの左側にテキストを揃えます（style="text-align: left;" を追加します）。
- 中央揃え：選択されたブロック内のテキストを中央に配置します（style="text-align: center;" を追加します）。
- 右揃え：選択されたブロックの右側にテキストを揃えます（style="text-align: right;" を追加します）。
ツールバーを使用してフォント属性を変更することもできます。フォントサイズを調整し、テキストを太字または斜体にしたり、テキストに下線を引いたり、テキストの色を変更したりします。こちらの節を参照してください。
ランディングページへの画像の挿入 inserting-images-in-a-landing-page
-
ランディングページコンテンツで、画像を含んだブロックを選択します。
-
「Insert」ボタンをクリックします。
-
コンテキストツールバーから「Local image」を選択します。
-
ファイルを選択します。
-
必要に応じて画像のプロパティを調整します。
ランディングページでの動的コンテンツの定義 defining-dynamic-content-in-a-landing-page
ランディングページに動的コンテンツを定義するには、パンくずリストを使用するか要素を直接クリックして、ブロックを選択します。
画像などの特定のブロックは直接選択できません。その場合は、パンくずリストを使用して親ブロックを選択します。その後、この親要素に含まれるすべての要素（画像を含む）を変更できます。この条件は、親ブロック内のすべての子要素に適用されます。
パンくずリストについては、ブロックの管理の節を参照してください。
ランディングページに動的コンテンツを定義するための次の手順は、メールの場合と似ています。こちらの節を参照してください。
ブロックの様々は動的コンテンツ間を移動できます。手順は次のとおりです。
-
ブロックを選択します。
画像の右側と左側に矢印が表示されます。
-
右向き矢印をクリックして、使用可能な動的コンテンツを参照します。
使用可能な最後の動的コンテンツに達したか、最初の動的コンテンツに達したかに応じて、片側の矢印が淡色表示されます。
-
ブロックに適用されたすべての条件を削除するには、そのブロックを選択し、「Disable dynamic content」アイコンをクリックします。
-
保持する動的コンテンツを選択します。
パレット内は次のようになります。
- 式が入力されているコンテンツは、赤くアウトライン表示されなくなり、灰色で表示されます。
- 現在選択されているコンテンツは青色で表示されます。
