フォントサイズを編集

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間:3分
  • テーマまたはコンポーネントカテゴリレベルでフォントサイズを調整してデフォルトフォントまたはカスタムフォントを調整し、すべてのエクスペリエンスでブランドの一貫性を維持します。

    始める前に

    必要なロール:ui_builder_admin

    詳細なロールの詳細については、「 Granular admin roles」を参照してください。

    このタスクについて

    グローバル ベース フォント サイズは、他のすべてのタイポグラフ サイズの基礎として機能します。基準値を増減すると、サイズ間の相対的な違いは保持されたまま、すべてのサイズカテゴリが比例してスケーリングされます。

    カテゴリ別にフォントサイズを編集する場合は、サイズ値自体ではなく、カテゴリが使用するサイズ階層を変更します。このアプローチにより、テーマ全体でサイズ値の一貫性と再利用可能な状態を維持しながら、さまざまなタイプのテキストの相対的な強調を調整できます。

    テーマビルダーでのフォントサイズの変更は、テーマを使用する Web 埋め込み可能項目にも適用されます。このアプローチにより、ServiceNow および外部サイトの埋め込みコンポーネント全体で一貫したタイポグラフが保証されます。埋め込み可能項目を使用する場合は、テーマをプレビューして、サイズが期待どおりにレンダリングされることを確認します。
    重要:
    フォントサイズを変更すると、コンポーネントが歪んで表示されたり、テキストの表示方法に予期しない問題が発生したりする可能性があります。

    手順

    1. 移動先 すべて > Now Experience フレームワーク > テーマビルダー.
      テーマビルダーランディングページがホームページビューに表示されます。
    2. [ページ] ドロップダウンリストを使用して、[エディター] ページビューを選択します。
      図 : 1. [ページ] ドロップダウン リスト
      [エディター] が選択されたページのドロップダウンリスト。
    3. [テーマ] ドロップダウン リストから、編集するテーマを選択します。
      [グローバルスタイル] タブが自動的に開き、[概要] パネルが表示されます。
      図 : 2. エディターページビュー
      エディターページの表示例。
    4. [グローバルスタイルの概要] パネルから [タイポグラフ] に移動し、[ サイズ ] タブを選択します。

      タイポグラフは [フォント] と [サイズ] に分割され、サイズの割り当ては [ サイズ ] タブで管理されます。

      図 : 3. グローバルスタイルのタイポグラフ
      選択されたサイズのタイポグラフ。
    5. オプション: グローバルフォントサイズを編集します。
      オプション説明
      グローバルベースフォントを編集 [グローバルサイズ] で、[ベースフォントサイズ] を見つけ、新しいサイズ値を入力します。
      個々のグローバルフォントサイズを編集 [グローバルサイズ] で、[ベースフォントサイズ] を展開します。変更する個々のサイズを見つけて、新しいピクセル値を入力します。
    6. オプション: フォントサイズを元のデフォルトサイズに戻すには、[上書きを削除] アイコン を選択します。
    7. オプション: コンポーネントカテゴリ別にフォントを編集します。
      1. [サイズ別のカテゴリ] セクションに移動します。
      2. 編集するカテゴリを見つけて展開します。
      3. カテゴリを別のサイズ階層にドラッグします。
        カテゴリには、ドロップ先の階層のサイズが決まります。カテゴリをドラッグすると、サイズ値自体ではなく、使用するサイズが変更されます。
      4. オプション: カテゴリを元のデフォルトサイズに戻すには、[上書きを削除] アイコン を選択します。
    8. 利用可能なビューを使用して、さまざまな詳細レベルでタイポグラフを検証します。
      抽象 UI、エクスペリエンス、およびカテゴリの各ビューを切り替えて、カテゴリ全体のフォント割り当てが想定どおりに適用されていることを確認します。

    タスクの結果

    テーマビルダー によってテーマレコードが自動的に保存されます。

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