SXAのテーマ
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
テーマはページやサイトの見た目や雰囲気を定義し、サイトの機能やコンテンツとは別に作成することができます。テーマにはベーステーマとサイトテーマの2種類があります。
SXAにはWireframeというデフォルトのサイトテーマが付属しており、サイトの設定を素早くサポートします。サイトはWireframeテーマで作成でき、その間にベーステーマはCreative Exchangeを使ってクリエイティブエージェンシーに送られます。インポートすると、新しいテーマでサイトを再スキンできます。ベーステーマをコピーして自分のクラスを追加し、特定のページのレンダリングにスタイルを適用し、画像やフォント、ファイルなどのアセットを追加することで 新しいテーマを作成できます 。
テーマ作成の自動化には、SXAのCLIコマンドラインツールを使えます。これは、Gitのようなバージョン管理システムを使って資産をよりコントロールしたい場合に便利です。SXAは、スタイルやスクリプトのアップロードに最適化済みの最小ファイルも使えます。
テーマをページ全体に割り当てるか、特定のコンポーネントに割り当てることができます。
基本テーマ
ベーステーマ は、ウェブサイトのレイアウトをあらかじめ決めるプロトタイプテーマです。異なるデザイン哲学や特定の機能を支えるために、複数のベーステーマを持つことができます。
!注ベーステーマはプラットフォームの一部なので変更しないでください。ベーステーマがニーズに合わない場合は、新しいベーステーマを作成して継承する方が良いでしょう。
基本テーマについては「保護されたテーマ」のチェックボックスを選択したままにしてください。保護されたテーマのチェックボックスを選択すると、テーマはSitecore.XA.Feature.CreativeExchange.configの
基本テーマはメディアライブラリに保存されています: /sitecore/Media Library/Base Themes。
サイトのテーマ
サイトテーマはベーステーマの拡張であり、特定のサイトに適用可能です。サイトテーマは通常ベーステーマに依存し、サイトで使用されるすべてのレンダリングに対してスクリプトやスタイルを含みます。テーマ内のCSSおよびJavaScriptファイルは、一度に一つのレンダリングを処理するチャンクに分割されています。
各サイトテーマごとに、そのテーマの基本的な特性やプロパティを定義するためにベーステーマを選択しなければなりません。すべてのテーマにはグリッドテーマも必要です。SXAテーマは複数の継承をサポートしています。つまり、すべてのテーマに対して複数の親テーマを定義できます。選択されたベーステーマの順序は重要です。新しいテーマを追加したり、順序を変更したりする際は注意してください。例えば、SearchThemeがCore Librariesにあるjqueryライブラリに依存している場合、SearchThemeは他のテーマの後に読み込まれるようにしてください。
デフォルトでは、テーマにはフォント、画像、スクリプト、スタイル用のフォルダが含まれています:
以下の表は、サイトテーマ内のフォルダを説明しています。
フォルダー
必須
概要
フォント
必須ではありません
フォントのアセットを整理する方法の例です。このフォルダは任意で、名前を変えることも可能です。
画像
必須
画像アセットを整理する方法の例です。SXAに直接必須ではありませんが、一部のCSSは画像を参照して設定されたパスを使うことがあります。
文字
必須
スクリプトの追加や未使用のスクリプトの削除に使えます。上部に近い要素は読み込みが速くなります。
スタイル
必須
スタイルの追加や削除に使えます。
!注スタイルやスクリプトフォルダの下にフォルダを追加してはいけません。スクリプトやスタイルは、入れ子構造なしで直接フォルダ内に入れることができます。
スクリプトやスタイルに事前最適化を使う場合、テーマのstyleやscriptsフォルダにはpre-optimized-minファイルのみが入り、ソースアセットは含まれません。
ワイヤーフレームのテーマ
SXAにはWireframeというデフォルトのサイトテーマが付属しており、サイトのセットアップを素早くサポートします。サイトはWireframeテーマで作成でき、その間にベーステーマはCreative Exchangeを使ってクリエイティブエージェンシーに送られます。フロントエンド開発者がWireframeを準備した後、サイトテーマと入れ替えることができます。
画像のプレースホルダーにモック画像を使いたい場合は、ワイヤーフレーム画像 セクションに行き、以下のフィールドを指定します。
-
Mock Image - モック画像として表示される画像を指定する。フィールドが空のままの場合、画像は表示されません。
-
Stretch Image - 選択すると画像が幅と高さの全幅に引き伸ばされます。
-
Background Color - 画像の背景色をHTMLの16進形式で指定します。フィールドが空のままの場合、背景は透明になります。
Basic2のテーマ
新しいサイトを作成し、新しいテーマを作成する場合、このテーマはBasic2テーマのコピーとなります。このテーマには、箱から出してから直接編集してはいけない事前最適化されたファイルが含まれています。このテーマの内容は、あなたがサイト用に作成したテーマのプレースホルダーに過ぎません。
ブランディング作業のためにテーマを準備するには、SXAのCLIコマンドラインツールを使いましょう。
以下の表はBasic2テーマ内のフォルダについて説明します:
フォルダー
必須
概要
フォント
必須ではありません
フォントのアセットを整理する方法の例です。このフォルダは任意で、名前を変えることも可能です。
画像
必須
画像アセットを整理する方法の例です。SXAに直接必須ではありませんが、一部のCSSは画像を参照して設定されたパスを使うことがあります。
文字
必須
最適化済みスクリプトファイルを保存します。
スタイル
必須
最適化済みのスタイルファイルを保存します。このファイルはSassプロジェクトのファイルをコンパイルすると自動的に作成されます。