テキストオーバーレイのカスタムブランディングとスタイル設定 creating-custom-branding-styling

AEM Screens プロジェクトを作成します。次の図のように、この例では、customstyle という名前のプロジェクトと、DemoBrand という名前のチャネルを作成して、この機能を示しています。

エディターから画像をドラッグ＆ドロップし、テキストオーバーレイをアセットに追加します。

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

カスタムデザインを /apps/settings/wcm/designs/<your-project>/ に作成します。例えば、この場合は、/apps/settings/wcm/designs/customstyle/ に移動します。

static.css ファイルを作成し、次の css ルールを設定します。また、css ルールは下の図の例としても示されています。

 //global styles
 cq-Screens-textOverlay {
 padding: 1em;
 font-size: 3rem;
 line-height: 1em;
  }
 //authoring overrides
.aem-AuthorLayer-Edit .cq-Screens-textOverlay {
 display: none;
 padding: 0;
 font-size: 1rem;
 }
  // light text variant
 .cq-Screens-textOverlay-color--light {
  background-color: rgba(0, 0, 0, .6);
  }
  // dark text variant
  .cq-Screens-textOverlay-color--dark {
   background-color: rgba(255, 255, 255, .6);
 }

パスをプロジェクトにコピーします。この場合、パスは /apps/settings/wcm/designs/customstyle です。

手順（1）で作成した DemoBrand というタイトルのチャネルに移動し、チャネルを選択した後、アクションバーの​ プロパティ ​をクリックします。

「詳細」タブに移動し、「デザイン」フィールドを確認します。

プロジェクトフォルダーのパスで、「デザイン」フィールドを更新します。この場合、値は /apps/settings/wcm/designs/customstyle です。

「保存して閉じる」をクリックして、デザインパスを更新します。

既存の Screen テンプレートをオーバーレイして独自のデザインを挿入するには、次の手順に従います。

1. /apps/screens/core/templates/sequencechannel の /libs/screens/core/templates/sequencechannel をオーバーレイします。
2. /apps/screens/core/templates/sequencechannel/jcr:content の cq:designPath プロパティを変更して、新しいデザインを指すようにします。

完全に独自のテンプレートを作成するには：

1. /libs/screens/core/templates/sequencechannel を /apps/customstyle/templates/styled-sequencechannel にコピーします。
2. /apps/customstyle/templates/styled-sequencechannel/jcr:content の cq:designPath プロパティを変更して、新しいデザインを指すようにします。

ユーザー管理に移動し、screens-<project>-devices group を選択してカスタムデザインパスの読み取り権限を付与します。

このパスに対する screens-<project>-administrators グループの読み取りおよび変更の権限を指定します。

customstyle という AEM Screens プロジェクトから、チャネル／DemoBrand に移動します。チャネルをクリックし、アクションバーの「編集」をクリックします。

デザインは「デザイン」フィールドに追加されたので、前述のように「プレビュー」をクリックすると、現在のスタイルが画像上のテキストオーバーレイで表示されます。

CRXDE Lite の static.css ファイルに移動し、次に示すように、このファイルにフォント（font-family: "Lucida Console", Courier, monospace; など）を追加します。

変更を保存してプレビューを再読み込みすると、次の図に示すように、テキストオーバーレイのフォントが更新されます。

また、static.css ファイルからコードの最後の 2 ブロックを削除して、テキストオーバーレイの周囲のボックススタイルを削除できます。

テキストオーバーレイが画像に追加された、更新済みの変更をプレビューで確認します。

これで、アセットに追加されたテキストオーバーレイのブランドやカスタムスタイルを更新する準備が整いました。