スタイルプリセットの作業

[アーティクル]
07/30/2024

この記事では、Microsoft Dynamics 365 Commerce サイトビルダーでのサイトスタイルプリセットの作業方法について説明します。

スタイルプリセットは、サイトのテーマ全体のすべてのカスタムスタイル値の保存されたセットです。これを使用すると、サイトビルダーからサイトの外観をすぐに変更できます。スタイルのプリセットにより、Commerce サイトビルダーの作成者は、カスケードスタイルシート (CSS) を使用したり、テーマを配置することなく、サイト全体のスタイル値をすばやく変更、プレビュー、およびアクティブにできます。スタイル変数の一般的な例としては、スタイルのプリセットを使用して管理できるフォントスタイル、ボタンスタイル、サイトカラーなどがあります。

サイトで使用できるスタイル変数のセットは、サイトのテナントに配置されているテーマとモジュールライブラリによって決まります。 Dynamics 365 Commerce オンラインソフトウェア開発キット (SDK) を使用すると、開発者は、特定のテーマに対して必要な数のカスタムスタイル変数を実装できるようになります。より多くのスタイル変数を有効にすることによって、テーマ開発者は、サイトビルダーの作成者にサイトスタイルの最終決定を任せることができます。したがって、開発者以外はツールセットを使用してサイトスタイルを更新およびプレビューできます。また、この機能は、テーマや CSS を直接変更したり不要なオーバーヘッドを生じたりするようなシナリオで役に立ちます。

カスタムスタイル変数が有効になっているテーマでは、既定のスタイルプリセットが必要です。必要に応じて、配置されたテーマパッケージの一部として追加のプリセットオプションを含めることができます。たとえば、1 つの既定の "モダンライト" スタイルプリセットを持つテーマを配置することができます。また、既定のプリセットに加えて、"モダンダーク"、"ビンテージライト"、または "ビンテージダーク" などの追加のスタイルプリセットオプションが含まれている場合もあります。これらの組み込みテーマの事前設定は、開発者によって作成され、新しいサイトデザインの開始点として使用できます。

サイトビルダーでは、作成者は、テーマの組み込みプリセットから選択するか、有効なスタイル変数を使用して独自のスタイルプリセットとカスタマイズを作成することができます。実際のサイトで有効にする前に、スタイルプリセットをサイトビルダーでプレビューできます。作成者のスタイルの変更がレビューされた後、スタイルのプリセットを実際のサイトに対して "有効" に設定できます。

スタイルプリセットのプレビュー

サイトビルダーでサイトのスタイルプリセットをプレビューするには、次の手順を実行します。

サイトの左側のナビゲーションウィンドウで、サイト設定 >のデザイン に移動します。
デザインエディターの上部にある スタイルプリセット タブの 使用可能なプリセット リストでプリセットを選択し、表示をクリックしてプリセットエディターに移動します。

現在、使用可能なプリセット の一覧にプリセットが存在しない場合は、カスタムスタイルプリセットの作成を参照してください。

メモ

テーマに含まれていたプリセットは、組み込み のバッジで示されます。これらの組み込みのプリセットは、読み取り専用です。組み込みのプリセットを新しいカスタマイズ可能なプリセットとしてコピーするには、省略記号ボタン (...) を選択し、名前を付けて保存 を選択します。
コマンドバーで、プレビュー を選択します。
スタイルプリセットをプレビューを使用するために自分のサイトからの URL を選択して、OK を選択します。
バリアントの名前を選択して、プレビューするチャンネル固有でロケール固有の URL バリアントを選択します。新しいプレビューブラウザウィンドウが開き、選択したスタイルのプリセットが指定したページに適用されます。

メモ

プレビュー URL は永続的で認証されています。したがって、実際のサイトで "有効" に設定する前に、認証された他の同僚にコピーして貼り付けて送信し、確認することができます。また、プレビュー URL は、さまざまなデバイス、さまざまなブラウザー、さまざまな画面でスタイルをチェックする場合にも役立ちます。

ヒント

スタイルプリセットを編集する間に、別のブラウザウィンドウでプレビューブラウザウィンドウを開いたままにしておくと、変更をすぐに検証できます。プリセットに変更を保存した後、開いたプレビューブラウザウィンドウを更新して、ユーザーエクスペリエンスを検証します。

カスタムスタイルのプリセットを作成する

サイトビルダーでカスタムスタイルプリセットを作成するには、次の手順を実行します。

サイトの左側のナビゲーションウィンドウで、サイト設定 >のデザイン に移動します。
デザインエディターの上部にある スタイルプリセット タブのコマンドバーで、新規プリセット を選択します。
新規プリセットの名前と説明を入力して、保存を選択します。このテーマの既定値を出発点として使用する、新しいカスタマイズ可能なプリセットが作成されます。

メモ

また、既存のプリセットから新しいカスタムスタイルのプリセットを作成するには、そのプリセットの省略符号ボタン (...) を選択し、名前を付けて保存 を選択します。または、プリセットエディタのコマンドバーで 名前を付けて保存 を選択します。

グローバルタイプとモジュールタイプのスタイル値の変更

一部のテーマのスタイル変数は、複数のモジュールタイプの間で共有されます。これらのスタイル変数は、グローバル スタイル変数と呼ばれます。例としては、プライマリサイトの色、既定のフォントスタイル、ボタンのスタイルなどがあります。グローバル変数を設定することにより、さまざまな種類のモジュールに対して外観を変更することができます。

一部のスタイル値は、モジュールタイプに固有の場合もあれば、既定のグローバル値を上書きする必要がある場合もあります。サイトのテーマによって、モジュールタイプのスタイル変数が実装されている場合、サイトビルダーの作成者は、グローバル設定とは別にモジュールタイプのスタイルをカスタマイズできます。モジュールタイプ変数は、テーマのグローバルスタイル変数を補強または上書きすることができます。

メモ

サイトのスタイル値の階層は、次のような方法で動作します。スタイル値は右方向に表示され、その左にあるスタイル値は上書きされます。

テーマの既定値 <グローバルスタイル値 <モジュールタイプスタイル値 <CSS上書き

サイトビルダーでスタイルプリセットのグローバルタイプの値かモジュールタイプの値を変更するには、次の手順に従います。

サイトの左側のナビゲーションウィンドウで、サイト設定 >のデザイン に移動します。
デザインエディターの上部にある スタイルプリセット タブで、プリセットエディターに移動するスタイルプリセットの表示を選択します。
プレビュー を選択し、URLの選択の手順に従って、プリセットのフルブラウザーウィンドウプレビューを開きます。このプレビューブラウザウィンドウは開いたままにしておきます。
プリセットエディターで、右上にある編集を選択します。
グローバルスタイルの値を変更するには、エディターのスタイル変数コントロールを使用します。
エディターの最上部で、グローバル タブの右側にある モジュール タブで、スタイルを設定する必要があるモジュールのタイプを選択します。
スタイルコントロールを使用して、モジュールタイプの値を変更します。
変更をプレビューする準備ができたら、コマンドバーの保存を選択します。
開いているプレビューブラウザーウィンドウに戻り、最新の状態に更新します。完全ブラウザウィンドウのプレビューは、さまざまな表示ブレークポイント、異なるブラウザー、異なるデバイスプラットフォームでスタイルの変更をチェックする場合に役立ちます。
すべての変更が完了して検証されたら、エディターの右上にある 編集の完了 を選択します。