現在表示中:

概要

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

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

 

通信作成用 UI に表示されたカスタムアイコン
通信作成用 UI に表示されたカスタムアイコン

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

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

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

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

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

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

/apps ブランチ(フォルダ構造):

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

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

  1. http://[server]:[port]/[ContextPath]/crx/deを開き、管理者としてログインします。

  2. apps フォルダーにある defaultApp フォルダーを開き、名前「css」のフォルダを作成します。ここでのパスや構造は、ccrui フォルダ内の css フォルダーと類似しています。 

    css フォルダーの作成手順:

    1. 次のパスにある css フォルダーを右クリックし、「ノードをオーバーレイ」を選択します。/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. apps フォルダーにある defaultApp フォルダーを開き、名前「imgs」のフォルダを作成します。ここでのパスや構造は、ccrui フォルダ内の imgs フォルダーと同様です。

    1. 以下のパスにある items フォルダーを右クリックし、「ノードをオーバーレイ」を選択します。/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. すべて保存」をクリックして変更内容をサーバー上に保存します。

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

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

 

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

  1. http://[server]:[port]/[contextpath]/crx/de を開きます。必要に応じて、管理者としてログインします。

  2. CRXDE から、次のパスにある imgs フォルダーを右クリックし、「作成」/「ファイルを作成」を選択します。

     /apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/imgs/

    imgs フォルダ内に新しいノードを作成する
  3. 「ファイルを作成」ダイアログで、ファイルの名前「CustomLogo.png」(またはロゴファイルの名前)を入力します。

     

    新規ノードとしての CustomLogo.png
  4. すべて保存」をクリックします。

    新しく作成したファイル(ここでは「CustomLogo.png」)の下にjcr:content のプロパティが表示されます。、

  5. フォルダー構造内で、jcr:content をクリックします。 

    jcr:content のプロパティが表示されます。 

    JCRContentProperties
  6. jcr:data プロパティをダブルクリックします。

    「Edit jcr:data」のダイアログが表示されます。

    次に、newlogo.png フォルダをクリックし、jcr:content(dim option)をダブルクリックし、タイプをnt:resource に設定します。プロパティが表示されていない場合は、まず、名前が「jcr:content」のプロパティを作成します。 
  7. 「jcr:data の編集」ダイアログで「参照」をクリックし、ロゴとして使用する画像ファイルを選択します(ここでは、「CustomLogo.png」)。 

    サポートされている画像ファイル形式は、AEM Forms へのアクセスに使用しているブラウザによって異なります。ただし、JPEG、GIF、および PNG は、すべてのブラウザでサポートされています。ブラウザでサポートされている画像形式の詳細は、ブラウザ固有のドキュメントを参照してください。

    カスタムロゴファイルのサンプル
    例:CustomLogo.png をカスタムロゴとして使用する

  8. すべて保存」をクリックします。

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

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

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

  1. http://[server]:[port]/[contextpath]/crx/de を開きます。必要に応じて、管理者としてログインします。

  2. 次の場所に、customcss.css ファイルを作成します。異なるファイル名は使用できません。

    /apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/css/

    customcss.css ファイルの作成手順:

    1. css」フォルダーを右クリックし、「作成」/「フォルダの作成」を選択します。

    2. 「ファイルの新規作成」ダイアログボックスで、CSS の名前を「customcss.css」として指定し、「OK」をクリックします。異なるファイル名は使用できません。

    3. 次のコードを、新しく作成した css ファイルに追加します。コード内の content:url にて、CRXDE の imgs フォルダにアップロードした画像の名前を指定します。

      .logo, .logo:after {
      content:url("../imgs/CustomLogo.png");
      }
    4. すべて保存」をクリックします。

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

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

カスタムロゴを用いて、通信作成用ユーザーインターフェイスを構築する
通信作成用 UI に表示されたカスタムアイコン

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー