コア UIのロゴ、色、およびシステムデフォルトの設定

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

    • [基本構成] コア UI モジュールを使用して、会社のロゴと色でインスタンスをブランディングし、基本的なシステムのデフォルトを設定できます。この場所は、インスタンスを初めてセットアップする場合、または最近インスタンスを有効にした場合に最適な開始ポイントです コア UI。

    始める前に

    以下を収集します。
    • ヘッダーで使用する会社のバナー画像を取得します。画像は高解像度にすることができますが、表示されるときにはアスペクト比に基づいて拡大縮小されます。高さは最大 20 ピクセルまで拡大可能です。
    • 会社のブランド色の 16 進数または RGB 番号を、通常はマーケティング部門から取得します。それらを使用して、UI 背景色の構成方法を決定します。

    必要なロール：admin

    このタスクについて

    各色選択オプションには、色を選択するためのカラーピッカーが用意されています。カラーピッカーの横にあるテキストボックスでは、色の値を次のいずれかの CSS 形式として入力できます。
    • 名前:赤、緑、青など、事前定義された色名
    • RGB 10 進数:RGB (102、153、204)
    • RGB 16 進数：#223344
    HTML カラー名については、「 HTML カラー名 (W3CSchools) 」を参照してください。
    注:
    この情報は、 ネクストエクスペリエンス が有効になっていないインスタンスにのみ適用されます。ネクストエクスペリエンスのテーマ情報については、「ネクストエクスペリエンスでのテーマの操作」を参照してください。

    手順

    1. 移動先 すべて > システムのプロパティ > 基本構成 UI16.
    2. 次のいずれかの設定を変更して構成を完了します。
      表 : 1. システムの基本構成プロパティ
      ラベル プロパティ 説明
      ページヘッダーのキャプション glide.product.description ロゴの横に表示されるテキストを変更します。
      ブラウザタブのタイトル glide.product.name ブラウザータブに表示されるテキストを変更します。
      すべてのユーザーのシステムタイムゾーン (ユーザーのレコードで上書きされない限り) glide.sys.default.tz リスト内のタイムゾーンを選択します。

      [ 利用可能なタイムゾーンを構成] を選択して、ユーザーがユーザー設定で選択できるタイムゾーンを選択します。
      コア UI のバナー画像 glide.product.image.light 画像の横にある [+ ] を選択し、ロゴをアップロードします。
      日付形式

      時間形式

      		 glide.sys.date_format

      glide.sys.time_format

      		 選択リストから日付と時刻の形式を選択します。
      ヘッダーの背景色 css.$navpage-header-bg 色を選択または入力します。
      ヘッダーの背景
      この色は、システム設定の [テーマ] タブのテーマプレビューの一部としても使用されます。
      バナーテキストの色 css.$navpage-header-color 色を選択または入力します。
      バナーテキストの色
      この色は、システム設定の [テーマ] タブのテーマプレビューの一部としても使用されます。
      ヘッダー分割線のストライプカラー css.$navpage-header-divider-color 色を選択または入力します。
      ヘッダー分割線ストライパー
      ナビゲーションヘッダー/フッター css.$navpage-nav-bg 色を選択または入力します。
      ナビゲーション
      ナビゲーション背景の展開されたアイテム css.$subnav-background-color 色を選択または入力します。
      色の違いを表示するために展開されたモジュールを持つアプリケーション
      コア UIアプリケーションナビゲーターのモジュールテキストの色 css.$navpage-nav-color-sub 色を選択または入力します。
      お気に入り、コネクトリスト
      ナビゲーション選択タブの背景色 css.$navpage-nav-selected-bg 色を選択または入力します。
      選択済みタブ
      ナビゲーション選択タブの分割線の色 css.$nav-highlight-bar-active
      [すべてのアプリケーション] タブが選択され、タブの下の線が青色であることを示す矢印が表示されたアプリケーションナビゲーター
      この色は、システム設定の [テーマ] タブのテーマプレビューの一部としても使用されます。
      ナビゲーションの選択されていないタブの分割線の色 css.$nav-highlight-bar-inactive
      [すべてのアプリケーション] タブが選択され、線が別の色であることを示す矢印が他のタブを指しているアプリケーションナビゲーター
      ナビゲーションセパレータの色 css.$nav-hr-color 色を選択または入力します。
      セパレーター
      ナビゲーターとサイドバーの背景 css.$navpage-nav-bg-sub 色を選択または入力します。
      ナビゲーター、サイドバー
      の現在選択されているナビゲーションタブアイコンの色 コア UI css.$navpage-nav-selected-color 色を選択または入力します。
      ナビゲーションアイコン
      選択していないナビゲーションタブアイコンとお気に入りのアイコンの色 css.$navpage-nav-unselected-color 色を選択または入力します。

      選択されていないお気に入りアイコン
      コア UIの境界色 css.$navpage-nav-border 色を選択または入力します。コネクトチャットサイドバーの [ 会話をフィルター する] 検索ボックスの境界線にも影響します。
      フィルターナビゲーター
      選択した基本テーマ glide.ui.base_theme.selected_theme メインコンテンツ (アプリケーションナビゲーターとヘッダー以外) を La Jolla テーマと Cobalt テーマ間で切り替えます。
      ほとんどの設定では、変更を加えると、ページが更新され、変更のプレビューが表示されます。これらの変更が表示されているのは、自分だけです。一部の設定では、変更を確認するには、ログアウトして再度ログインする必要があります。
    3. ページの上部または下部にある [保存 ] を選択します。

    タスクの結果

    構成の変更を保存すると、UI パーソナライゼーションオプションで システム テーマを選択したすべてのユーザーに、新しい構成の色が表示されます。

    ラホーヤとコバルトのテーマ比較

    ラホーヤのテーマは、 ServiceNowの新しいブランドテーマです。Madrid にアップグレードすると、テーマは自動的に La Jolla テーマにアップグレードされます。システムテーマに対して行ったカスタマイズはアップグレードされません。以下のリストにあるスタイルを使用して、スタイルを新しいテーマまたは古いテーマにアップグレードまたは元に戻します。

    これらのスタイルのいずれかを変更するには、次に移動します システムのプロパティ > 基本構成 UI16.

    表 : 2. La Jolla と Cobalt のテーマスタイル
    プロパティ ラホーヤスタイル コバルトスタイル
    ヘッダーの背景色

    css.$navpage-header-bg

    		 #ffffff #303a46
    ヘッダー分割線のストライプカラー

    css.$navpage-header-divider-color

    		 #5a7f71 #455464
    ナビゲーションヘッダー/フッター

    css.$navpage-nav-bg

    		 #293e40 #303A46
    ナビゲーション背景の展開されたアイテム

    css.$subnav-background-color

    		 #213234 #303a46
    UI16 のモジュールテキストの色

    css.$navpage-nav-color-sub

    		 #bec1c6 #bec1c6
    ナビゲーション選択タブの背景色

    css.$navpage-nav-selected-bg

    		 #2f4fe #4b545f
    ナビゲーション選択タブの分割線の色

    css.$nav-highlight-bar-active

    		 #82c9b8 #278efc
    ナビゲーションの選択されていないタブの分割線の色

    css.$nav-highlight-bar-inactive

    		 #213234 #81878e
    ナビゲーションセパレータの色

    css.$nav-hr-color

    		 #293e40 #303a46
    ナビゲーターとサイドバーの背景

    css.$navpage-nav-bg-sub

    		 #293e40 #455464
    UI16 に対して現在選択されているナビゲーションタブアイコン色

    css.$navpage-nav-selected-color

    		 #82c9b8 #ffffff
    選択していないナビゲーションタブアイコンとお気に入りのアイコンの色

    css.$navpage-nav-unselected-color

    		 #bec1c6 #bec1c6
    UI16 の境界色

    css.$navpage-nav-border

    		 #7a828a #ddd
    選択したベーステーマ

    glide.ui.base_theme.selected_theme

    		 ラホーヤ SysID: c92c1ee153002300dda1ddeeff7b125b コバルト SysID:6f3c9ae153002300dda1ddeeff7b124a