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

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

カスタムレイアウトで異なるゾーンに対して固定ピクセルサイズを使用するか、パーセンテージを使用したカスタムレイアウトを作成するかを決定します。

命名規則：

命名規則は、AEM Screens プロジェクトで使用するカスタムマルチゾーンテンプレートの作成方法を理解するのに役立ちます。ただし、まずは、作成するテンプレートの用語を理解する必要があります。

customtemplate というタイトルの AEM Screens プロジェクトを作成します。

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

apps の下に、customtemplate という名前のフォルダーを作成します。同様に、次の図に示すように、customtemplate の下に、template という名前の別のフォルダーを作成します。

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 に更新します。

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

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

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

同様に、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 に移動して、custom-template-designs の jcr:title プロパティを 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 テンプレートをクリックします。

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