CSS 上書きファイルの作業

[アーティクル]
05/28/2024

この記事では、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 上書きファイルで指定された上書きは、単一のテキストスタイルへの変更と同じくらい小さい場合もあれば、完全なブランドオーバーホールと同じくらい広範囲の場合もあります。

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 を認証された他のコマースユーザーと共有して、確認やフィードバックを行うことができます。