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

メモ

Dynamics 365 Commerce のリテール・インタレスト・グループは、Yammer から Viva Engage に移転しました。新しい Viva Engage コミュニティにアクセスできない場合は、このフォーム (https://aka.ms/JoinD365commerceVivaEngageCommunity) に入力して追加し、最新のディスカッションに参加してください。

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

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

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

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

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

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

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

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

[使用可能なプリセット] リストが空の場合は、「カスタムスタイルプリセットを作成する」を参照してください。カスタムスタイルプリセットを作成する方法については、「カスタムスタイルプリセットを作成する」を参照してください。

メモ

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

メモ

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

ヒント

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

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

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

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

メモ

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

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

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

一部のスタイル値は、モジュールの種類に対して一意にすることも、必要に応じて既定のグローバル値をオーバーライドすることもできます。サイトのテーマでモジュールの種類のスタイル変数が実装されている場合、サイトビルダーの作成者は、グローバル設定とは別にモジュールの種類のスタイルをカスタマイズできます。モジュールタイプ変数は、テーマのグローバルスタイル変数を補強または上書きすることができます。

メモ

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

テーマの既定値 <グローバルスタイル値 < モジュールタイプスタイル値< CSS オーバーライド

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

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