CSS 上書きファイルの作業

メモ

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

この記事では、Microsoft Dynamics 365 Commerce でカスケードスタイルシート (CSS) オーバーライドファイルを使用する方法について説明します。

通常、永続的なサイトスタイルは、サイトのテーマを通じて処理される必要があります。テーマでは、サイトの任意のページにあるモジュールの基本的な CSS およびスタイル設定を提供します。 Dynamics 365 Commerce オンラインソフトウェア開発キット (SDK) を使用してテーマを作成し、Microsoft Dynamics Lifecycle Services (LCS) を使用して Web サイトに展開します。 SDK のテーマデバッグ機能およびモジュールインターフェイスコンフィギュレーションは、サイト開発者がカスタマイズ可能でまとまりのあるサイトデザインパッケージを作成するのに役立ちます。これらのデザインパッケージをサイトに展開すると、サイト作成者はサイト開発ではなくコンテンツの作成、編集、発行に集中できます。

テーマの通常のライフサイクルの場合、SDK と LCS の展開パイプラインを使用してスタイルを変更する開発者への依存は、一部のシナリオでは禁止されることがあります。サイトのプロトタイプまたは修正プログラムは、SDK がコンフィギュレーションされていない場合、または LCS 展開を待つ時間がない場合には煩雑に感じることがあります。

これらのシナリオでは、CSS 上書きファイルが役立ちます。コマース作成ツールでは、認証されたユーザーが CSS ファイルをアップロードし、確認してから、それを有効にしてサイトテーマを上書きできます。 SDK または LCS デプロイのオーバーヘッドは必要ありません。 CSS オーバーライドファイルで指定するオーバーライドは、1 つのテキストスタイルへの変更と同じくらい小さくすることも、完全なブランドのオーバーホールと同じくらい広範囲にすることもできます。

CSS 上書きファイルを使用する前に、次の制限事項に注意してください。

1 つのサイトで一度に有効化できるのは、1 つの CSS 上書きファイルのみです。したがって、すべての有効な上書きが単一の上書きファイルに存在している必要があります。
コマース作成ツールでは上書きを確認できますが、上書きによって導入される任意のバグを特定するのに役立つ専用のデバッグ機能はありません。つまり、CSS 上書きファイルを使用する場合、SDK がモジュールと作成検証に対して提供する同じツールセットはありません。

ただし、CSS 上書きファイルは、完全なテーマの更新が開発および展開される前に、デザインのプロトタイプを作成したり、修正プログラムを実装したりする迅速な方法を提供します。

CSS 上書きファイルの作成

CSS オーバーライドファイルを作成するには、統合開発環境 (IDE)、テキストエディター、またはソースコードエディターを使用します。一般的なアプローチとして、ブラウザーで標準の Web デバッガーを使用して、既存のサイトのスタイルセレクター、プロパティ、および値を識別します。ほとんどのブラウザーでは、デバッガーで値の変更とプレビューを行うことができます。行う変更を特定したら、独自の CSS ファイルに保存します。

CSS 上書きファイルのアップロード

コマースのサイトに CSS ファイルをアップロードするには、次の手順に従います。

作成ツールで、サイトに移動します。
左のナビゲーションウィンドウで、デザインを選択します。

メモ

使用しているコマース作成ツールのバージョンによっては、[デザイン] を選択する前にナビゲーションウィンドウで [設定] を展開することが必要になる場合があります。
メインのデザインウィンドウの上部で、CSS 上書きタブが選択されていない場合はそれを選択します。
使用可能な CSS 上書きで、CSS ファイルのアップロードを選択します。ファイルエクスプローラーウィンドウが表示されます。
ファイルエクスプローラーで、CSS ファイルを参照して選択し、開くを選択します。アップロードした CSS ファイルは、使用可能な CSS 上書きの下に表示されるようになります。

CSS 上書きファイルのプレビュー

CSS オーバーライドファイルをライブサイトでアクティブにする前にプレビューするには、次の手順に従います。

左のナビゲーションウィンドウで、デザインを選択します。 [ CSS オーバーライド ] タブの [ 使用可能な CSS オーバーライド] で、プレビューする CSS ファイルを見つけます。
CSS ファイル名の横にある、プレビューサイトを選択します。
URL の選択ダイアログボックスで、上書きを適用するサイトの URL を選択し、OK を選択します。
選択した URL に対して複数のバリアントがある場合、表示されるプレビューバリエーション ダイアログボックスで目的のバリアントを選択します。

新しいブラウザータブまたはウィンドウが開き、そこでサイトに対するスタイルのオーバーライドを確認できます。その後、URL を認証された他のコマースユーザーと共有して、確認やフィードバックを行うことができます。

実際のサイトで CSS 上書きファイルを有効化する

CSS オーバーライドファイルをプレビューして承認したら、ライブサイトでアクティブ化します。

メモ

サイト上のアクティブな CSS オーバーライドファイルは一度に 1 つだけ持つことができます。新しいオーバーライドファイルをアクティブ化する場合は、前のオーバーライドファイルを非アクティブ化します。必要なすべてのオーバーライドが 1 つの CSS オーバーライドファイルに存在することを確認します。

CSS オーバーライドファイルをアクティブにするには、次の手順に従います。

左のナビゲーションウィンドウで、デザインを選択します。 [ CSS オーバーライド ] タブの [ 使用可能な CSS オーバーライド] で、アクティブ化する CSS ファイルを見つけます。
CSS ファイル名の下で、有効化を選択します。上書きファイルは、実際のサイトで直ちに有効になります。

実際のサイトで CSS 上書きファイルを無効化する

サイトで CSS オーバーライドファイルを非アクティブ化するには、次の手順に従います。

左のナビゲーションウィンドウで、デザインを選択します。 [ CSS オーバーライド ] タブの [ 使用可能な CSS オーバーライド] で、非アクティブ化する CSS ファイルを見つけます。
CSS ファイル名の下で、無効化を選択します。上書きファイルは、実際のサイトで直ちに無効になります。

ヒント

CSS 上書きファイルの追加オプションにアクセスするには、CSS ファイル名の横で省略記号 (...) を選択します。 ダウンロード、名前変更、および置換オプションは、既存の CSS 上書きファイルを迅速に変更するのに役立ちます。