AEM の ServiceNow コンポーネントの色をカスタマイズする

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間：8分

    • Adobe Experience Manager (AEM) の ServiceNow コンポーネントの見た目を、色を指定して定義できます。

    AEM アドミニストレーターとして、すべてのコンポーネントに事前設定された色変数を変更するか、initializeCSS 関数を使用することでカスタム CSS クラスにより特定のコンポーネントの色をカスタマイズできます。[カスタム CSS クラス] プロパティで、コンポーネントのカスタム CSS クラスを指定します。詳細については、「Adobe Experience Manager ページに ServiceNow ナレッジ記事を表示する」と「Adobe Experience Manager ページに ServiceNow ケースを表示」を参照。

    注:
    デフォルトでは、ServiceNow コンポーネントは Bootstrap v4.4.1 CSS スタイルを使用して構成されています。AEM ページで別の Bootstrap バージョンを使用している場合、 ServiceNow コンポーネントスタイルはページのスタイルによって上書きされます。

    AEM の全 ServiceNow コンポーネントの色テーマを変更する

    カラー変数を構成することで、Adobe Experience Manager (AEM) の ServiceNow コンポーネントの色テーマを一度に設定できます。

    始める前に

    必要なロール：AEM アドミニストレーター

    このタスクについて

    注:
    デフォルトでは、ServiceNow コンポーネントは Bootstrap v4.4.1 CSS スタイルを使用して構成されています。AEM ページで別の Bootstrap バージョンを使用している場合、 ServiceNow コンポーネントスタイルはページのスタイルによって上書きされます。

    手順

    1. ブラウザで CRXDE Lite を開きます。
      たとえばブラウザで、http://<AEM_hostname>:<AEM_port>/crx/de の形式で URL を入力します。CRXDE Lite のデフォルト URL は http://localhost:4502/crx/de です。
    2. 移動先 アプリ > servicenow-components > クライアントライブラリ > clientlib-common.
    3. variables.less ファイルを開きます。
    4. ServiceNow コンポーネントの HTML 要素で利用可能な色変数を構成します。
      表 : 1. 色変数の設定
      色の設定 変数
      テキストコンテンツ @text-color
      ハイパーリンク @link-color
      バッジ @badge-text-color
      バッジの背景 @badge-background-color
      視覚的な強調のためのプライマリ色 @primary-color
      視覚的な強調のためのプライマリ色に対する補色 @secondary-color
      コンポーネントタイトル @title-color
      プライマリボタンのテキスト @primary-btn-text-color
      プライマリボタンの背景 @primary-btn-bkg-color
      セカンダリボタンのテキスト @secondary-btn-text-color
      セカンダリボタンの背景 @secondary-btn-bkg-color
      注:
      次のいずれかの方法で、変数の色を指定します。
      • 色名

        たとえば、red など

      • 16 進値

        たとえば、 #FF0000 など

      • RGB 値

        たとえば、 rgb(255,0,0) など

      • var 関数

        var 関数を使用して、色のカスタムプロパティを指定します。たとえば、var(--gray-dark) など。

    5. CRXDE Lite メニューから、[すべて保存] をクリックして、AEM サーバーに変更を保存します。

    AEM の ServiceNow コンポーネントの色テーマを変更する

    Adobe Experience Manager (AEM) で、 initialize 関数を使用して ServiceNow コンポーネントの配色テーマを上書きします。

    始める前に

    必要なロール：AEM アドミニストレーター

    このタスクについて

    variables.less ファイルで指定した色変数は、AEM 内のすべての ServiceNow コンポーネントに適用されます。initializeCSS 関数でコンポーネントの色変数を設定することで、特定のコンポーネントのデフォルトの色を上書きできます。
    注:
    デフォルトでは、ServiceNow コンポーネントは Bootstrap v4.4.1 CSS スタイルを使用して構成されています。AEM ページで別の Bootstrap バージョンを使用している場合、 ServiceNow コンポーネントスタイルはページのスタイルによって上書きされます。

    手順

    1. ブラウザで CRXDE Lite を開きます。
      たとえばブラウザで、http://<AEM_hostname>:<AEM_port>/crx/de の形式で URL を入力します。CRXDE Lite のデフォルト URL は http://localhost:4502/crx/de です。
    2. 移動先 アプリ > servicenow-components > クライアントライブラリ > clientlib-common.
    3. variables.less ファイルを開きます。
    4. <component_type>;<class_name>;<color_variable_1>;<color_variable_2>;<color_variable_n> 形式でコンポーネントについて initializeCSS 関数を指定します。
      • component_type：カスタムカラーテーマを適用するコンポーネントのタイプ (たとえば、articlelist、articleview、casecards など) を指定します。
      • class_name：コンポーネントの [カスタム css クラス] プロパティに入力するカスタム css クラス。
      • color_variable_1、color_variable_2、color_variable_n：コンポーネント内の HTML 要素に指定する色変数。詳細については、色変数の設定テーブルを参照してください。

      次のサンプルコードは、コンポーネントレベルでの色のスタイリングの参照として使用します。

      .initialize(@componentType:articlelist;@className:now-article-list;@text-color:red; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;);
.initialize(@componentType:articleview; @className:now-article-view;@text-color:red; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@secondary-color:indigo;);
.initialize(@componentType:casecards; @className:now-case-cards; @text-color:red;@link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;);
.initialize(@componentType:caselist; @className:now-case-list; @text-color:red; @link-color:orange;@title-color:magenta;@primary-color:green;@secondary-btn-text-color:white;@secondary-btn-bkg-color:black;);
.initialize(@componentType:searchbox; @className:now-search-box; @text-color:red; @link-color:orange;@title-color:magenta;@primary-color:green;@secondary-btn-text-color:white;@secondary-btn-bkg-color:black;);
.initialize(@componentType:searchresults;@className:now-search-results;@text-color:gray; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;);
.initialize(@componentType:caseview;@className:now-case-view;@text-color:red;@link-color:orange;@primary-color:green;@secondary-color:indigo;@primary-btn-text-color:blue;@primary-btn-bkg-color:white;@secondary-btn-text-color:white;@secondary-btn-bkg-color:blue;);
.initialize(@componentType:createcase;@className:now-create-case;@text-color:red;@link-color:orange;@primary-color:green;@secondary-color:indigo;@primary-btn-text-color:blue;@primary-btn-bkg-color:white;@secondary-btn-text-color:white;@secondary-btn-bkg-color:blue;)
    5. CRXDE Lite メニューから、[すべて保存] をクリックして、AEM サーバーに変更を保存します。