--- sourceDocument: オーストラリアのカスタマーサービス管理 (CSM) sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/customer-service-management Release : - australia ft:locale : - ja-JP ft:publication_title : - オーストラリアのカスタマーサービス管理 (CSM) ft:clusterId : - csm bundleId : - csm workflow : - Customer and Industry --- # コンポーネント色のカスタマイズ # AEM の ServiceNow コンポーネントの色をカスタマイズする {#ariaid-title1} * リリースバージョン: Australia * * 更新日 2026年03月12日 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：8分 Adobe Experience Manager (AEM) の ServiceNow コンポーネントの見た目を、色を指定して定義できます。 AEM アドミニストレーターとして、すべてのコンポーネントに事前設定された色変数を変更するか、initializeCSS 関数を使用することでカスタム CSS クラスにより特定のコンポーネントの色をカスタマイズできます。\[カスタム CSS クラス\] プロパティで、コンポーネントのカスタム CSS クラスを指定します。詳細については、「[Adobe Experience Manager ページに ServiceNow ナレッジ記事を表示する](https://servicenow-prod.fluidtopics.net/QRuIylh5ZdaBOb6f9d06SA "Adobe Experience Manager (AEM) 内で利用可能なナレッジコンポーネントを使用して、ナレッジベースに ServiceNow インスタンスからアクセスし、関連付けられているナレッジ記事を AEM ベースの Web サイトで表示します。")」と「[Adobe Experience Manager ページに ServiceNow ケースを表示](https://servicenow-prod.fluidtopics.net/3seF_O6_2_dAuR43xxEHig "Adobe Experience Manager (AEM) 内で利用可能なケースコンポーネントを使用して、カスタマーサービスケースに ServiceNow インスタンスからアクセスし、AEM ベースの Web サイトで表示します。")」を参照。 注: デフォルトでは、ServiceNow コンポーネントは Bootstrap v4.4.1 CSS スタイルを使用して構成されています。AEM ページで別の Bootstrap バージョンを使用している場合、 ServiceNow コンポーネントスタイルはページのスタイルによって上書きされます。 ## AEM の全 ServiceNow コンポーネントの色テーマを変更する {#ariaid-title2} カラー変数を構成することで、Adobe Experience Manager (AEM) の ServiceNow コンポーネントの色テーマを一度に設定できます。 ### 始める前に 必要なロール：AEM アドミニストレーター ### このタスクについて 注: デフォルトでは、ServiceNow コンポーネントは Bootstrap v4.4.1 CSS スタイルを使用して構成されています。AEM ページで別の Bootstrap バージョンを使用している場合、 ServiceNow コンポーネントスタイルはページのスタイルによって上書きされます。 ### 手順 1. [ブラウザで CRXDE Lite を開きます](https://docs.adobe.com/content/help/en/experience-manager-65/administering/security/enabling-crxde-lite.html)。 たとえばブラウザで、http://\:\/crx/de の形式で URL を入力します。CRXDE Lite のデフォルト URL は http://localhost:4502/crx/de です。 2. 移動先 アプリservicenow-componentsクライアントライブラリclientlib-common. 3. variables.less ファイルを開きます。 4. ServiceNow コンポーネントの HTML 要素で利用可能な色変数を構成します。 {#aem-modify-color-all-comp__table_vhh_gjm_2mb__entry__2} | 色の設定 | 変数 | |-|-| | テキストコンテンツ | @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 | [表 : 1. 色変数の設定] {#aem-modify-color-all-comp__table_vhh_gjm_2mb} 注: 次のいずれかの方法で、変数の色を指定します。 * 色名たとえば、red など * 16 進値 たとえば、 #FF0000 など * RGB 値 たとえば、 rgb(255,0,0) など * var 関数 var 関数を使用して、色のカスタムプロパティを指定します。たとえば、var(--gray-dark) など。 {#aem-modify-color-all-comp__ul_u1g_slm_2mb} 5. CRXDE Lite メニューから、\[すべて保存\] をクリックして、AEM サーバーに変更を保存します。 ## AEM の ServiceNow コンポーネントの色テーマを変更する {#ariaid-title3} Adobe Experience Manager (AEM) で、 initialize 関数を使用して ServiceNow コンポーネントの配色テーマを上書きします。 ### 始める前に 必要なロール：AEM アドミニストレーター ### このタスクについて variables.less ファイルで指定した色変数は、AEM 内のすべての ServiceNow コンポーネントに適用されます。initializeCSS 関数でコンポーネントの色変数を設定することで、特定のコンポーネントのデフォルトの色を上書きできます。 注: デフォルトでは、ServiceNow コンポーネントは Bootstrap v4.4.1 CSS スタイルを使用して構成されています。AEM ページで別の Bootstrap バージョンを使用している場合、 ServiceNow コンポーネントスタイルはページのスタイルによって上書きされます。 ### 手順 1. [ブラウザで CRXDE Lite を開きます](https://docs.adobe.com/content/help/en/experience-manager-65/administering/security/enabling-crxde-lite.html)。 たとえばブラウザで、http://\:\/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 要素に指定する色変数。詳細については、[色変数の設定](https://servicenow-prod.fluidtopics.net/zm4gYwMWYFsj9xL5JYw4ow#aem-modify-color-all-comp__table_vhh_gjm_2mb)テーブルを参照してください。 {#aem-modify-color-comp__ul_dyk_py4_2mb} 次のサンプルコードは、コンポーネントレベルでの色のスタイリングの参照として使用します。 .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 サーバーに変更を保存します。