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

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

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

メモ

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

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

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

  1. AEM オーサーインスタンスにログインし、Adobe Experience Managerフォームフォームとドキュメント​に移動します。

  2. 新しいを作成するか、既存の対話型通信を開きます。

  3. プレビュー​オプションの隣の上部に表示されるドロップダウンリストから​レイアウト​を選択します。 フォームがレイアウトモードで表示されます。

    対話型通信のレイアウトモード

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

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

  2. レスポンシブグリッド内のコンポーネントの位置を定義する青いドットをドラッグ&ドロップします。

    レイアウトモードを使用したサイズ変更

    コンポーネントをタップした後に表示されるツールバーは、次のオプションで構成されます。

    • 親:コンポーネントの親を 選択します。
    • 新しい行に分離:同じ行に複数のコンポーネントがある場合は、コンポーネントを次の行に 移動します。

    「ブレークポイントを元に戻す」レイアウト「ブレークポイントを元に戻す」)オプションを使用して、すべてのサイズ変更を元に戻し、サイズ変更されたコンポーネントを含むパネルにデフォルトのレイアウトを適用できます。 サイズ変更したコンポーネントの親をタップして、表示を指定します。

    メモ

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

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

  1. 対話型通信のWebチャネルで編集モードを使用して、テーブルおよび画像コンポーネントを挿入します。 画像コンポーネントは、表コンポーネントの後に表示されます。

  2. レイアウトモードに切り替えて、表コンポーネントをタップします。 コンポーネントのサイズを変更する青い点は、列1と列12に表示されます。

  3. レスポンシブグリッドの列12の青い点を列6にドラッグ&ドロップします。

    テーブルの終点を定義する

  4. 同様に、「画像」コンポーネントを選択し、レスポンシブグリッドの列1から列7に青い点をドラッグ&ドロップします。 テーブルと画像コンポーネントは互いに平行に表示されます。

    レイアウトモードでのテーブルと画像の並行表示

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

パネルのサイズ変更

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

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

    レスポンシブグリッドの開始と端に青い点が表示されます。

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

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

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

  1. 編集​モードで、パネルをタップし、「設定」を選択します。次に、パネルレイアウト​ドロップダウンリストから「レスポンシブ — ページ上のすべて(ナビゲーションなし)」を選択します。

  2. 保存」をタップして、プロパティを保存します。

  3. レイアウト​モードで、パネル内の任意のコンポーネントをタップし、「親を選択」を選択して、パネルを選択します。

  4. 複数列をタップし、ドロップダウンリストから列数を選択します。 列数の範囲は1 ~ 12です。 パネルが複数列のレイアウトに分割されます。

レイアウトモードでの複数列

古いレスポンシブレイアウトを含むフォームのレイアウトモードを無効にする

古いレスポンシブレイアウトを含むフォームのレイアウトモードを無効にするには、フォームで使用するテンプレートのプロパティを編集します。

レイアウトモードを無効にするには、次の手順を実行します。

  1. ツール/一般/テンプレート​を選択し、フォームで使用されているテンプレートを​編集​モードで開きます。

  2. 左側のウィンドウでドキュメントコンテナを選択し、「ポリシー」をタップします。

    レイアウトモードを無効にする

  3. レイアウト設定」タブをタップし、「レイアウトモードを無効にする」を選択します。

  4. 変更を保存」をタップして、テンプレートのプロパティを保存します。

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now