IBM Connections ロゴの変更

組織のルック・アンド・フィールを反映するように IBM® Connections をカスタマイズするには、IBM Connections のロゴを自社のロゴで置き換える CSS オーバーライドを指定します。

このタスクについて

デフォルトでは、 製品に 2 つの IBM ロゴが表示されます。最初のロゴにはテキスト「IBM Connections」が入っており、2 番目のロゴはグラフィックの IBM ロゴです。どのロゴも、 自社のロゴに置き換えることができます。

手順

  1. オプション: カスタマイズのデバッグ機能をオンにします。 詳しくは、『カスタマイズのデバッグ機能の使用可能化と使用不能化』を参照してください。
  2. CSS ファイル custom.css を作成し、カスタマイズ・ディレクトリーの次のサブディレクトリーに保管します。customizationDir/themes/<theme_name>Theme
    注: 各テーマ (例えば、「red」、「green」、「onyx」、「gen4」、「hikari」(デフォルトのテーマ)) には、customizationDir/themes/<theme_name>Theme/ というテーマ・カスタマイズ・フォルダーがあります。 「hikari」テーマのカスタマイズ・フォルダーは、customizationDir/themes/hikariTheme/ です。

    customizationDir ディレクトリーの見つけ方の詳細については、『カスタマイズの保存場所の決定』を参照してください。

  3. 会社のロゴを以下のディレクトリーに保存します。
    customizationDir/javascript/com/ibm/lconn/core/styles/images/logo.png
    customizationDir/javascript/com/ibm/oneui3/styles/imageLibrary/Branding/Logos/ibmLogoOpaque16.png
  4. テキスト・エディターで CSS ファイルを開き、以下の行を追加します。
    • IBM Connections のテキスト・ベースのロゴ <img class="image"
alt="" src="logo1.png"> を会社のロゴで置き換えるには、ファイルに以下の行を追加します。
      .lotusui30 .lotusBanner .lotusLogo {
       background-image: url("/com.ibm.lconn.core.styles/images/logo.png");
       height: image_heightpx;
       width: image_widthpx; 
      } 
      .lotusui30 .lotusBanner .lotusLogo .lotusAltText {
       display: none; 
      }
      項目
      • logo.png は自社のロゴのファイル名です。
      • image_height はロゴの高さです。
      • image_width はロゴの幅です。
    • IBM のグラフィック・ロゴ <img class="image"
alt="" src="logo2.png"> を会社のロゴで置き換えるには、ファイルに以下の行を追加します。
      .lotusui30 .lotusBanner .lotusIBMLogo {
       background-image: url("/com.ibm.oneui3.styles/imageLibrary/Branding/Logos/ibmLogoOpaque16.png");
       background-position: 0px 0px;
       height: image_heightpx;
       width: image_widthpx;
      }
      項目
      • ibmLogoOpaque16.png は自社のロゴのファイル名です。
      • image_height はロゴの高さです。
      • image_width はロゴの幅です。
    注: アラビア語やヘブライ語などの右から左に読む言語をサポートする場合は、customRTL.css ファイルに相応の変更を加え、同じように customizationDir/themes/<theme_name>Theme ディレクトリーにファイルを保存する必要があります。
  5. custom.css ファイルを保存して閉じます。
  6. CSS の変更内容を適用するために、Common.ear ファイルを停止してから再起動します。
  7. /temp/wstemp の各ディレクトリーを消去します。例: c:¥IBM¥WebSphere¥AppServer¥profiles¥AppSrv01¥tempc:¥IBM¥WebSphere¥AppServer¥profiles¥AppSrv01¥wstemp
  8. 変更内容を公開する準備ができたら、カスタマイズのデバッグ機能をオフにします。 アプリケーションを再起動し、Web ブラウザーを最新表示して、変更内容が正常に追加されたかどうかをテストします。 デバッグがオンになっている場合にのみ、ブラウザーを最新表示すると変更内容が表示されます。詳しくは、『カスタマイズのデバッグ機能の使用可能化と使用不能化』を参照してください。
  9. 製品のバージョン・スタンプを更新して、ユーザーが次回に IBM Connections にログインしたときに変更内容が反映されるようにする方法については、「カスタマイズ後のステップ」を参照してください。