通信作成用 UI のカスタマイズ

Correspondence Management を使用すると、ソリューションテンプレートをリブランディングしてブランド価値を保持したり、組織のブランディング基準を統一したりするのに役立ちます。ユーザーインターフェイスのリブランドには、組織ロゴの変更も含まれます。ロゴは、通信作成用 UI の左上隅に表示されます。

通信作成用 UI に表示されるロゴは、組織のロゴと入れ替えることもできます。

カスタムロゴ画像を使用するには、次の手順を実行します。

1. CRX 内で適切なフォルダ構造を作成します。
2. CRX で作成したフォルダに、新しいロゴファイルをアップロードします。
   
3. CRX 上に CSS をセットアップし、新しいロゴを参照します。
4. ブラウザ履歴を消去し、通信作成用 UI を更新します。

カスタムロゴ用の画像やスタイルシートをホストするため、以下に説明するフォルダ構造を作成します。/apps ルートフォルダを持つ新しいフォルダ構造は、/libs フォルダ構造に類似しています。

何らかのカスタマイズを加える場合は、以下に説明するように、/apps ブランチに並列フォルダ構造を作成します。

/apps ブランチ（フォルダ構造）：

• システムの更新時にそれらのファイルが消えても問題がないことを確認します。アップグレード、機能パック、またはホットフィックスの場合は、/libs ブランチが更新されます。/libs ブランチに変更内容をホストする場合は、上書きされます。
• これは、現在の system/branch を保護するための機能です。このフォルダは、カスタムファイルのデフォルトの保存場所をそのまま使用した場合に、誤ってかき乱すおそれもあります。
• AEM がリソースを必要としている場合は、優先度が高くなるようリソースを調整してください。AEM では、リソースが必要な場合に最初に/ apps ブランチを検索し、次に /libs ブランチを検索するように設定されています。このメカニズムにより、システムではユーザーのオーバーレイ（および、そこに定義されたカスタマイズ内容）を使用します。 

次の手順を実行して、必要なフォルダ構造を /apps ブランチに作成します。

CRX にカスタムロゴファイルをアップロードします。ロゴの描画には、標準的なHTML規則が適用されます。サポートされている画像ファイル形式は、AEM Forms へアクセスするために使用しているブラウザによって異なります。ただし、JPEG、GIF、および PNG は、すべてのブラウザでサポートされています。ブラウザでサポートされている画像形式の詳細は、ブラウザ固有のドキュメントを参照してください。

• ロゴ画像のデフォルトの大きさは 48×48 ピクセルです。画像はこのサイズに近いか、または 48×48 ピクセルよりも大きいことを確認してください。
• ロゴ画像の高さよりが 50 ピクセルを超えている場合、「通信作成用」のユーザーインターフェイスでは、ヘッダの高さである 50 ピクセルに合わせて画像を縮小表示します。画像を縮小表示する際も、「通信作成用」のユーザーインターフェイスでは画像の縦横比が維持されます。 
• 画像が小さい場合、通信作成用ユーザーインターフェイスでは拡大表示されません。そのため、ロゴ画像をきれいに表示するには、高さが少なくとも 48 ピクセルあり、幅も十分にあるファイルを使用することが大切です。

以下の手順を実行して、CRX にカスタムロゴファイルをアップロードします。

カスタムロゴ画像では、コンテンツコンテキストで追加のスタイルシートを読み込む必要があります。 

ロゴの描画用スタイルシートを設定する手順は、以下のとおりです。

ブラウザのキャッシュをクリアし、続けてブラウザから通信作成用 UI インスタンスを開きます。カスタムロゴが表示されます。