コンポーネントの編集

  • リリースバージョン: Yokohama
  • 更新日 2025年01月30日
  • 所要時間：3分

    • 個々のコンポーネントを編集して テーマビルダー ブランドに適合させ、アクセシビリティのコンプライアンス基準を満たすようにします。編集できるテーマフックは、各タイプのコンポーネントに固有です。

    始める前に

    必要なロール：admin

    このタスクについて

    テーマビルダーで編集できるコンポーネントは、Now Platform デザインシステムで作成されています。詳細については、ServiceNow 開発者サイトの「Next Experience コンポーネント」を参照してください。

    統一ナビゲーション コンポーネントの編集手順については、「統一ナビゲーションコンポーネントを使用してブランドに合わせる」を参照してください。

    アクセシビリティ違反の総数は、アクセシビリティインスペクターパネルの横にある赤い番号付きバッジ、 アクセシビリティインスペクターの番号付きバッジ に表示されます。

    手順

    1. 次のように移動する。 All (すべて) > Now Experience フレームワーク > テーマ > Theme Builder (テーマビルダー).
      テーマビルダーのランディングページがホームページビューに表示されます。
    2. [ページ] ドロップダウンリストを使用して、[エディター] ページビューを選択します。
      図 : 1. エディターページビュー
      エディターページの表示例。
    3. [テーマ] ドロップダウンリストから、コンポーネントを編集するテーマを選択します。
    4. エディターページビューから、[ コンポーネントスタイル ] タブを選択します。
      コンポーネントスタイルがグラフィカルに一覧表示されます。
      コンポーネントスタイル。
    5. [編集] タブを選択します。
      コンポーネントスタイル [編集] タブ。
      注:
      編集可能なコンポーネントが表示されます。コンポーネントのリストをフィルタリングして、編集するコンポーネントを特定する方法については、「 コンポーネントのプレビュー」を参照してください。
    6. 編集するコンポーネントを選択して [構成可能なスタイル] パネルにアクセスします。
      [編集] ページにリストされているコンポーネントを確認すると、一部のコンポーネントに次の記号が表示される場合があります。
      アクセシビリティエラー。
      注:
      アクセシビリティに関する警告記号は、選択したコンポーネントの色のコントラストが、Web コンテンツアクセシビリティガイドライン (WCAG) 2.1 の色のコントラストに関するアクセシビリティ標準に準拠していないことを示します。詳細については、「アクセシビリティ基準を満たすようにコンポーネントを調整する」を参照してください。
    7. [構成可能なスタイル] パネルで、必要に応じて、選択したコンポーネントで利用可能なテーマフックを編集します。
      図 : 2. 構成可能なスタイルパネル
      [構成可能なスタイル] パネル。

      利用可能な編集可能なテーマフックは、選択したコンポーネントのタイプによって異なります。たとえば、バッジコンポーネントを選択すると、バッジの色とアクセシビリティフックを編集できます。テキストリンクコンポーネントを選択すると、ベースカラーとアクセシビリティフックを編集できます。

      注:
      コンポーネント固有のフックを更新した後は、コンポーネント固有のスタイルがグローバルに定義されたスタイルよりも優先されるため、グローバルスタイルに加えた変更はコンポーネントスタイルを更新しません。
    8. 編集する色を選択すると、カラーピッカーが開きます。
      図 : 3. カラーピッカー
      カラーピッカー。
      注:
      デフォルトでは、カラーピッカーにはコンポーネントで利用可能なすべての色が表示されます。[アクセスできない選択肢を非表示にする] スライダーを選択して、現在の Web コンテンツアクセシビリティガイドライン (WCAG) ガイドラインに基づいて、色の選択肢をアクセシブルであると識別された色に制限できます。
    9. 変更が完了したら、[ 変更の保存] を選択します。
    10. コンポーネントエディターにアクセスします。ここでは、次の 2 つの方法のいずれかを使用して、コンポーネントのさまざまな側面のスタイルを設定できます。
      • コンポーネントタイルをダブルクリックします。
      • 構成可能なスタイルパネル内で、その特定のコンポーネントで使用可能なものに応じて、[ スタイルインタラクション]、[ サブコンポーネントのスタイル設定]、または [ バリアントのスタイル設定 ] ボタンのいずれかを選択します。すべてのコンポーネントに編集可能なパーツが含まれているわけではありません。
        図 : 4. [スタイル] ボタンを含む構成可能なスタイルパネル
        [スタイルのバリアント] ボタンが強調表示された構成可能なスタイルパネル。
    11. オプション: ナビゲーションパス内のリンクを使用して、[コンポーネントの概要] 画面に戻ります。
      図 : 5. コンポーネント編集のブレッドクラムナビゲーション
      コンポーネント編集のブレッドクラムナビゲーション。

    タスクの結果

    テーマが現在公開されている場合、コンポーネントの編集内容は、リフレッシュ時にテーマを適用したユーザーに表示されます。テーマの公開の詳細については、「 でテーマを公開する テーマビルダー」を参照してください。