サービスポータル デザイナーを使用したページの作成と編集

  • リリースバージョン: Australia
  • 更新日 2026年04月22日
  • 所要時間：10分

    • ページを作成または編集し、レイアウトを使用してウィジェットを格納する列を整理します。

    始める前に

    必要なロール：sp_admin または admin

    このタスクについて

    これらの手順は、コーディング経験がほとんどまたはまったくないユーザーを対象としています。サービスポータルデザイナーには、ページ上の特定の構成でウィジェットを追加するだけでなく、CSS クラスを追加することまで、いくつかのカスタマイズレイヤーが含まれています。

    手順

    1. 移動先 すべて > サービスポータル > サービスポータル構成.
    2. [デザイナー] を選択します。
    3. ヘッダーのポータル名を選択して、ページを設計するポータルに切り替えます。
      ポータル名「SP」が強調表示されたサービスポータルデザイナーのヘッダー
    4. サービスポータルデザイナーから、カスタマイズするページを選択するか、[新しいページを追加] を選択します。
    5. [レイアウト] で [ コンテナ] を選択し、ページ上にドラッグします。
    6. 他のレイアウトのいずれかをドラッグしてコンテナにドロップします。
      このレイアウトでは、ページの構造とウィジェットをドロップできるスペースを定義します。レイアウトの構造はブートストラップグリッドテンプレートに合わせており、合計すると最大 12 になります。
    7. フィルターを使用してウィジェットを検索し、ウィジェットをレイアウトにドラッグします。
      図 : 1. コンテナ、レイアウト、次にウィジェットをページにドラッグします
      コンテナ、レイアウト、ウィジェットをページにドラッグする方法を示す GIF

      デフォルトで情報が含まれていないウィジェットの場合は、ポータルページに表示する前に、ウィジェットインスタンスのオプションを設定する必要があります。ウィジェットインスタンスオプションの設定の詳細については、「 ウィジェットインスタンスの設定」を参照してください。

    8. オプション: ページのプロパティを編集します。
      1. [ ページのプロパティを編集] を選択します。
        ページテーブル [sp_page] のページレコードが開きます。
      2. フォームを編集します。
        表 : 1. ページフィールド
        フィールド 説明
        タイトル ページの内部名。タイトルを使用して、サービスポータルデザイナーでページを検索します。
        ID ページの一意の ID。この ID は、ページをポータルに割り当てるために使用します。また、ページの URL ( https://instance name.service-now.com/doc_portal/?id=doc_page など) も決定され、doc_page はページ ID です。
        アプリケーション アプリケーションスコープです。
        公開 認証を必要とせずにページにアクセスできるようにします。[ 公開 ] を選択すると、リストされているロールに関係なく、すべてのユーザーがページを表示できます。
        ドラフト ページを作成している間は、ページを表示できないユーザーを制限するために、ページをドラフトとしてマークします。アドミンロールを持つユーザーのみがドラフトのページを表示でき、他のすべてのユーザーには 404 ページが表示されます。
        ロール ロールによってページへのユーザーアクセスを制限します。
        簡単な説明 ポータルページについて説明します。このフィールドは公開されていません。
        ページ固有の CSS ページにページ固有の CSS がない限り、ページはテーマとブランディングから CSS を継承します。ページの外観を変更する必要がある場合は、ページ固有の CSS がテーマとブランディングからの継承を上書きします。
        動的ページタイトル

        ページにロードされたコンテンツに応じて説明的なタイトルを生成する変数を作成します。

        詳細については、「ページへの動的タイトルの追加」を参照してください。
        ページのクローン 変更可能なページのコピーを作成できます。ベースシステムページをコピーすると、ページ上のウィジェットごとに新しいウィジェットインスタンスが作成されます。
        SEO スクリプトを使用

        正規 URL と hreflang タグの SEO タグを追加するスクリプトインクルードを有効にするオプション。

        詳細については、「ポータルページのローカライズバージョンの SEO を有効にする」を参照してください。
        SEO スクリプト

        ページに適用するスクリプトインクルード。デフォルトでは、システムは SPSEOHeaderTags スクリプトインクルードを使用します。これには、 サービスポータルアナリティクス ページの正規 URL と hreflang タグのデフォルト実装が含まれています。
        人間が判読できる URL 構造

        人間が判読できるキーワードをページ URL に追加して、公開ページの検索エンジン最適化 (SEO) とクリックスルー率を向上させます。人間が判読できる URL は、公開ページと非公開ページのページで想定されることをユーザーが理解するのにも役立ちます。例: https://<instance>/kb/en/faq/what-is-a-cookie?id=kb_article_view&sysparm_article=KB0000007。

        詳細については、「人間が判読できるキーワードをページ URL に追加する」を参照してください。
    9. オプション: コンテナのプロパティを編集します。
      1. 編集するコンテナ内を選択するか、ブレッドクラムで [コンテナ ] を選択します。
      2. 編集アイコン [ 編集アイコン] を選択します。
        コンテナテーブル [sp_container] のコンテナレコードが開きます。
      3. フォームを編集します。
        表 : 2. コンテナフィールド
        フィールド 説明
        名前 コンテナーの内部名。
        順序 コンテナがページに表示される順序。コンテナを他のすべてのコンテナの上に表示されるように設定するには、[ 順序] フィールドでコンテナに最も小さい番号を指定します。
        ページ コンテナーを含むページ。
        スクリーンリーダータイトル スクリーンリーダーで使用されるタイトル。
        セマンティックタグ コンテナーを含むセマンティック HTML タグ。次のオプションが含まれます。
        • なし:ページのヘッダーとフッターの間のすべてのコンテンツが <main> タグに含まれます。
        • メイン: <main> タグには、コンテナーとそのコンテンツのみが含まれます。<main> タグは、ページのメインコンテンツを含むセマンティック HTML 要素です。これは、ページに固有のコンテンツに適用する必要があり、ページ上の 1 つの要素に対してのみ構成する必要があります。
          注:
          <main> タグは、コンテナ、行、または列に適用できます。詳細については、「ページのメインタグの構成」を参照してください。
        • ヘッダー: <header> タグは導入コンテンツとして使用されます。ページごとに複数回使用できます <article> タグを含む行にあります。
        • Nav: The <nav> タグはページレベルのナビゲーションで使用されます。各ページで複数回使用できます。
        • セクション: <section> タグは、共通の見出しまたはテーマの下に関連コンテンツをグループ化します。
        • 記事: <article> タグは、単独でも再利用も可能な自己完結型のコンテンツです。
        • 詳細: <details> タグは展開/折りたたみセクションで使用でき、FAQ を対象としています。
        • サマリー: <summary> タグは最初の子です <details> をクリックしやすいラベルとして機能します。
        • 時間: <time> タグは、日付、時刻、および期間を表します。機械可読な値を追加します。
        • 図のキャプション: <figcaption> タグは次の子としてのみ有効です <figure> 図のキャプションを提供します。
        アプリケーション アプリケーションスコープです。
        幅 コンテナの幅。次のオプションが含まれます。
        • 固定
        • 流動
        親クラス コンテナーの親 CSS クラス。
        CSS クラス コンテナーの CSS クラス。ページ固有の CSS を上書きします。
        背景色 コンテナの背景色。
        背景画像 コンテナの背景画像。
        背景スタイル 背景画像の表示スタイル。次のオプションが含まれます。
        • デフォルト
        • カバー
        • 封じ込め
        • 繰り返し
        ブートストラップの代替 このフィールドを選択すると、標準のブートストラップグリッドクラスが削除され、コンテナ内のブートストラップグリッドシステムが無効になります。選択すると、以下は適用されません。
        • コンテナーレコードの [幅] フィールド。
        • コンテナー内の行レコード内の標準ブートストラップクラス。
        • コンテナ内の列レコードの [サイズ - xs]、[ サイズ - sm]、[ サイズ - md]、および [サイズ - l] フィールド。

        コンテナ、行、および列のレコードにカスタム CSS クラスと CSS を提供する場合にのみ、このフィールドを選択します。
        ヘッダーに移動 選択すると、コンテナはヘッダーに固定され、スクロールしません。このオプションを使用して、サブヘッダーを作成します。
    10. オプション: 別のページに切り替えるには、左側のペインで [ページ ] タブを選択し、構成する次のページを選択します。
    11. オプション: ヘッダーの [プレビュー] ボタンを使用して、ページを設計しながら表示します。
      プレビュー を使用して、 ヘッダーに表示されるコントロールを使用してモバイルまたはタブレットモードでページを表示することもできます。
      図 : 2. デザイナータブレットビュー
      iPad ビューモードを選択した状態でのページプレビュー。

    ページへのサブヘッダーの追加

    ページサブヘッダーとして使用するコンテナレコードを選択します。サブヘッダーはページヘッダーに固定され、スクロールしません。

    始める前に

    必要なロール：admin

    手順

    1. 移動先 すべて > サービスポータル > サービスポータル構成.
    2. [デザイナー] を選択します。
    3. ページを選択します。
    4. ヘッダーのポータル名を選択して、ページを設計するポータルに切り替えます。
      ポータル名「SP」が強調表示されたサービスポータルデザイナーのヘッダー
    5. サブヘッダーとして使用するコンテナを選択するか、ブレッドクラムを使用してコンテナを選択します。
    6. 編集アイコン (編集アイコン) を選択します。
    7. [ ヘッダーへ移動] を選択します。

    タスクの結果

    サブヘッダーとして、コンテナはヘッダーに固着し、スクロールしません。

    ページにフォントアイコンを含める

    ページにフォントアイコンを含めて、ページ上のすべてのウィジェットがフォントアイコンセットにアクセスできるようにします。

    始める前に

    必要なロール：sp_admin または admin

    手順

    1. 移動先 すべて > サービスポータル > ページ をクリックし、フォントアイコンを追加するページをクリックします。
    2. ページレコードに font-icon ファイルを添付します。
    3. ページの [ページ固有の CSS] フィールドで、font-icon 定義の CSS を追加します。
      添付ファイルのsys_idを CSS の ソース として使用します。例： 
      /* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('/828b8ca8b7033010897725cbde11a9f7.iix') format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

    タスクの結果

    このページの任意のウィジェットのアイコンセットからアイコンを選択できます。たとえば、HTML ウィジェットでは、[ ソースコード ] オプションを使用してアイコンを使用できます。例：

    <p style="text-align: center;"><em class="material-icons">flight_land</em></p>