テキストオーバーレイのカスタムブランディングとスタイル設定 creating-custom-branding-styling
AEM Screens チャネルのアセットに適用されたテキストオーバーレイのカスタムブランディングとスタイル設定を適用する方法について説明します。
テキストオーバーレイのカスタムブランディングとスタイル設定の作成 steps-custom-branding
次の手順に従って、テキストオーバーレイのカスタムブランディングとスタイル設定を作成します。
-
AEM Screens プロジェクトを作成します。次の図のように、この例では、
customstyle
という名前のプロジェクトと、DemoBrand という名前のチャネルを作成して、この機能を示しています。 -
エディターから画像をドラッグ&ドロップし、テキストオーバーレイをアセットに追加します。
note note NOTE チャネルエディターでテキストオーバーレイをアセットに追加する方法について詳しくは、テキストオーバーレイを参照してください。 -
AEM インスタンス/ツール/CRXDE Lite から CRXDE Lite に移動します。
-
カスタムデザインを
/apps/settings/wcm/designs/<your-project>/
に作成します。例えば、この場合は、/apps/settings/wcm/designs/customstyle/
に移動します。 -
static.css ファイルを作成し、次の css ルールを設定します。また、css ルールは下の図の例としても示されています。
code language-shell //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 というタイトルのチャネルに移動し、チャネルを選択した後、アクションバーの プロパティ をクリックします。
-
「詳細」タブに移動し、「デザイン」フィールドを確認します。
note note NOTE デフォルトでは、「デザイン」フィールドには、libs フォルダー内のデザインを指すパスが表示されます。 -
プロジェクトフォルダーのパスで、「デザイン」フィールドを更新します。この場合、値は
/apps/settings/wcm/designs/customstyle
です。 -
「保存して閉じる」をクリックして、デザインパスを更新します。
note important IMPORTANT オプションで、既存の Screens テンプレートをオーバーレイして、デフォルトで独自のデザインを挿入したり、完全に独自のテンプレートを作成したりできます。詳しくは、以下の手順を参照してください。 -
既存の Screen テンプレートをオーバーレイして独自のデザインを挿入するには、次の手順に従います。
/apps/screens/core/templates/sequencechannel
の/libs/screens/core/templates/sequencechannel
をオーバーレイします。/apps/screens/core/templates/sequencechannel/jcr:content
のcq:designPath
プロパティを変更して、新しいデザインを指すようにします。
-
完全に独自のテンプレートを作成するには:
/libs/screens/core/templates/sequencechannel
を/apps/customstyle/templates/styled-sequencechannel
にコピーします。/apps/customstyle/templates/styled-sequencechannel/jcr:content
のcq:designPath
プロパティを変更して、新しいデザインを指すようにします。
ACL の更新 updating-acls
これらのデザインの ACL を更新して、プレーヤーがダウンロードできるようにします。
-
ユーザー管理に移動し、
screens-<project>-devices group
を選択してカスタムデザインパスの読み取り権限を付与します。 -
このパスに対する
screens-<project>-administrators
グループの読み取りおよび変更の権限を指定します。
結果の表示 viewing-the-result
上記の手順を完了したら、CRXDE Lite から statis.css ファイルを更新すると、既にアセットに追加されているテキストオーバーレイに更新が表示されます。
次の手順に従って、更新したデザインをテキストオーバーレイに表示します。
-
customstyle
という AEM Screens プロジェクトから、チャネル/DemoBrand に移動します。チャネルをクリックし、アクションバーの「編集」をクリックします。 -
デザインは「デザイン」フィールドに追加されたので、前述のように「プレビュー」をクリックすると、現在のスタイルが画像上のテキストオーバーレイで表示されます。
-
CRXDE Lite の static.css ファイルに移動し、次に示すように、このファイルにフォント(
font-family: "Lucida Console", Courier, monospace;
など)を追加します。 -
変更を保存してプレビューを再読み込みすると、次の図に示すように、テキストオーバーレイのフォントが更新されます。
-
また、static.css ファイルからコードの最後の 2 ブロックを削除して、テキストオーバーレイの周囲のボックススタイルを削除できます。
-
テキストオーバーレイが画像に追加された、更新済みの変更をプレビューで確認します。
これで、アセットに追加されたテキストオーバーレイのブランドやカスタムスタイルを更新する準備が整いました。