AI 検索サービスポータルのテーマを上書きする CSS インクルードを作成して、

会社のブランディングに合わせて、サービスポータルのAI 検索のテーマを上書きします。

始める前に

必要なロール：sp_admin または admin

このタスクについて

サービスポータル の AI 検索 のスタイリング機能の例として、この手順では、検索結果コンテナと検索フィルターの周囲の境界線を削除し、ヒットのハイライト表示色を変更します。追加の CSS 変数を使用して、他のいくつかの機能のスタイルを設定できます。これらの変数の詳細については、「 サービスポータル での AI 検索のテーマ設定」を参照してください。

検索結果コンテナ:検索で取得された各アイテムの周囲の線の境界線を削除します。

検索フィルター:検索フィルターの周囲の境界線を削除します。

ヒットハイライト表示の色:検索されたテキストの検索ヒットを表示する色を変更します。

手順

1. スタイルシートレコードを作成します。
   1. フィルターナビゲーターに「 sp_css.do 」と入力します。
   2. フォームで、フィールドに入力します。

      表 : 1. [スタイルシート] フォーム

      フィールド	説明
      名前	スタイルシートの一意の名前。たとえば、sp_ais.css などです。
      CSS	CSS コードのフィールド。このコードを入力し、変数をカスタマイズします。 検索結果コンテナの境界線を削除するには、このコードを貼り付け、必要に応じてカスタマイズします。 sn-search-results-container { --now-container--border-width: 0px !important; --mv9-JvmzrAmtZ--kvZptZ-9Apz8: 0px !important; --mv9-jvmzramtz--kvzptz-9apz8: 0px !important; } 検索フィルターの境界線を削除するには、このコードを貼り付け、必要に応じてカスタマイズします。 sn-search-facets { --now-color--divider-tertiary: 0px !important; } ヒットハイライトの色を変更するには、目的のRGBカラーをコードに入力します。 sn-search-results-container, sn-search-combobox { --now-color_alert--warning-1: rgb(40,103,178) !important; } 完了すると、カスタマイズが含まれたコードは次のようになります。 sn-search-results-container { --now-container--border-width: 0px !important; --mv9-JvmzrAmtZ--kvZptZ-9Apz8: 0px !important; --mv9-jvmzramtz--kvzptz-9apz8: 0px !important; } sn-search-facets { --now-color--divider-tertiary: 0px !important; } sn-search-results-container, sn-search-combobox { --now-color_alert--warning-1: rgb(40,103,178) !important; }
      アプリケーション	このスタイルシートが適用されるアプリケーション。グローバルとは、スタイルシートがすべてのアプリケーションに適用されることを意味します。

   3. [送信] を選択します。
2. CSS インクルードレコードを作成します。
   1. フィルターナビゲーターに「 sp_css_include.do 」と入力します。
   2. フォームで、フィールドに入力します。

      表 : 2. CSS インクルードフォーム

      フィールド	説明
      名前	CSS インクルードレコードの一意の名前。
      ソース	CSS インクルードのソース。[スタイルシート] を選択します。
      スタイルシート	この CSS インクルードフォームに組み込むスタイルシート。ステップ 1 で作成したスタイルシートを選択します。
      アプリケーション	この CSS インクルードレコードが適用されるアプリケーション。グローバルとは、CSS インクルードがすべてのアプリケーションに適用されることを意味します。
      遅延ロード	CSS インクルードを非同期にロードしてページのロード時間を短縮するオプション。このオプションはテーマのすべての CSS インクルードに対して同じ値に設定する必要があります。テーマに関連付けられた一部の CSS インクルードに対してのみ非同期ロードを有効にすることはお勧めしません。 注: スタイル設定されていないコンテンツが点滅しているポータルで [遅延ロード] を有効にすることはお勧めしません。 [遅延ロード] が有効になっている CSS インクルードは、テーマレコードの [遅延ロード CSS インクルード] 関連リストに一覧表示されます。

3. CSS 上書きをスタイルシートフォームに入力し、UI に適用されているテーマを上書きします。
   1. フィルターナビゲーターに m2m_sp_theme_css_include を入力します。
   2. フォームで、フィールドに入力します。

      表 : 3. [スタイルシート] フォーム

      フィールド	説明
      順序	他のスタイルシートに対してこのスタイルシートを組み込むことを優先する整数。数値が小さいほど、リストの上位に表示されます。一般的な方法は、これらの数値を 100、200、300、400 などの数百にして、将来既存のアイコンの間に新しいアイコンを配置できるようにすることです。
      CSS インクルード	前のステップで作成した上書きを含む CSS インクルード。
      アプリケーション	このスタイルシートが適用されるアプリケーション。グローバルとは、スタイルシートがすべてのアプリケーションに適用されることを意味します。
      テーマ	上書きする UI に適用されるテーマ。

   3. [送信] を選択します。

タスクの結果

検索結果コンテナと検索フィルターの周囲の境界線が削除され、ヒットのハイライト色にカスタム色が表示されます。

• サービスポータル での AI 検索のテーマ設定
  関連する CSS 変数を更新することで、サービスポータル でのAI 検索エクスペリエンスのルックアンドフィールをカスタマイズできます。