ユースケース:SLDS スタイルを使用したレイアウトテキストの変更

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間:2分
  • Salesforce Lightning デザインシステムにスタイルを実装して、テキストの外観を制御する方法について説明します。

    アドミニストレーターは、Salesforce Lightning Design System (SLDS) スタイルを使用して、 CPQ コンフィギュレーター UI のテキストの外観をある程度制御できます。この機能は完全にはサポートされておらず、多くのシナリオで制限される可能性があることに注意してください。利用可能な SLDS スタイルについては、 この Salesforce ドキュメント を参照してください。

    完全なサポートがないため、SLDS クラスを利用すると、現場のすべてに影響します。つまり、「slds- text-title_bold」を使用すると、フィールド内のすべてが太字になります。したがって、クラスを挿入してスタイリングを分離するために新しいフィールドを作成する必要があるため、ユースケースにSLDSスタイリングを使用できるかどうかを検討してください。その結果、良いユースケースはスタイルを使用してヘッダーを作成することであり、それをこの記事の基礎として使用します。

    SLDS を使用してヘッダーを作成する場合、最初のステップは、ヘッダーが必要なフィールドを特定し、それらがレイアウトに表示されることを確認することです。次に、レイアウト画面からフィールドに移動し、そのラベルを削除します。これにより、フィールドの変数名のみが残ります。

    グラフィックカード

    次に、新しいテキストフィールドを作成し、テキストを指定します。この新しいフィールドは既存のフィールドの上に配置され、基本的にその「ヘッダー」として機能します。レイアウトに配置し、ラベルを削除します。レイアウトはこの例のようになります。

    注:
    新しいフィールドを作成する代わりに、テキストをレイアウトに直接追加することもできます。下の画像では、下矢印をクリックしてテキストを作成します。ただし、フィールドを使用する場合とは異なり、条件付きでテキストを非表示にすることはできません。

    グラフィックカード

    最後に、レイアウトで、ヘッダーとして機能する作成した新しいフィールドにカーソルを合わせ、歯車をクリックしてフィールドプロパティを表示します。[クラス名] で、目的の SLDS クラスを追加します。この例では、 slds-text-heading_largeを使用しています。

    フィールドプロパティ

    詳細計画を再展開すれば完了です。コンフィギュレーターで該当する製品を開き、結果を確認します。

    グラフィックカード