---
sourceDocument: オーストラリアのカスタマーサービス管理 (CSM)
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/customer-service-management

 Release :

    - australia

ft:locale :

    - ja-JP

ft:publication_title :

    - オーストラリアのカスタマーサービス管理 (CSM)

ft:clusterId :

    - csm

bundleId :

    - csm

workflow :

    - Customer and Industry


---

# ポータルバナーウィジェットの追加と構成

# ポータルバナーウィジェットの追加と構成 {#ariaid-title1}

* リリースバージョン: Australia
* 
* 更新日 2026年03月12日
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：2分

ポータルバナーウィジェットをポータルに追加し、その表示および動作を変更します。ポータルバナーウィジェットを使用すると、ポータルページにお知らせ、新製品または機能のハイライト、および重要な情報を表示できます。

## 始める前に

UI Components for Customer Portals プラグインがアクティブ化されている必要があります。詳細については、「[UI Components for Customer Portals プラグインのアクティブ化](https://servicenow-prod.fluidtopics.net/~YIqZCUvk_9ai1A_6cyivg "UI Components for Customer Portals プラグイン (sn_ciwf_ui_cmpnt) をアクティブ化すると、構成可能なポータルウィジェットを有効にすることができます。このアプリケーションは、まだインストールされていない関連するプラグインをインストールします。")」を参照してください。

ウィジェットを追加するページをまだ作成していない場合は、「[構成可能なポータルウィジェットのページの作成](https://servicenow-prod.fluidtopics.net/K5kw12h9OFLNz4zaZkqAKA "構成可能なポータルウィジェットを追加できるページを作成します。")」を参照してください。

必要なロール：sp_admin

## このタスクについて

## 手順

1. に移動します すべてサービスポータルサービスポータル構成.
2. \[デザイナー\] を選択します。
3. サービスポータルデザイナーのページで、ウィジェットを追加するページを検索して選択します。
4. コンテナを追加します。
   1. \[ウィジェット\] タブを選択します。
   2. \[レイアウト\] セクションで、コンテナレイアウトをポータル編集ページ上にドラッグします。
   3. コンテナで鉛筆アイコン (![鉛筆アイコン]()) を選択します。
   4. \[幅\] フィールドで \[流動\] を選択します。
   5. \[Save (保存)\] を選択します。
   {#config-portal-banner-widget-inst-opt__substeps_gc3_cp3_3fc}
5. コンテナに列を追加します。
   1. コンテナ上で、プラスボタン (![プラスボタン]()) を選択して列のセットを追加します。
   2. 列で、\[ページのプロパティを編集\] アイコン (![ページのプロパティを編集アイコン]()) を選択します。  
      注:  
      ブレッドクラムナビゲーションで \[列\] が選択されていることを確認します。
   3. サービスポータルデザイナーのバナーの \[ページのプロパティを編集\] アイコン (![ページのプロパティを編集アイコン。]()) を選択します。
   4. \[ページ\] ウィンドウの \[ページ固有の CSS\] フィールドに以下の CSS コードを貼り付けます。  

          .col-md-12{ 
               padding-left: 0;
               padding-right: 0; 
           }
          .padding-top {
               padding-top: 0;
           } 

      アプリケーションスコープに関するメッセージが表示された場合は、\[ここ\] を選択するとレコードを編集できます。
   5. \[Save (保存)\] を選択します。
   {#config-portal-banner-widget-inst-opt__substeps_hfp_np3_3fc}
6. ポータルバナーウィジェットを追加します。
   1. \[ウィジェット\] ペインの \[フィルターウィジェット\] フィールドに「<kbd class="ph userinput">ポータルバナー</kbd>」と入力します。
   2. ウィジェットをコンテナ上にドラッグします。
   3. \[編集\] ページで、ポータルバナーウィジェットを選択します。
   4. 鉛筆アイコン (![鉛筆アイコン]()) を選択します。
   5. \[インスタンス\] フォームの \[プレゼンテーション\] フィールドで、次の JSON コードを \[プレースホルダーテキストを検索 (Search Placeholder Text)\] フィールドに貼り付けます。  

          {
              "title": "enter the title",
              "size": "enter the size of search bar",
              "color": "enter color"
          }

      各パラメーターの詳細については、「[ポータルバナーウィジェットでの検索オプションのスクリプトパラメーター](https://servicenow-prod.fluidtopics.net/3sGETggpIyJBBsDALmdXzQ "ポータルバナーウィジェットでの検索オプションの JSON パラメーターについて説明します。")」を参照してください。
   6. インスタンスフォームの各フィールドに入力します。  
      フィールド値の説明については、「[ポータルバナーウィジェットインスタンスのオプションフォーム](https://servicenow-prod.fluidtopics.net/SPOgouSpmrA7Af6nVrLXYw "インスタンスオプションを使用すると、ポータルページでポータルバナーウィジェットを構成できます。")」を参照してください。
   7. \[保存\] を選択します。
   {#config-portal-banner-widget-inst-opt__substeps_qqr_yp3_3fc}