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

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

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

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

アダプティブフォーム作成インターフェイスの上部で、プレビュー​オプションの横に表示されるドロップダウンリストから「レイアウト」を選択します。 フォームがレイアウトモードで表示されます。

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

  2. 新規作成するか、既存のアダプティブフォームを開きます。

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

    レイアウトモード

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

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

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

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

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

    • :コンポーネントの親を選択します。
    • ブレークポイントのレイアウトを元に戻す:すべてのサイズ変更を元に戻し、コンポーネントにデフォルトのレイアウトを適用します。
    • 新しい行に分離:同じ行内に複数のコンポーネントがある場合は、コンポーネントを次の行に移動します。

    また、パネルレベルで「ブレークポイントを元に戻すブレークポイントを元に戻す)」オプションを使用して、すべてのサイズ変更を元に戻すこともできます。

    メモ

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

目的:表コンポ ーネントと画像コンポーネントを挿入し、アダプティブフォームで互いに平行に配置する

  1. アダプティブフォームで編集モードを使用して表および画像のコンポーネントを挿入します。 画像コンポーネントは、表コンポーネントの後に表示されます。

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

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

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

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

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

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

パネルのサイズ変更

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

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

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

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

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

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

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

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

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

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

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

古いレスポンシブレイアウト用の新しいレスポンシブグリッドを有効にする

AEM Forms6.4以前のバージョンを使用して作成するフォームで、新しいレスポンシブグリッドを有効にして、コンポーネントのサイズを変更します。

メモ

新しいレスポンシブグリッドに切り替えると、フォームで使用されているコンポーネントに対して既に定義されているレイアウトプロパティが破棄されます。

次の手順を実行して、新しいレスポンシブグリッドを有効にします。

  1. プレビュー​オプションの隣の上部に表示されるドロップダウンリストから​レイアウト​を選択します。 レイアウトモードを有効にするための確認メッセージが表示されます。
  2. はい」をタップして、フォームの​レイアウト​モードを有効にします。

新しいレスポンシブレイアウトを使用して、古いフラグメントをアダプティブフォームに埋め込む

アダプティブフォームの新しいレスポンシブレイアウトを使用すると、古いレスポンシブレイアウトを含むアダプティブフォームフラグメントをフォームに追加できます。 ただし、新しいレイアウトでは、フラグメントで使用されるコンポーネントに対して既に定義されているレイアウトプロパティが破棄されます。 レイアウトモードに切り替えて、フラグメントで使用するコンポーネントのレイアウトプロパティを定義できます。

新しいレスポンシブレイアウトを使用してフラグメントを古いアダプティブフォームに埋め込む

古いレスポンシブレイアウトを含むアダプティブフォームに、新しいレスポンシブレイアウトを含むフラグメントを埋め込むと、そのフォームのレイアウトモードを有効にし、フラグメントを再埋め込みするよう求められます。

レイアウトモードを有効にするには、「プレビュー」リストの横に表示されるドロップダウンオプションから「レイアウト」を選択し、「はい」をタップして確認します。 「編集​モード」を選択して、フラグメントを再埋め込みします。

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

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

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

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

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

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

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

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

このページ

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