構造コンポーネント structure-components
ビジュアルデザイン空間で 構造コンポーネント を使用して、コンテンツの構造を定義します。 シンプルなドラッグ&ドロップ操作で構造要素を追加、移動することで、コンテンツレイアウトの形状をすばやく定義できます。 それぞれの構造コンポーネントは水平方向のスペースにまたがり、それらを積み重ねて垂直方向にレイアウトを構築できます。 各コンポーネントを列に分けて、必要な各コンテンツブロックを作成します。
構造ライブラリ
コンポーネント ライブラリの上部にある構造 セクションには、使用可能な構造コンポーネントが表示されます。
構造コンポーネントを追加
メール、ランディングページ、フラグメントのコンテンツをデザインする際には、それぞれの構造コンポーネントを追加してレイアウトを作成します。 左側の構造 セクションから項目をドラッグし、キャンバスにドロップします。 ツールバーを使用して列を選択し、右側のパネルの「設定」タブと「スタイル」タブを使用して、選択したコンポーネントまたは列のパラメーターを定義できます。
コンポーネントツールバー
ツールバーは、カンバスで選択したときにカンバスに表示されます。 使用可能なツールを使用すると、列を選択してコンポーネント関数を適用する簡単な方法を提供できます。
コンポーネント設定
コンポーネントを追加すると、ビジュアルデザインスペースでコンポーネントが選択され、右側のパネルにそのプロパティが表示されます。 デフォルトでは、設定 タブが表示されます。 また、いつでも構造コンポーネントを選択して、設定を変更することもできます。
表示オプション
デスクトップまたはモバイルデバイスの表示からコンポーネントを除外する場合は、表示オプション設定を変更します。 デフォルトの すべてのデバイスに表示 では、すべてのデバイスで表示が有効になります。
別の設定を選択して、デバイスタイプ別にコンポーネントを排他的にします。
- デスクトップデバイスでのみ表示 - コンポーネントをデスクトップデバイスに表示し、モバイルデバイスに対して除外する場合は、この設定を選択します。
- モバイルデバイスでのみ表示 – この設定は、スマートフォンやタブレットなどのモバイルデバイスにコンポーネントを表示し、デスクトップデバイスに対しては除外する場合に選択します。
ヘッダーとフッター
構造コンポーネントは、メールメッセージまたはランディングページのHTML ヘッダーまたはフッターとして指定できます。 キャンバスで構造コンポーネントを選択した状態で、ヘッダーまたはフッター オプションをクリックします。 ヘッダーまたはフッターは1つだけ指定でき、別のコンポーネントが割り当てられている場合、このオプションは使用できません。
ヘッダーまたはフッターの指定を削除するには、コンポーネントを選択し、オプションをクリックして削除します。
積み重ね列
小さい画面または表示ウィンドウの場合、デフォルト設定を変更しない限り、構造コンポーネントの列は積み重ねとして表示されます。 複数列構造コンポーネントを選択した状態で、切り替えスライダーを右に移動して、モバイルで列をスタックしない設定を変更します。
コンポーネントスタイル
コンポーネントを追加すると、ビジュアルデザインスペースでコンポーネントが選択され、右側のパネルにそのプロパティが表示されます。 また、いつでもコンポーネントを選択して、設定やスタイルを変更することもできます。
背景
右側のパネルで「スタイル」タブを選択した状態で、背景 セクションを使用して、構造コンポーネントの背景として使用するカラーとオプションの画像を定義します。
背景色
チェックボックスを選択し、カラーの正方形をクリックして、ピッカーからカラーを選択します。 RGB、HSL、HSB、または16進数値を入力すると、カラーを選択できます。 または、カラースライダーとカラーフィールドを使用してカラーを選択します。
背景画像
切り替えセレクターを移動して、背景画像の設定を有効にします。
アセットソースタイプ を選択し、画像ファイルを選択します。
Journey Optimizer B2B edition ライブラリまたは接続されたMarket Engage インスタンスから画像アセットを参照して選択するには、このタイプを選択します。
ダイアログから、選択したリポジトリから画像を選択できます。 「選択」をクリックして、アセットを追加します。
必要なアセットを見つけるのに役立つツールがあります。
-
左上のフィルター アイコンをクリックして、条件に従って表示される項目をフィルタリングします。
-
「検索」フィールドにテキストを入力して、アセット名に一致する表示アイテムをフィルタリングします。
このタイプを選択すると、設定されたExperience Manager Assets リポジトリ から画像アセットを参照して選択できます。
「Assetsを選択」ダイアログで、使用可能なツールを使用して画像を選択し、必要なアセットを見つけて「選択」をクリックします。
-
右上の リポジトリ を変更します。
-
右上の アセットの管理 をクリックして、別のブラウザータブでAssets リポジトリを開き、AEM Assets管理ツールを使用します。
-
右上の表示タイプ セレクターをクリックして、表示をリストビュー、グリッドビュー、ギャラリービュー、または ウォーターフォールビュー に変更します。
-
「並べ替え順序」アイコンをクリックして、並べ替え順序を昇順と降順で変更します。
-
「並べ替え」メニューの矢印をクリックして、並べ替え条件を名前、サイズ、または 変更 に変更します。
-
左上のフィルター アイコンをクリックして、条件に従って表示される項目をフィルタリングします。
-
「検索」フィールドにテキストを入力して、アセット名に一致する表示アイテムをフィルタリングします。
このタイプを選択すると、システムからファイルが選択され、Journey Optimizer B2B edition アセットライブラリに読み込まれます。
画像をアップロード ダイアログで、システムからファイルをファイル ボックスにドラッグ&ドロップします。 最大ファイルサイズは100 MBです。
選択した画像のファイル名がダイアログに表示されます。 アセットファイル名は（フォルダー間で）一意である必要があり、名前のファイルが既に存在する場合は、メッセージが表示されます。 名前の最大文字数は100文字です。特殊文字（;、:、\、|など）を含めることはできません。
「読み込み」をクリックします。
画像の配置 オプションを使用して、画像が構造コンポーネントをどのように塗りつぶすかを選択します。 プレースメント設定は、標準のHTML背景画像塗りつぶしと整列属性に従います。
その他のスタイル
その他の構造コンポーネントスタイルを適用して、メールメッセージまたはランディングページでの表示を調整できます。
-
「スタイル」タブが選択された右側のパネルで、境界線 セクションを展開し、コンポーネントの境界線を表示するオプションを設定します。
-
境界線の表示オプションを有効にするには、切り替えスイッチを右に動かし、デザイン基準に従って設定します。
- 境界線カラーを設定するには、チェックボックスを選択し、カラーの正方形をクリックしてピッカーからカラーを選択します。 RGB、HSL、HSB、または16進数値を入力すると、カラーを選択できます。 または、カラースライダーとカラーフィールドを使用してカラーを選択することもできます。
-
境界線サイズ （線幅）を設定するには、上下の矢印アイコンをクリックして、ピクセル数を増減します。
-
境界線スタイルを設定するには、標準CSS
border-style値のリストから値を選択します。 -
境界線が表示される場所を決めるには、各境界線の位置 チェックボックスを選択します。
-
境界線の半径に対して、角に対する曲線に応じて数値を設定します。
値が0 （デフォルト）の場合、角は四角形になります。
「スタイル」タブが選択された右側のパネルで、マージン セクションを展開し、構造コンポーネント内のマージン間隔のオプションを設定します。 このスタイルは、コンポーネントの境界線の外側のスペースに制御するCSS margin パラメーターを複製し、他のコンポーネントから分離します。 コンポーネントの周囲にギャップを作成して、コンポーネントの位置と周囲のコンテンツのレイアウトに影響を与えます。
デザインのニーズに応じて、余白の値をピクセル単位で設定します。 コンポーネントのすべての辺、上端、左右、または各辺のマージンを個別に設定できます。
-
すべての辺 – すべての辺に適用する値を1つ設定するには、各辺の異なる余白 チェックボックスをオフにします。 上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。
-
Top-bottom – 上下の余白を同じ値に設定するには、上下の設定の間にロック アイコンを設定します。 上下の矢印アイコンをクリックして、ピクセル数を増減します。
-
左から右 – 左右の余白を同じ値に設定するには、左右の設定の間にロック アイコンを設定します。 上下の矢印アイコンをクリックして、ピクセル数を増減します。
-
独立 – 各余白を独立した値に設定するには、上下の設定と左右の設定の間にロック解除 アイコンを設定します。 各設定で、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。
値を含むCSSに準拠する属性を追加で適用するには、詳細 スタイル設定を使用します。 既存の属性の値を変更したり、新しい属性を追加したりできます。 スタイル設定は、親子コンポーネント（要素）のCSS継承モデルを使用してコンポーネントに適用されます。
表示される属性には、コンポーネントに対して現在定義されているスタイルが反映されます。 値は、CSS定義に従って変更できます。 追加 （+）アイコンをクリックして、コンポーネントの新しいスタイル属性を追加します。
列
コンポーネントツールバーの「列を選択」ツールを使用して、列を選択します。 次に、列ツールバーを使用して、列の選択を変更したり、列を削除したり、列に条件付きコンテンツのバリエーションを適用したりできます。 列のパラメーターは、右側の設定 タブとスタイル タブに表示されます。
n:n列を変更
列の幅は、ほとんどの構造コンポーネントで静的です。 n:n列 コンポーネントを追加すると、列数と列サイズを変更できます。 n:n列コンポーネントは、幅が同じ5列（20%）で始まります。
カンバスでコンポーネントを選択した状態で、右側のパネルの「列数」オプションを使用して、列数を変更します。 上下の矢印アイコンをクリックして、列数を増減するか、フィールドに数値を入力します。
カンバスで、列サイズ アイコンを移動して、選択した列の幅を調整します。 幅を増減すると、隣接する列も調整され、すべての列がコンポーネント幅の100%を占めるようになります。
列スタイル
カンバスで列を選択した状態で、その列に適用するスタイルを設定できます。
-
背景色 - チェックボックスを選択し、色の正方形をクリックして、ピッカーから色を選択します。 RGB、HSL、HSB、または16進数値を入力すると、カラーを選択できます。 または、カラースライダーとカラーフィールドを使用してカラーを選択することもできます。
-
背景画像 - トグルセレクターを移動して、背景画像設定を有効にします。
アセットソースタイプを選択し、画像ファイルを選択。
-
「スタイル」タブが選択された右側のパネルで、境界線 セクションを展開し、コンポーネントの境界線を表示するオプションを設定します。
-
境界線の表示オプションを有効にするには、切り替えスイッチを右に動かし、デザイン基準に従って設定します。
- 境界線カラーを設定するには、チェックボックスを選択し、カラーの正方形をクリックしてピッカーからカラーを選択します。 RGB、HSL、HSB、または16進数値を入力すると、カラーを選択できます。 または、カラースライダーとカラーフィールドを使用してカラーを選択することもできます。
-
境界線サイズ （線幅）を設定するには、上下の矢印アイコンをクリックして、ピクセル数を増減します。
-
境界線スタイルを設定するには、標準CSS
border-style値のリストから値を選択します。 -
境界線が表示される場所を決めるには、各境界線の位置 チェックボックスを選択します。
-
境界線の半径に対して、角に対する曲線に応じて数値を設定します。
値が0 （デフォルト）の場合、角は四角形になります。
「線形」セクションを展開し、使用する垂直方向の整列（上、中、下）を選択します。 このスタイルは、標準のvertical-align CSS スタイルに変換され、含まれるコンポーネント内での配置に影響します。
「スタイル」タブが選択された右側のパネルで、マージン セクションを展開し、構造コンポーネント内のマージン間隔のオプションを設定します。 このスタイルは、コンポーネントの境界線の外側のスペースに制御するCSS margin パラメーターを複製し、他のコンポーネントから分離します。 コンポーネントの周囲にギャップを作成して、コンポーネントの位置と周囲のコンテンツのレイアウトに影響を与えます。
デザインのニーズに応じて、余白の値をピクセル単位で設定します。 コンポーネントのすべての辺、上端、左右、または各辺のマージンを個別に設定できます。
-
すべての辺 – すべての辺に適用する値を1つ設定するには、各辺の異なる余白 チェックボックスをオフにします。 上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。
-
Top-bottom – 上下の余白を同じ値に設定するには、上下の設定の間にロック アイコンを設定します。 上下の矢印アイコンをクリックして、ピクセル数を増減します。
-
左から右 – 左右の余白を同じ値に設定するには、左右の設定の間にロック アイコンを設定します。 上下の矢印アイコンをクリックして、ピクセル数を増減します。
-
独立 – 各余白を独立した値に設定するには、上下の設定と左右の設定の間にロック解除 アイコンを設定します。 各設定で、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。
値を含むCSSに準拠する属性を追加で適用するには、詳細 スタイル設定を使用します。 既存の属性の値を変更したり、新しい属性を追加したりできます。 スタイル設定は、親子コンポーネント（要素）のCSS継承モデルを使用してコンポーネントに適用されます。
表示される属性には、コンポーネントに対して現在定義されているスタイルが反映されます。 値は、CSS定義に従って変更できます。 追加 （+）アイコンをクリックして、コンポーネントの新しいスタイル属性を追加します。
ナビゲーションツリー
ビジュアルデザイン空間では、ナビゲーションツリーを使用して、列やコンテンツなどの構造コンポーネントにアクセスできます。 左側のナビゲーションツリー アイコン（
Body要素は、ツリー構造のルートです。 ツリー内のコンポーネントまたは列の子要素のいずれかをクリックして、キャンバス上で選択します。 右側の設定 タブとスタイル タブには、そのコンポーネントまたは列のパラメーターが表示されます。
