SXAのテーマ

Version: 10.1
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

テーマは、ページまたはサイトの外観を定義し、サイトの機能やコンテンツとは別に作成できます。テーマには、基本テーマとサイト テーマの2種類があります。

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

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

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

基本テーマ

ベーステーマ は、Webサイトのレイアウトを事前に決定するプロトタイプテーマです。さまざまな設計哲学や特定の機能をサポートするために、いくつかの基本テーマを持つことができます。

メモ

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

基本テーマのProtected Themeチェックボックスを選択したままにします。「Protected Theme」チェックボックスをオンにすると、テーマはSitecore.XA.Feature.CreativeExchange.config<restrictedLocations> 設定に追加され、Creative Exchangeを使用して再度インポートしたときにCSS/JSへの変更は反映されません。

Select Protected theme to add the theme to CE settings.

基本テーマは、メディアライブラリに保存されます。 /sitecore/Media Library/Base Themes

サイトのテーマ

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

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

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

A theme contains folders for fonts, images, scripts, and styles.

次の表では、サイト テーマのフォルダーについて説明します。

Folder

Required

Description

フォント

必須ではありません

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

画像

必須

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

スクリプト

必須

スクリプトを追加したり、未使用のスクリプトを削除したりするために使用します。上部に近い要素は、より速く読み込まれます。

スタイル

必須

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

手記

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

スクリプトとスタイルに事前最適化を使用する場合、テーマのスタイルとスクリプトフォルダーにはpre-optimized-minファイルのみが含まれ、ソースアセットは含まれません。

For pre-optimized themes, the styles and scripts folders contain the pre-optimized-min file instead of the source assets.

ワイヤーフレーム テーマ

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

The Wireframe theme is the default site theme for SXA.

イメージプレースホルダーにモックイメージを使用する場合は、Wireframe Imageセクションに移動し、次のフィールドを指定します。

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

  • Stretch Image - 選択すると、画像が全幅/全高に引き伸ばされます。

  • Background Color - 画像の背景色をHTML HEX形式で指定します。フィールドを空のままにすると、背景は透明になります。

    In the Wireframe Image section, you can configure mock images for image placeholders.

Basic2テーマ

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

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

次の表では、Basic2テーマのフォルダについて説明します。

Folder

Required

Description

フォント

必須ではありません

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

画像

必須

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

スクリプト

必須

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

スタイル

必須

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

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、