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

最終更新日： 2025年3月6日
  • トピック：

作成対象：

  • ユーザー
  • 開発者

インタラクティブ通信の web チャネルオーサリングインターフェイスでは、レイアウトモードを使用してコンポーネントのサイズを変更できます。列内の青い点をドラッグ＆ドロップして、コンポーネントを配置する開始点と終了点を定義します。レスポンシブグリッド内のコンポーネントをタップすると、青い点が表示されます。レスポンシブグリッドは、12 個の等しい列で構成されています。代替列の白と青色の影は、1 つの列と他の列を区別します。

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

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

レイアウトモードへのアクセス

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

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

  2. インタラクティブ通信を作成するか、既存のインタラクティブ通信を開きます。

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

    インタラクティブ通信のレイアウトモード

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

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

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

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

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

    • 親： ​コンポーネントの親を選択します。
    • 新しい行にフローティングする： ​同じ行内に複数のコンポーネントがある場合は、コンポーネントを次の行に移動します。

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

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

例

目的： ​テーブルコンポーネントと画像コンポーネントを挿入し、インタラクティブ通信でそれらを互いに平行に配置します。

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

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

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

    テーブルの終了点を定義

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

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

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

パネルのサイズ変更

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

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

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

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

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

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

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

  2. 「 保存 」を選択して、プロパティを保存します。

  3. レイアウト ​モードで、パネル内のいずれかのコンポーネントを選択して、「 親を選択 」を選択し、パネルを選択します。

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

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