サービスポータルでの AI 検索のテーマ設定

オーストラリア ServiceNow AI Platform ユーザーインターフェイス

Release

australia

ft:locale

ja-JP

ft:publication_title

オーストラリア ServiceNow AI Platform ユーザーインターフェイス

ft:clusterId

platux

bundleId

platux

workflow

Platform

サービスポータルでの AI 検索のテーマ設定

リリースバージョン: Australia

更新日 2026年03月12日

所要時間：8分

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

次の CSS 変数は、サービスポータルのAI 検索機能のルックアンドフィールを制御します。AI 検索機能の詳細については、「AI 検索の使用」を参照してください。

これらの変数は、テーマ [sp_theme] レコードの CSS 変数フィールドで編集できます。ポータルのテーマに関連付けられた CSS インクルードを使用してこれらの変数を構成することもできます。詳細は、以下のトピックを参照してください。


変数	デフォルト値	説明
`$now-sp-font-family-sans-serif`	`"SourceSansPro"、Helvetica、Arial、サンセリフ`	すべてのテキストのフォントファミリー。
`$now-sp-color--text-primary`	`$grayダーク`	選択されていないタブの色、Genius 結果ボタンのテキスト、ヒットテキストの色、結果アイコン、検索バーのドロップダウンリストアイテムのテキストとアイコンの色。
`$now-sp-text-link--primary--color`	`$grayダーク`	検索結果のタイトルテキストの色。
`$now-sp-display-type--tertiary--color`	`$grayダーク`	検索結果のテキストスニペットの色。
`$now-sp-color--neutral-12`	`$grayダーク`	モバイルビューのファセットの展開されたアイコンの色 (二重山かっこ)。
`$now-sp-global-border-radius`	`4px`	検索結果の角丸は、検索結果カードではなくコンテンツペインに影響を与えます。この変数は、Genius 結果、Genius 結果のボタン、検索バーアイコンホバーの背景ハイライトにも影響します。この変数はファセットには影響しません。
`$now-sp-color--focus-ring`	`$brandプライマリ`	タブのフォーカス色。
`$now-sp-tabs--selected--color`	`$brandプライマリ`	選択したタブのテキストの色。ホバー時は含まれません。
`$now-sp-tabs--color--hover`	`$brandプライマリ`	カーソルを合わせたときのすべてのタブのテキストの色。
`$now-sp-tabs--border-color`	`$sp-b-border-color`	タブの下線の色。
`$now-sp-tabs--selected--background-color`	`$brandプライマリ`	選択したタブの下線の色。
`$now-sp-heading--title-primary--color`	`$grayダーク`	カラーフィルターラベル。
`$now-sp-checkbox-label--color`	`$grayダーク`	フィルターアイテム (チェックボックスラベル) の色。
`$now-sp-button--primary--bare--color`	`$link色`	ファセットフィルターの [すべてクリア] と [リンクの色をクリア] を選択します。
`$now-sp-button--primary--bare--color--active`	`$link色`	クリック時にファセットフィルターの [すべてクリア] と [リンクの色をクリア] を選択します。
`$now-sp-button--primary--bare--color--hover`	`$link-hover-color`	ホバー時のファセットフィルターの [すべてクリア] と [リンクの色をクリア] を選択します。
`$now-sp-pill--selected--background-color`	`$brandプライマリ`	選択したフィルターピルの背景。
`$now-sp-pill--selected--border-color`	`$brandプライマリ`	選択したフィルターピルの境界色。
`$now-sp-button--secondary--background-color`	`$btn-default-bg`	Genius 結果ボタンの背景。
`$now-sp-button--secondary--color`	`$btn-default-color`	Genius 結果ボタンのテキストの色。
`$now-sp-button--secondary--border-color`	`$btn-default-border`	Genius 結果ボタンの境界色。
`$now-sp-button--secondary--background-color--hover`	`暗くする($btn-default-bg, 10%)`	カーソルを合わせたときの Genius 結果ボタンの背景色。
`$now-sp-button--secondary--color--hover`	`$btn-default-color`	カーソルを合わせたときの Genius 結果ボタンのテキストの色。
`$now-sp-button--secondary--border-color--hover`	`暗くする($btn-default-border, 12%)`	カーソルを合わせたときの Genius 結果ボタンの境界線。
`$now-sp-button--secondary--background-color--active`	`暗くする($btn-default-bg, 10%)`	クリック時の Genius 結果ボタンの背景。
`$now-sp-button--secondary--color--active`	`$btn-default-color`	クリック時の Genius 結果ボタンのテキスト色。
`$now-sp-button--secondary--border-color--active`	`暗くする($btn-default-border, 12%)`	クリック時の Genius 結果ボタンの境界色。
`$now-sp-highlighted-value--tertiary--color`	`$grayダーク`	Genius 結果 [上位の結果] タグのテキスト色。
`$now-sp-button--border-radius`	`$now-sp-global-border-radius`	ボタンと検索バーボタンの半径を区別します。
`$now-sp-container--border-radius`	`$now-sp-global-border-radius`	検索結果カード、Genius 結果カード、および検索結果コンテナの境界線の半径。個々の結果間の境界には影響しません。
`$now-sp-button--primary-negative--background-color`	`$btn-primary-bg`	EVAM アクション確認モーダルの Genius ボタン背景色。
`$now-sp-button--primary-negative--border-color`	`$btn-primary-border`	EVAM アクション確認モーダルの Genius ボタンの境界線の色。
`$now-sp-button--primary-negative--background-color--hover`	`暗くする ($btn-プライマリ-BG, 10%)`	EVAM アクション確認モーダルでカーソルを合わせたときの Genius ボタンの背景色。
`$now-sp-button--primary-negative--border-color--hover`	`darken($btn-primary-border, 12%)`	確認内にカーソルを合わせたときの Genius ボタンの境界色。
`$now-sp-button--primary-negative--background-color--active`	`暗くする ($btn-プライマリ-BG, 10%)`	確認モーダル内をクリックしたときの Genius ボタンの背景色。
`$now-sp-button--primary-negative--border-color--active`	`darken($btn-primary-border, 12%)`	確認モーダル内をクリックしたときの Genius ボタンの境界色。
`$now-sp-button--primary--background-color`	`$btn-primary-bg`	選択したフィルター (ピル) の背景色。
`$now-sp-button--primary--border-color`	`$btn-primary-border`	選択したフィルター (ピル) の境界色
`$now-sp-button--primary--color`	`$btn-primary-color`	選択したフィルター (ピル) の色。
`$now-sp-button--primary--background-color--hover`	`暗くする ($btn-プライマリ-BG, 10%)`	カーソルを合わせたときに選択されたフィルター (ピル) の背景色。
`$now-sp-button--primary--border-color--hover`	`darken($btn-primary-border, 12%)`	カーソルを合わせたときに選択されたフィルター (ピル) の境界色。
`$now-sp-button--primary--background-color--active`	`暗くする ($btn-プライマリ-BG, 10%)`	クリック時に選択されたフィルター (ピル) の背景色。
`$now-sp-button--primary--border-color--active`	`darken($btn-primary-border, 12%)`	クリック時の選択されたフィルター (ピル) の境界色。
`$now-sp-rem-factor`	`5`	`--classicsponlydonotuse--rem-multipy` と同じ変数です。注: この変数を使用することはお勧めしません。
`$sp-search-result-title-highlight--background-color`	なし	検索結果でタイトルがハイライト表示されるテキスト背景色。注: このテーマ設定を有効にするには、次の例に示すように、関連する EVAM ビューテンプレートの `sn-search-result-evam-card` コンポーネントに値`「false」`の静的値 `removeHitHighlighting` を追加する必要があります。 `{ "component": "sn-search-result-evam-card", "staticValues": { "removeHitHighlighting": { "translatable": true, "key": "false" } }, }` EVAMビューテンプレートの設定の詳細については、「Define an EVAM view template」を参照してください。

サービスポータル での AI 検索のテーマ設定

サービスポータルでの AI 検索のテーマ設定