SXA テーマ

Current version: 10.1

テーマは、ページまたはサイトのルック アンド フィールを定義し、サイトの機能やコンテンツとは別に作成できます。テーマには、ベース テーマとサイト テーマの 2 種類があります。

SXA には、ワイヤーフレームという名前のデフォルトのサイト テーマが付属しています。サイトをすばやく設定するのに役立ちます。ワイヤーフレーム テーマを使用してサイトを構築することができ、ベース テーマは Creative Exchangeを使用してクリエイティブ エージェンシーに送信できます。サイトをインポートしなおして、新しいテーマを使用してサイトを再スキン化できます。ベース テーマをコピーして独自のクラスを追加し、特定のページの特定のレンダリングにスタイルを適用し、画像、フォント、ファイルなどのアセットを追加することで新しいテーマを作成できます。

テーマの作成を自動化するには、 SXA CLI コマンド ライン ツールを使用できます。これは、アセットをよりきめ細かく制御し、Git などのバージョン管理システムを使用する場合に便利です。SXA ではまた、事前に最適化された最小ファイルを使用してスタイルとスクリプトをアップロードできます

ページ全体にテーマを割り当てるか、または特定のコンポーネントにテーマを割り当てることができます。

ベース テーマ

ベース テーマは、Web サイトのレイアウトをあらかじめ決定するプロトタイプのテーマです。さまざまなデザインの考え方や特定の機能をサポートするために、いくつかのベース テーマを設定できます。

注記

ベース テーマはプラットフォームの一部であるため、変更しないでください。ベース テーマがニーズに合わない場合は、新しいベース テーマを作成して継承することをお勧めします。

ベース テーマの [保護されたテーマ] チェックボックスはオンのままにしてください。[保護されたテーマ] チェックボックスがオンになっている場合、テーマはSitecore.XA.Feature.CreativeExchange.config<restrictedLocations> 設定に追加され、CSS/JS への変更は、Creative Exchange を使用してインポートし直したときに反映されません。

テーマを CE 設定に追加するには、[保護されたテーマ] を選択します。

ベース テーマは、メディア ライブラリの /sitecore/メディア ライブラリ/Base Themes に保存されます。

サイトのテーマ

サイト テーマはベース テーマの拡張であり、特定のサイトに適用できます。サイト テーマは通常、ベース テーマに依存しており、サイトで使用されるすべてのレンダリングのスクリプトとスタイルが含まれています。テーマ内の CSS および JavaScript ファイルは、一度に 1 つのレンダリングを処理するチャンクに分割されます。

サイト テーマごとに、テーマの基本的な特性とプロパティを定義するベース テーマを選択する必要があります。すべてのテーマには、グリッド テーマも必要です。SXA テーマは多重継承をサポートします。これは、単一のテーマごとに複数の親テーマを定義できることを意味します。選択したベース テーマの順序は重要です。新しいテーマを追加したり、順序を変更したりするときは注意してください。たとえば、SearchTheme が Core Libraries にある jquery ライブラリに依存している場合、SearchTheme が他のテーマの後に読み込まれることを確認する必要があります。

デフォルトでは、テーマにはフォント、画像、スクリプト、およびスタイルのフォルダーが含まれています。

デフォルトでは、テーマにはフォント、画像、スクリプト、およびスタイルのフォルダーが含まれています。

次の表は、サイト テーマのフォルダーを示しています。

フォルダー

必須

説明

フォント

任意

フォント アセットを整理する方法の例。このフォルダーはオプションで、別の名前を付けることができます。

画像

必須

画像アセットを整理する方法の例。SXA では直接必要ではありませんが、一部の CSS では設定されたパスへの画像参照を使用する場合があります。

スクリプト

必須

スクリプトを追加するか、使用していないスクリプトを削除するために使用します。上部に近い要素ほど速く読み込まれます。

スタイル

必須

スタイルを追加または削除するために使用します。

注記

スタイル および スクリプトフォルダーの下にフォルダーを追加しないでください。ネスト構造なしで、スクリプトとスタイルをフォルダーに直接配置できます。

スクリプトとスタイルに事前最適化を使用する場合は、テーマのスタイルとスクリプト フォルダーには、ソース アセットではなく、pre-optimized-min ファイルのみ含めてください。

事前に最適化されたテーマの場合、スタイルとスクリプトのフォルダーには、ソース アセットの代わりに事前に最適化された最小ファイルが含まれます。

ワイヤーフレームのテーマ

SXA には、サイトをすばやく設定するのに役立つワイヤーフレームという名前のデフォルトのサイト テーマが付属しています。ワイヤーフレーム テーマを使用してサイトを構築することができ、ベース テーマは Creative Exchange を使用してクリエイティブ エージェンシーに送信されます。ワイヤーフレーム テーマを、フロントエンド開発者によって準備されたサイト テーマと交換できます。

ワイヤーフレーム テーマは SXA のデフォルトのサイト テーマです。

画像のプレースホルダーでモック画像を使用する場合は、[ワイヤーフレーム画像] セクションに移動して、次のフィールドに入力します。

  • [モック画像] - モック画像として表示する画像を指定します。このフィールドを空白のままにすると、画像は表示されません。

  • [画像を拡大] - 選択すると、画像が最大の幅/高さに拡大されます。

  • [背景色] - 画像の背景色を HTML の 16 進数形式で指定します。このフィールドを空白のままにすると、背景は透明になります。

    [ワイヤーフレーム画像] セクションでは、画像プレースホルダーのモック画像を設定できます。

Basic2 テーマ

新しいサイトを作成し、新しいテーマを作成することを選択した場合、このテーマは Basic2 テーマのコピーになります。すぐに使用できるこのテーマには、直接編集してはならない事前最適化ファイルが含まれています。このテーマのコンテンツは、サイト用に作成するテーマのプレースホルダーにすぎません。

ブランディングに取り組むためのテーマを準備するには、 SXA CLI コマンド ライン ツールを使用します。

次の表は、Basic2 テーマのフォルダーを示しています。

フォルダー

必須

説明

フォント

任意

フォント アセットを整理する方法の例。このフォルダーはオプションで、別の名前を付けることができます。

画像

必須

画像アセットを整理する方法の例。SXA では直接必要ではありませんが、一部の CSS では設定されたパスへの画像参照を使用する場合があります。

スクリプト

必須

事前に最適化されたスクリプト ファイルを保存します。

スタイル

必須

事前に最適化されたスタイル ファイルを保存します。このファイルは、Sass プロジェクト ファイルをコンパイルすると自動的に作成されます。

Do you have some feedback for us?

If you have suggestions for improving this article,