Show Menu
トピック×

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

概要

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

通信作成用 UI に表示されるカスタムアイコンを変更する

カスタムロゴ画像を使用するには、次の手順を実行します。
  1. Create the appropriate folder structure in CRX .
  2. CRXで作成したフォルダーに 、新しいロゴファイルをアップロードします。
  3. CRXでCSSを設定し 、新しいロゴを参照します。
  4. Clear the browser history and refresh the Create Correspondence UI .

必要なフォルダ構造を作成する

カスタムロゴ用の画像やスタイルシートをホストするため、以下に説明するフォルダ構造を作成します。/apps ルートフォルダを持つ新しいフォルダ構造は、/libs フォルダ構造に類似しています。
何らかのカスタマイズを加える場合は、以下に説明するように、/apps ブランチに並列フォルダ構造を作成します。
/appsブランチ(フォルダー構造):
  • システムの更新時にそれらのファイルが消えても問題がないことを確認します。アップグレード、機能パック、またはホットフィックスの場合、/libsブランチが更新され、変更を/libsブランチでホストする場合は、変更が上書きされます。
  • これは、現在の system/branch を保護するための機能です。このフォルダは、カスタムファイルのデフォルトの保存場所をそのまま使用した場合に、誤ってかき乱すおそれもあります。
  • AEM がリソースを必要としている場合は、優先度が高くなるようリソースを調整してください。AEMは、最初に/appsブランチを検索し、次に/libsブランチでリソースを検索するように設定されています。 このメカニズムにより、システムではユーザーのオーバーレイ(および、そこに定義されたカスタマイズ内容)を使用します。
次の手順を実行して、必要なフォルダ構造を /apps ブランチに作成します。
  1. Go to https://[server]:[port]/[ContextPath]/crx/de and login as Administrator.
  2. apps フォルダーにある defaultApp フォルダーを開き、名前「 css 」のフォルダを作成します。ここでのパスや構造は、ccrui フォルダ内の css フォルダーと類似しています。
    cssフォルダーの作成手順:
    1. Right-click the css folder at the following path and select Overlay Node : /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css
    2. ノードをオーバーレイダイアログに次の値が表示されていることを確認します。
      ​パス:/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css
      ​オーバーレイの場所:/apps/
      ​ノードタイプの一致:チェック済み
      /libsブランチは変更しないでください。 次の操作を行った場合はこのブランチが変更されるため、各自で加えた変更はすべて失われます。
      • インスタンス上でのアップグレード
      • ホットフィックスの適用
      • 機能パックのインストール
    3. OK 」をクリックします。指定されたパスに、css フォルダが作成されます。
  3. In the apps folder, create a folder named imgs with path/structure similar to the imgs folder (located in ccrui folder).
    1. Right-click the imgs folder at the following path and select Overlay Node : /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
    2. ノードをオーバーレイダイアログに次の値が表示されていることを確認します。
      ​パス:/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs
      ​オーバーレイの場所:/apps/
      ​ノードタイプの一致:チェック済み
    3. OK 」をクリックします。
      フォルダ構造は、/apps フォルダーに手動で作成することもできます。
  4. すべて保存 」をクリックして、サーバーに変更を保存します。

CSS を作成し、UI にロゴを統合する

カスタムロゴ画像では、コンテンツコンテキストで追加のスタイルシートを読み込む必要があります。
ロゴの描画用スタイルシートを設定する手順は、以下のとおりです。
  1. 移動 https://[server]:[port]/[contextpath]/crx/de . 必要に応じて、管理者としてログインします。
  2. 次の場所に、customcss.cssという名前のファイルを作成します(別のファイル名は使用できません)。
    /apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css/
    customcss.css ファイルの作成手順:
    1. css 」フォルダーを右クリックし、「 作成」/「フォルダの作成 」を選択します。
    2. In the New File dialog, specify the name of the CSS as customcss.css (you cannot use a different filename), and click OK .
    3. 次のコードを、新しく作成した css ファイルに追加します。コード内の content:url にて、CRXDE の imgs フォルダにアップロードした画像の名前を指定します。
      .logo, .logo:after {
      content:url("../imgs/CustomLogo.png");
      }
      
      
    4. すべて保存 」をクリックします。

通信作成用 UI を更新し、にカスタムロゴを表示する

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