コンポーネントを編集

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

始める前に

必要なロール：アドミン

このタスクについて

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

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

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

手順

1. 移動先 すべて > Now Experience フレームワーク > テーマ > テーマビルダー.
   テーマビルダーのランディングページがホームページビューに表示されます。
2. [ページ] ドロップダウンリストを使用して、[エディター] ページビューを選択します。

   図 : 1. エディターページビュー

   

3. [テーマ] ドロップダウンリストから、コンポーネントを編集するテーマを選択します。
4. [エディター] ページビューから、[ コンポーネントスタイル ] タブを選択します。
   コンポーネントスタイルがグラフィカルにリストされます。

   

5. [ 編集中 ] タブを選択します。

   

   注:

   編集可能なコンポーネントが表示されます。コンポーネントのリストをフィルタリングして編集するコンポーネントを見つける方法については、「 tb-preview-components.html」を参照してください。
6. 編集するコンポーネントを選択して、[構成可能なスタイル] パネルにアクセスします。
   [編集中] ページにリストされているコンポーネントを見ると、一部のコンポーネントに次の記号が表示される場合があります。

   

   注:

   アクセシビリティ警告記号は、選択したコンポーネントの色のコントラストが、色のコントラストに関する Web コンテンツアクセシビリティガイドライン (WCAG) 2.1 アクセシビリティ標準に準拠していないことを示します。アクセシビリティ違反のあるコンポーネントの編集については、「 アクセシビリティ標準を満たすようにコンポーネントを調整する」を参照してください。
7. [構成可能なスタイル] パネルで、必要に応じて、選択したコンポーネントで使用できるテーマフックを編集します。

   図 : 2. 構成可能なスタイルパネル

   

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

   注:

   コンポーネント固有のフックを更新した後は、コンポーネント固有のスタイルがグローバルに定義されたスタイルよりも優先されるため、グローバルスタイルに変更を加えてもコンポーネントスタイルは更新されません。
8. 編集する色を選択すると、カラーピッカーが開きます。

   図 : 3. カラーピッカー

   

   注:

   デフォルトでは、カラーピッカーにはコンポーネントで使用可能なすべての色が表示されます。[アクセスできない選択肢を非表示にする] スライダーを選択すると、Web コンテンツアクセシビリティガイドライン (WCAG) ガイドラインに基づいて色の選択肢をアクセス可能と識別された色に限定できます。
9. 変更が完了したら、[ 変更を保存] を選択します。
10. コンポーネントエディターにアクセスし、次の 2 つの方法のいずれかを使用して、コンポーネントのさまざまな側面のスタイルを設定できます。
    • コンポーネントタイルをダブルクリックします。
    • 特定のコンポーネントで使用可能なものに応じて、構成可能なスタイルパネル内で [ スタイルのインタラクション]、[ サブコンポーネントのスタイル]、または [バリアントのスタイル ] ボタンのいずれかを選択します。
      注:

      すべてのコンポーネントに編集可能な部品が含まれているわけではありません。

      図 : 4. [バリアントのスタイル] ボタンがある構成可能なスタイルパネル

      

11. コンポーネントエディターから、選択したコンポーネントのインタラクション、バリアント、またはサブコンポーネントを選択し、利用可能なテーマフックを編集します。
    注:

    いずれかのカラーフックへの変更を保存すると、[上書きを削除] 記号が表示されます。[上書きを削除] 記号を使用すると、色の変更を元の自動生成色に戻すことができます。

    

12. オプション: ナビゲーションパス内のリンクを使用して、[コンポーネントの概要] 画面に戻ります。

    図 : 5. コンポーネント編集ブレッドクラムナビゲーション

    

タスクの結果

テーマが公開されている場合、更新時にテーマが適用されているユーザーにコンポーネントの編集内容が表示されます。テーマの公開については、「 テーマビルダーでテーマを公開する」を参照してください。