マルチゾーンレイアウトでのカスタムテンプレートの作成 creating-custom-templates-multizone

固定ピクセルサイズまたはパーセンテージ：

カスタムレイアウトで様々なゾーンに固定ピクセルサイズを使用するか、割合を使用してカスタムレイアウトを作成するかを決定します。

命名規則：

AEM Screens プロジェクトで使用するカスタムのマルチゾーンテンプレートを作成する方法を理解する前に、作成するテンプレートの概要を理解する必要があります。

というタイトルのAEM Screens プロジェクトの作成 customtemplate.

に移動します。 CRXDE Lite AEM インスタンス/ ツール /から CRXDE Lite.

の下にフォルダーを作成 apps タイトルは customtemplate. 同様に、という名前の別のフォルダーを作成します。 template 未満 customtemplate ​を参照してください（下図を参照）。

lbar-left テンプレートを/libs/screens/core/templates/splitscreenchannel/lbar-left から /apps/customtemplate/template にコピーします。

コピーした lbar-left（/apps/customtemplate/template）の名前を my-custom-layout に変更します。

に移動します。 /apps/customtemplate/template/my-custom-layout プロパティを更新します jcr:description 対象： のテンプレートLeft20-LandscapeHD3Zone および jcr:title 対象： Left20-LandscapeHD3Zone.

に移動します。 offline-config からのノード /apps/customtemplate/template/my-custom-layout/jcr:content/offline-config を更新します jcr:title 対象： Left20-LandscapeHD3Zone.

に移動します。 jcr:content のプロパティ my-custom-template から /apps/customtemplate/template/my-custom-layout/jcr:content を更新します cq:cssClass 使用できるプロパティ aem-Layout my-custom-layout.

lbar-left テンプレートをコピーした手順（4）では、の下に 3 つのレスポンシブグリッドを表示できます my-custom-layout/jcr:content. の各レスポンシブグリッドへのカスタム css クラスの追加 cq:cssClass プロパティ（例：） my-custom-layout-top-left （用） r1c1 ノード。

同様に、r1c2 ノードに対しては my-custom-layout–top-right を追加し、r2c1 ノードに対しては my-custom-layout–bottom を追加します。

/libs/settings/wcm/designs/screens を /apps/settings/wcm/designs/ にコピーして、コピーしたデザインの名前を custom-template-designs に変更します。

に移動します。 /apps/settings/wcm/designs/custom-template-designs およびプロパティの更新 jcr:title 件中 custom-template-designs 対象： customtemplate-design.

/apps/settings/wcm/designs/custom-template-designs に移動して、static.css ファイルを作成します。

コンテンツを static.css ファイルにコピーします。

    /*my-custom-layout styles*/
   .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-left {
    width:20%;
    height: 36%;
   float: left !important;
   }
  .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-right {
   width:80%;
   height: 36%;
  float: left !important;
  }
  .cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--bottom {
  width:100%;
  height: 64%;
  }

に移動します。 /apps/<project>/templates/my-custom-layout/jcr:content およびプロパティの更新 cq:designPath 対象： /apps/settings/wcm/designs/customtemplate-designs そのため、static.css で設定したスタイルを読み込むことができます。

手順（1）で作成した Screens プロジェクトに移動し、 チャネル フォルダー。

クリック 作成 アクションバーでテンプレートをクリックします。 Left20-LandscapeHD3Zone から 作成 ウィザード。

カスタマイズしたテンプレートでチャネルを作成したら、エディターからチャネルにアセットを追加できます。 次のプレビューは、カスタムテンプレート内の画像を示しています。