バナーの変更方法例

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月01日
  • 読む3読むのに数分
  • インスタンスのバナーを変更するには、さまざまな方法があります。

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

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

    • すべてのインスタンスで、<空白のまま glide.product.description にします>
    • 本番インスタンスで、[<My Company] に設定します glide.product.name >
    • DEV インスタンスで、<My Company - DEV> に設定します glide.product.name

    ウィンドウタイトルの制御

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

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

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

    • glide.product.name <My Company> に設定
    • glide.product.name.style <display: none> に設定
    • glide.product.description &lt;テキスト <a href="some_url">はここ</a>をクリック>に設定します。

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

    • glide.product.name &lt;My Company> に設定
    • glide.product.name.style &lt;display: none> に設定
    • glide.product.image [&lt;your company logo.gif>] に設定します
    • glide.product.description &lt;説明用のテキスト>
    • glide.product.description.style &lt;position:absolute; に設定します。トップ:5px;left:100px> (位置の値は指定されたニーズによって異なる場合があります)

    バナーに背景画像を適用する

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

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

    css.banner.background.image value 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.descriptionプロパティの代わりにglide.product.image使用して、同じ効果を得ることができます。