Quebec または Romeで作成されたページのレイアウトの変更

レイアウトデザインを追加および変更して、ページの外観を変更します。Flexbox や CSS グリッドなどのカスケードスタイルシート (CSS) Web レイアウトテクノロジーを使用して、コンポーネントをページに表示する方法を選択します。

始める前に

必要なロール：ui_builder_admin

このタスクについて

レイアウトは、ページで利用可能なコンテナとコンポーネントとそれらの配置を制御します。レイアウトには CSS ルールが適用されます。レイアウトは次のように変更できます。

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、次を選択してエクスペリエンスを作成します 作成 > エクスペリエンス.
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. ページを作成するか、開きます。
4. [レイアウト] タブを選択します。
5. ページのタイプに応じて、次のいずれかを実行し、更新するコンテナを選択します。

   ページのタイプ	説明
   既存のページ	レイアウトを変更するページ上のコンテナを選択します。 注: または、メインページ領域の左側にあるコンテンツツリーでコンテナを選択することもできます。ページ構造が構造化ツリー内にあると、変更するコンテナをより簡単に見つけることができます。コンテンツツリーに多くのコンポーネントとコンテナがある場合は、検索バーを使用して特定のコンテナを検索します。
   新規ページ	メインページ領域の左側にあるコンテンツツリーで、ページの [本文] を選択します。 [本文] はページのルート要素です。

   新しいページを開始する場合は、レイアウトをページレベルで選択し、その後にコンテナレベルで選択することができます。既存のページの所有者でない場合は、ページレベルでレイアウトを変更することによる影響に注意してください。
6. コンテナのレイアウトを変更します。
   1. [ページ構成] ペインで、[レイアウト] タブを選択して、使用するレイアウトを選択します。

      既存のページの現在のレイアウトを新しいレイアウトに変更できます。たとえば、3 列のレイアウトで、4 列のレイアウトをクリックしてレイアウトを変更できます。

      コンテナのレイアウトを設定することもできます。次の画像は、UI ビルダーのレイアウトオプションを示しています。

      

   2. ページを作成する場合は、レイアウトの新しい領域にコンポーネントを追加します。
   3. [保存] をクリックします。
   4. [プレビュー] ボタンを選択してページをテストします。
   次のビデオでは、既存のページを変更するために、コンテナのレイアウトを 3 列から 4 列に変更し、4 列目に新しいコンポーネントを追加する方法を示します。

   

   次のビデオでは、新しいページのレイアウトを設定するために、ページに必要なレイアウトを設定する方法を示します。たとえば、ページに 2 つのスロットまたは列を設定できます。次に、各スロットにコンテナを追加し、各コンテナのレイアウトを変更できます。ページにコンテナを追加した後、コンテナレベルでレイアウトを設定することもできます。

   図 : 1. ページのレイアウトの変更

   

7. スロットにコンポーネントを追加します。
   コンテナコンポーネントを使用してページをビルドします。詳細については、「コンポーネントを使用した UI ビルダー ページのカスタマイズ」を参照してください。

   コンポーネントは以下のいずれかの方法でページに追加できます。

   コンポーネントの追加元	必要な操作
   ページから直接 (オプション 1)	コンテンツの追加 (プラス) アイコンを選択し、[コンポーネント] タブを選択して、コンポーネントを選択します。
   ページから直接 (オプション 2)	列レイアウトまたはコンポーネントで、[前に追加] (プラス) または [後に追加] (プラス) アイコンを選択し、コンポーネントを選択します。
   コンテンツツリーから	コンテンツツリーで、[+ コンテンツを追加] を選択して、コンポーネントを選択します。
   ページ上部のフローティングメニューから	列レイアウトまたはコンポーネントで、メニューアイコンを選択し、[前に追加] または [後に追加] を選択し、コンポーネントを選択します。

8. 次のいずれかの方法でレイアウトのスタイリングオプションを変更します。

   オプション	説明
   レイアウトスタイリングの変更	レイアウトを変更するコンテナをクリックします。 コンテンツツリーでコンテナをクリックすることも、ページでコンテナをクリックすることもできます。 ページの上にあるフローティングメニューから、[レイアウト] をクリックします。 コンテンツをフレックスまたはグリッドのいずれで表示するかを選択します。フレックスまたはグリッドオプションの詳細については、「UI ビルダー での Flexbox レイアウトの使用」または「CSS グリッドレイアウトを使用したページのビルド」を参照してください。
   フレックスの選択	表示リストから、[フレックス] を選択します。 ページでのコンテナコンテンツの表示方法に基づいて、次のオプションを選択します。[CSS スタイル] ボックスにオプションを入力することもできます。 フレックス方向：[行]、[行を逆にする]、[列]、または [列を逆にする] から選択します。 コンテンツの両端揃え：次のいずれかを選択します。 フレックス開始：アイテムは、左揃えのコンテンツのように、フレックスの向きで先頭位置に置かれます。これは、デフォルトの設定です。 フレックス終了：アイテムは、右揃えのコンテンツのように、フレックスの向きで末尾位置に置かれます。 間にスペースを配置：アイテムは均等に配置されます。 外側にスペースを配置：アイテムは周囲に均等な間隔を置いて均等に配置されます。 均等にスペースを配置：アイテム間の間隔は均等になります。 アイテムの整列：交差軸に沿ってフレックスコンテンツを表示する方法を定義します。選択肢は次のとおりです。 ストレッチ (Stretch)：コンテンツを引き延ばしてコンテナ全体に収まるようにします。これは、デフォルトの設定です。 フレックス開始：交差軸の先頭位置にコンテンツを配置します。 フレックス終了：交差軸の末尾位置にコンテンツを配置します。 中央：コンテンツを交差軸の中央に配置します。 ベースライン：コンテンツをベースライン配置と同じように配置します。 高さ：高さを自動または手動で設定します。 幅：Flexbox のアイテムの高さを自動または手動で設定します。 マージン：Flexbox のアイテム間の最小距離を設定します。 パディング (Padding)：Flexbox のアイテムの各側のパディングを設定します。
   グリッドの選択	表示リストから、[グリッド] を選択します。 次の情報を入力します。 高さ：高さを自動または手動で設定します。 幅：グリッドのアイテムの高さを自動または手動で設定します。 マージン：グリッドのアイテム間の最小距離を設定します。 パディング：グリッドのアイテムの各側のパディングを設定します。