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

このページでは、AEM Screens チャネルのアセットに適用されたテキストオーバーレイのカスタムブランディングとスタイル設定を適用する方法について説明します。

テキストオーバーレイのカスタムブランディングとスタイル設定の作成

次の手順に従って、テキストオーバーレイのカスタムブランディングとスタイル設定を作成します。

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

    画像

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

    画像

    メモ

    チャネルエディターでテキストオーバーレイをアセットに追加する方法については、テキストオーバーレイを参照してください。

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

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

    画像

  5. 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);
 }

    画像

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

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

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

    メモ

    デフォルトでは、「デザイン」フィールドには、libs フォルダー内のデザインを指すパスが表示されます。

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

    画像

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

    重要

    既存の Screens テンプレートをオーバーレイして、デフォルトで独自のデザインを挿入したり、完全に独自のテンプレートを作成したりできるオプションがあります。詳しくは、以下の手順を参照してください。

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

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

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

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

ACL の更新

これらのデザインの ACL を更新して、プレーヤーがダウンロードできるようにする必要があります。

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

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

結果の表示

上記の手順を完了したら、CRXDE Lite から statis.css ファイルを更新すると、既にアセットに追加されているテキストオーバーレイに更新が表示されます。

次の手順に従って、更新したデザインをテキストオーバーレイに表示します。

  1. customstyle という AEM Screens プロジェクトから、チャネル／DemoBrand に移動します。チャネルを選択し、アクションバーの「編集」をクリックして、エディターを開きます。

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

    画像

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

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

    画像

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

  6. 画像の更新後の変更が表示されるので、プレビューで画像に追加したテキストオーバーレイが確認できます。

    画像

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

このページ