バナーの変更方法の例

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間:3分
  • インスタンスのバナーを変更するには、さまざまな方法があります。

    注:
    San Diegoリリース以降、glide.product.descriptionを更新する代わりにバナーのお知らせを設定します。詳細については、「ネクストエクスペリエンスバナーのお知らせの構成」を参照してください。

    複数のインスタンスに異なるラベルを付ける

    • すべてのインスタンスで、 glide.product.description <空白のままにします>
    • 本番インスタンスで、 glide.product.name を <自分の会社> に設定します
    • 開発インスタンスで、 glide.product.name を <自分の会社 - 開発> に設定します

    ウィンドウタイトルを制御する

    ウィンドウタイトルは glide.product.nameglide.product.descriptionで構成されているため、以下を使用してバナーとウィンドウタイトルを完全に制御できます。
    • glide.product.name <必要なウィンドウタイトルに設定します>
    • glide.product.name.style <display: none に設定>
    • glide.product.description <空白に設定>

    会社レコードの [ バナー画像 ] と [バナーテキスト ] は、会社のバナーテキストがウィンドウタイトルに使用されないため、バナー画像とバナーテキストの設定に使用されます。

    バナーテキストで HTML を使用

    • glide.product.name <自分の会社> に設定
    • glide.product.name.style <display: none に設定>
    • glide.product.description <一部のテキスト <a href="some_url">ここをクリック</a>> に設定

    バナー画像の上にバナーテキストを配置する

    • glide.product.name <自分の会社> に設定
    • glide.product.name.style <display: none に設定>
    • glide.product.image <あなたの会社のlogo.gif>に設定
    • glide.product.description <説明のテキスト>に設定します
    • glide.product.description.style <position:absolute に設定します。上:5px;左:100px> (位置値は指定されたニーズによって異なる場合があります)

    バナーに背景画像を適用

    多くの場合、企業ガイドラインでは、 ServiceNow インターフェイスのより詳細なブランディングが必要です。タイリング手法を使用すると、ロゴ画像を背景が透明になるように変更して、ロゴの下のバナーに別の画像を適用できます。

    イメージマネージャーにイメージをアップロードし、 css.banner.background.image という名前の新しいプロパティを作成して、イメージを呼び出せるようにします。値は次のようになります。

    css.banner.background.image 値 url('./images/MasterBG.jpgx')

    この変更を適用する CSS ルールを記述します

    /** BACKGROUND - These properties allow you use to add a background tile to the header of the instance  ***************************/
    TD.bannerLeft,TD.bannerCenter,TD.bannerRight, TR#banner_row{background-color: ${banner.background.color};
    background-image: ${banner.background.image};
    background-position: ${banner.background.position};
    background-repeat: ${banner.background.repeat};}
    注:
    同じ効果を得るために、 glide.product.image プロパティと glide.product.description プロパティの代わりに、第 1 会社または特定の会社に関連付けられたバナー画像とバナーテキストを使用できます。