通信作成 UI のカスタマイズ customize-create-correspondence-ui
概要 overview
Correspondence Management を使用すると、ソリューションテンプレートをリブランディングしてブランド価値を高め、組織のブランディング標準に準拠することができます。ユーザーインターフェイスのリブランディングには、組織のロゴの変更が含まれます。ロゴは、通信作成 UI の左上隅に表示されます。
通信作成 UI のロゴを組織のロゴに変更できます。
通信作成用 UI に表示されたカスタムアイコン
通信作成 UI のロゴの変更 changing-the-logo-in-the-create-correspondence-ui
ロゴ画像を設定するには、次の手順を実行します。
-
CRX 内で適切なフォルダー構造を作成します。
-
CRX で作成したフォルダーに、新しいロゴファイルをアップロードします。
-
CRX 上に CSS をセットアップし、新しいロゴを参照します。
-
ブラウザーの履歴を消去し、通信作成 UI を更新します。
必要なフォルダー構造の作成 creatingfolderstructure
カスタムロゴ画像とスタイルシートをホストするために、以下の説明に従ってフォルダー構造を作成します。ルートフォルダー /apps を持つ新しいフォルダー構造は、/libs フォルダーの構造に似ています。
カスタマイズする場合は、以下に説明するように、/apps ブランチに並列フォルダー構造を作成します。
/apps
ブランチ(フォルダー構造):
- システムに更新がある場合に、ファイルの安全を確保します。アップグレード、機能パックまたはホットフィックスがある場合、
/libs
ブランチが更新されます。/libs
ブランチに変更内容をホストしていると上書きされてしまいます。 - 現在のシステム/ブランチを乱さないようにします。カスタムファイルの保存用にデフォルトの場所を使用すると、誤って乱してしまう可能性があります。
- AEM がリソースを検索する際に、リソースの優先度を高めます。AEM は、リソースを検索する場合、最初に
/apps
ブランチを検索し、次に/libs
ブランチを検索するように設定されています。このメカニズムにより、システムはオーバーレイ(および、そこに定義されたカスタマイズ内容)を使用します。
次の手順を実行して、必要なフォルダー構造を /apps
ブランチに作成します。
-
https://'[server]:[port]'/[ContextPath]/crx/de
に移動して、管理者としてログインします。 -
apps フォルダー内に、ccrui フォルダーにある css フォルダーと同様のパスと構造を持つ、
css
というフォルダーを作成します。css フォルダーの作成手順:
-
次のパスにある css フォルダーを右クリックし、「ノードをオーバーレイ」を選択します。
/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css
-
ノードをオーバーレイダイアログに次の値が表示されていることを確認します。
パス:
/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css
オーバーレイの場所:
/apps/
ノードタイプを一致させる: オン
note note NOTE /libs
ブランチは変更しないでください。次の操作を行った場合はこのブランチが変更されるため、各自で加えた変更はすべて失われます。code language-none * インスタンスをアップグレード * ホットフィックスの適用 * 機能パックをインストール
-
「OK」をクリックします。指定したパスに css フォルダーが作成されます。
-
-
apps フォルダー内に、ccrui フォルダーにある
imgs
フォルダーと同様のパスと構造を持つ、imgs
というフォルダーを作成します。-
次のパスにある imgs フォルダーを右クリックし、「ノードをオーバーレイ」を選択します。
/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
-
「ノードをオーバーレイ」ダイアログに次の値が表示されていることを確認します。
パス:/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
オーバーレイの場所:/apps/
ノードタイプを一致させる:オン
-
「OK」をクリックします。
note note NOTE /apps フォルダーに手動でフォルダー構造を作成することもできます。
-
-
「すべて保存」をクリックして、サーバーに変更を保存します。
CRX に新しいロゴをアップロード uploadlogo
カスタムロゴファイルを CRXに アップロードします。ロゴの描画には、標準的な HTML 規則が適用されます。サポートしている画像ファイル形式は、AEM Forms へのアクセスに使用しているブラウザーによって異なります。ただし、JPEG、GIF、および PNG は、すべてのブラウザーでサポートされています。詳しくは、サポートされる画像形式に関するブラウザー固有のドキュメントを参照してください。
- ロゴ画像のデフォルトの大きさは 48 * 48 ピクセルです。画像はこのサイズに近いか、または 48 * 48 ピクセルよりも大きいことを確認してください。
- ロゴ画像の高さが 50 ピクセルを超えている場合、通信作成ユーザーインターフェイスでは、ヘッダーの高さである 50 ピクセルに合わせて画像を縮小表示します。画像を縮小表示する際も、通信作成ユーザーインターフェイスでは画像の縦横比が維持されます。
- 画像が小さい場合、通信作成用ユーザーインターフェイスでは拡大表示されません。そのため、ロゴ画像をきれいに表示するには、高さが少なくとも 48 ピクセルあり、幅も十分にあるファイルを使用することが大切です。
以下の手順を実行して、CRX にカスタムロゴファイルをアップロードします。
-
https://'[server]:[port]'/[contextpath]/crx/de
にアクセスします。必要に応じて、管理者としてログインします。 -
CRXDE から、次のパスにある imgs フォルダーを右クリックし、「作成」/「ファイルを作成」を選択します。
/apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs/
-
「ファイルを作成」ダイアログで、ファイルの名前「CustomLogo.png」(またはロゴファイルの名前)を入力します。
-
「すべて保存」をクリックします。
作成した新しいファイル(ここでは CustomLogo.png)の下に、jcr:content プロパティが表示されます。
-
フォルダー構造内で jcr:content をクリックします。
jcr:content のプロパティが表示されます。
-
jcr:data プロパティをダブルクリックします。
「Edit jcr:data」のダイアログが表示されます。
次に、newlogo.png フォルダーをクリックし、jcr:content(dim オプション)をダブルクリックして、タイプ nt:resource を設定します。プロパティが表示されていない場合は、まず、名前が「jcr:content」のプロパティを作成します。
-
「jcr:data の編集」ダイアログで「参照」をクリックし、ロゴとして使用する画像ファイルを選択します(ここでは、「CustomLogo.png」)。
サポートしている画像ファイル形式は、AEM Forms へのアクセスに使用しているブラウザーによって異なります。ただし、JPEG、GIF、および PNG は、すべてのブラウザーでサポートされています。詳しくは、サポートされる画像形式に関するブラウザー固有のドキュメントを参照してください。
例:CustomLogo.png をカスタムロゴとして使用する
-
「すべて保存」をクリックします。
UI でロゴをレンダリングするための CSS を作成 createcss
カスタムロゴ画像では、コンテンツコンテキストで追加のスタイルシートを読み込む必要があります。
UI でロゴをレンダリングするためのスタイルシートを作成するには、次の手順を実行します。
-
https://'[server]:[port]'/[contextpath]/crx/de
にアクセスします。必要に応じて、管理者としてログインします。 -
次の場所に、customcss.css というファイルを作成します。異なるファイル名は使用できません。
/apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css/
customcss.css ファイルの作成手順:
-
css フォルダーを右クリックし、作成/ファイルを作成 を選択します。
-
新規ファイルダイアログボックスで、CSS の名前を「
customcss.css
」として指定し、「OK」をクリックします。異なるファイル名は使用できません。 -
次のコードを、新しく作成した css ファイルに追加します。コードの content:url で、CRXDE の imgs フォルダーにアップロードした画像名を指定します。
code language-css .logo, .logo:after { content:url("../imgs/CustomLogo.png"); }
-
「すべて保存」をクリックします。
-
通信作成 UI を更新してカスタムロゴを表示 refreshccrui
ブラウザーキャッシュをクリアし、ブラウザーで通信作成 UI インスタンスを開いて、カスタムロゴを表示します。
通信作成用 UI に表示されたカスタムアイコン