レイアウトモードを使用してコンポーネントのサイズを変更する

Interactive Communication Webチャネルオーサリングインターフェイスを使用すると、レイアウトモードを使用してコンポーネントのサイズを変更できます。列内に青い点をドラッグ&ドロップして、コンポーネントを配置する開始と終点を定義します。レスポンシブグリッド内のコンポーネントをタップすると、青いドットが表示されます。レスポンシブグリッドは、12列に等しくなっています。代替列の白と青の色の陰影は、1つの列と他の列を区別します。

レイアウトモードを使用すると、デスクトップ、タブレット、スマートフォン、その他の小さいデバイスなど、すべての種類のデバイスのコンポーネントのサイズを変更できます。タブレットはデスクトップバージョンからレイアウト設定を自動的に引き継ぎ、小さいデバイスはスマートフォンからレイアウト設定を引き継ぎます。ただし、自動的に生成された設定を上書きして、デバイスタイプごとに異なる設定を定義することができます。

メモ

対話型通信用に印刷チャネルをマスターとして使用してWebチャネルを作成する場合、サイズ変更に使用できるコンポーネントには、印刷チャネルを使用してWebチャネルで自動生成されるサブフォームやフィールドも含まれます。 Webチャネルは、印刷チャネル要素のレイアウトをレイアウトモードで保持します。

レイアウトモードにアクセス

プレビューオプションの横にあるInteractive Communicationオーサリングインターフェイスの上部に表示されるドロップダウンリストからレイアウトを選択します。フォームがレイアウトモードで表示されます。

AEM オーサーインスタンスにログインし、Adobe Experience Manager／フォーム／フォームとドキュメントに移動します。
新しいを作成するか、既存の対話型通信を開きます。
プレビューオプションの隣の上部に表示されるドロップダウンリストからレイアウトを選択します。フォームがレイアウトモードで表示されます。

コンポーネントのサイズ変更

レイアウトモードで、サイズを変更するコンポーネントをタップします。レスポンシブグリッドの開始と端に青い点が表示されます。
レスポンシブグリッド内のコンポーネントの位置を定義する青いドットをドラッグ&ドロップします。

コンポーネントをタップした後に表示されるツールバーは、次のオプションで構成されます。
- 親：コンポーネントの親を 選択します。
- 新しい行に分離：同じ行に複数のコンポーネントがある場合は、コンポーネントを次の行に 移動します。
「ブレークポイントを元に戻す」レイアウト（）オプションを使用して、すべてのサイズ変更を元に戻し、サイズ変更されたコンポーネントを含むパネルにデフォルトのレイアウトを適用できます。サイズ変更したコンポーネントの親をタップして、表示を指定します。

メモ

レイアウトモードを使用して、テーブルの列、ツールバー、ツールバーボタン、ターゲット領域のコンポーネントのサイズを変更することはできません。スタイルモードを使用して、これらのコンポーネントのサイズを変更します。

例

目的： 表コンポーネントと画像コンポーネントを挿入し、対話型通信でそれらを互いに平行に配置する

対話型通信のWebチャネルで編集モードを使用して、テーブルおよび画像コンポーネントを挿入します。画像コンポーネントは、表コンポーネントの後に表示されます。
レイアウトモードに切り替えて、表コンポーネントをタップします。コンポーネントのサイズを変更する青い点は、列1と列12に表示されます。
レスポンシブグリッドの列12の青い点を列6にドラッグ&ドロップします。
同様に、「画像」コンポーネントを選択し、レスポンシブグリッドの列1から列7に青い点をドラッグ&ドロップします。テーブルと画像コンポーネントは互いに平行に表示されます。

画像コンポーネントを選択し、ツールバーにある「新しい行にフロート」オプションをタップして、画像コンポーネントを次の行に移動できます。

パネルのサイズ変更

個々のコンポーネントではなくパネル全体のサイズを変更する場合は、次の手順を実行します。

パネル内でサイズを変更するコンポーネントのいずれかをタップし、「」を選択して、ドロップダウンリストの最初のオプションを選択します（パネルがコンポーネントの直接の親である場合）。

レスポンシブグリッドの開始と端に青い点が表示されます。
レスポンシブグリッド内でのパネルの位置を定義するには、青いドットをドラッグ&ドロップします。
手順1と2を繰り返し、「」を選択して、サイズ変更したパネルを次の行に移動できます。

パネルの複数列レイアウトの定義

次の手順を実行して、パネルの列数を定義します。

編集モードで、パネルをタップし、「」を選択します。次に、パネルレイアウトドロップダウンリストから「レスポンシブ — ページ上のすべて（ナビゲーションなし）」を選択します。
「」をタップして、プロパティを保存します。
レイアウトモードで、パネル内の任意のコンポーネントをタップし、「」を選択して、パネルを選択します。
をタップし、ドロップダウンリストから列数を選択します。列数の範囲は1 ～ 12です。パネルが複数列のレイアウトに分割されます。