通信作成 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 分岐は変更しないでください。このブランチは、次の操作を行うたびに変更される可能性が高いので、加えた変更はすべて失われる可能性があります。 - インスタンスでのアップグレード
- ホットフィックスの適用
- 機能パックのインストール
-
「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 px *です48 px。 画像がこのサイズに近いか、48 px *より大きいことを確認します。48 px。
- ロゴ画像の高さが 50 px を超える場合、「通信を作成」のユーザーインターフェイスでは、ヘッダーの高さになるので、画像を最大高さ 50 px まで縮小表示します。 画像を縮小しながら、通信を作成ユーザーインターフェイスで画像の縦横比が維持されます。
- 画像が小さい場合、通信作成用ユーザーインターフェイスでは拡大表示されません。そのため、ロゴ画像をきれいに表示するには、高さが少なくとも 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 -
「すべて保存」をクリックします。
CSS を作成してロゴを UI に統合する createcss
カスタムロゴイメージを使用するには、コンテンツコンテキストに追加のスタイルシートを読み込む必要があります。
ロゴの描画用スタイルシートを設定する手順は、以下のとおりです。
-
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 のカスタムアイコン