テーマによる CPQ のカスタマイズ

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間:3分
  • カスタムテーマを使用すると、レイアウトをカスタマイズできます。機能イネーブルメント要求を送信することで、カスタムテーマを有効にすることができます。

    CPQ アドミンユーザーは、カスタムテーマを編集してレイアウトのルックアンドフィールをカスタマイズできます。

    レイアウトエディターでカスタムテーマオプションにアクセスするには、 CPQ 機能イネーブルメント要求を送信してテーマを有効にします。

    はじめに

    詳細計画ページからレイアウトを選択し、ページの上部にある [テーマのカスタマイズ] タブをクリックします。

    注:
    このタブは、テナントでテーマ機能が有効になっている場合にのみ表示されます。

    テーマをカスタマイズ

    [テーマをカスタマイズ] タブで、[ テーマを有効にする] をクリックしてオンにします。(デフォルトでは、このオプションはオフになっています)。

    テーマテスト

    このオプションをオンにすると、テーマエディターの画面全体が表示されます。

    ビジュアルエディター

    ビジュアルエディターには、5 セットのオプションとインタラクティブなプレビューが含まれています。標準の CPQ テーマがデフォルトで適用されますが、任意のフィールドを変更してテーマのカスタマイズを開始できます。

    インタラクティブプレビュー画面にデフォルトオプションを表示するビジュアルエディター

    ビジュアルエディターでは、次のオプションを使用できます。

    表 : 1. ビジュアルエディターのオプション
    オプション 説明
    ルートテキストの色 レイアウトで使用されるデフォルトのフォントの色
    プライマリ色 ボタンと選択に最も頻繁に使用される色
    プライマリ背景色 背景とコンテナに使用されるデフォルトの色
    セカンダリ背景色 展開可能なセクションの背景などの階層アイテムに使用されるデフォルトの色
    ニュートラルの色 ヒントテキストなどのフィールドに使用されるセカンダリ色
    成功の色 成功メッセージバナーの背景色
    情報の色 ニュートラルメッセージバナーの背景色
    警告の色 警告メッセージバナーの背景色
    エラーの色 エラーメッセージとフィールドの検証用の色
    フォントサイズ デフォルトのフォントサイズ。小、中、大
    境界半径 0 = 正方形、16 = 丸いフィールドの境界線形状を決定します
    境界幅 フィールドの境界線の全体的なサイズを決定します。なし、標準、太線
    スペーシング レイアウトの全体的なパディングを決定します。タイト、ノーマル、ルーズ

    JSON エディター

    JSON エディターでは、テーマに含まれる任意の要素に上書きを使用して、さらに制御できます。

    デフォルトでは現在のテーマの値が表示されますが、ユーザーは新しいキーと値のペアを手動で入力してテーマを変更できます。テーマ JSON の構造は、エディターで既に提供されています。エディター内をクリックすると、ユーザーがコードブロックを入力できるようになります。ビジュアルエディターで行われた変更は JSON エディターで表示され、その逆も同様です。

    テーマの詳細

    トグルは、テーマ全体を破棄せずに元に戻すことができるフィールドの参照として、標準 CPQ テーマの非表示または表示を切り替えます。

    サンプルデータに含まれていないレイアウト要素を上書きする場合は、レイアウトを調べて、変更するフィールドを決定できます。「--lgk-」で始まるフィールドは、テーマ内でカスタマイズできます。

    次の例は、トグルの検査を示しています。

    トグルボタンのコード

    要素を上書きするには、テーマの上書きのプロパティセクションでフィールド名と変更された値を追加します。形式には --lgk- を含めるのではなく、「 fieldname」:「value」だけにする必要があります。

    テーマの上書きの例を次に示します。

    カスタムテーマ

    カスタムフォントの使用

    テーマは、ビジュアルエディターまたは JSON エディターのいずれかに入力されたホストされた URL を介してカスタムフォントをサポートできます。このフォントファイルは、テーマにアクセスできるようにホストする必要があります。カスタムフォントの場合は、名前とフォントソース URL を指定する必要があります。

    カスタムフォントリンクのユーザーインターフェイス