--- title: "SXAのテーマ" slug: "the-sxa-themes" abstract: "SXAサイトのテーマやベーステーマについて詳しく学びましょう。" --- # SXAのテーマ テーマはサイトの見た目や雰囲気を定義し、サイトの機能やコンテンツとは別に作成できます。テーマにはベーステーマとサイトテーマの2種類があります。 SXAにはWireframeというデフォルトのサイトテーマが付属しており、サイトの設定を素早くサポートします。サイトはWireframeテーマで作成でき、その間にベーステーマはCreative Exchangeを使ってクリエイティブエージェンシーに送られます。インポートすると、新しいテーマでサイトを再スキンできます。ベーステーマをコピーして自分のクラスを追加し、特定のページのレンダリングにスタイルを適用し、画像やフォント、ファイルなどのアセットを追加することで [新しいテーマを作成できます](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/create-a-custom-theme.html "Create a custom theme") 。 テーマ作成を自動化するには [、SXAのCLIコマンドラインツールを使](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/add-a-theme-using-sxa-cli.html "Add a theme using SXA CLI")えます。これは、Gitのようなバージョン管理システムを使って資産をよりコントロールしたい場合に便利です。SXAでは、[スタイルやスクリプトのアップロードに最適化済みの最小ファイルを使](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/preoptimize-your-css-theme-and-javascript.html "Preoptimize your CSS theme and JavaScript")えます。 ## 基本テーマ [ベーステーマ](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/the-base-themes.html "The base themes") は、ウェブサイトのレイアウトをあらかじめ決めるプロトタイプテーマです。異なるデザイン哲学や特定の機能を支えるために、複数のベーステーマを持つことができます。 > !注ベーステーマはプラットフォームの一部なので変更しないでください。ベーステーマがニーズに合わない場合は、新しいベーステーマを作成して継承する方が良いでしょう。 基本テーマについては「**保護されたテーマ**」のチェックボックスを選択したままにしてください。**保護されたテーマ**のチェックボックスを選択すると、Sitecore.XA.Feature.CreativeExchange.configの設定にテーマが追加され、Creative ExchangeでインポートしてもCSS/JSの変更は反映されません。 ![Select Protected theme to add the theme to CE settings.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-theme-protected.png) 基本テーマはメディアライブラリに保存されています: /sitecore/Media Library/Base Themes. ## サイトのテーマ サイトテーマはベーステーマの拡張であり、特定のサイトに適用可能です。サイトテーマは通常ベーステーマに依存し、サイトで使用されるすべてのレンダリングに対してスクリプトやスタイルを含みます。テーマ内のCSSおよびJavaScriptファイルは、一度に一つのレンダリングを処理するチャンクに分割されています。 各サイトテーマごとに、そのテーマの基本的な特徴やプロパティを定義するためにベーステーマを選択しなければなりません。すべてのテーマにはグリッドテーマも必要です。SXAテーマは複数の継承をサポートしています。つまり、すべてのテーマに対して複数の親テーマを定義できます。選択されたベーステーマの順序は重要です。新しいテーマを追加したり順序を変更したりする際は注意してください。例えば、SearchThemeがCore Librariesにあるjqueryライブラリに依存している場合、SearchThemeは他のテーマの後に読み込まれるようにしてください。 デフォルトでは、テーマにはフォント、画像、スクリプト、スタイル用のフォルダが含まれています: ![Site theme name]() **フォルダー** **必須** **概要** フォント 必須ではありません フォントのアセットを整理する方法の例です。このフォルダは任意で、名前を変えることも可能です。 画像 必須 画像アセットをどのように整理できるかの例です。SXAに直接必須ではありませんが、一部のCSSは画像参照を特定のパスに使うことがあります。 文字 必須 スクリプトの追加や未使用のスクリプトの削除に使えます。上部に近い要素は読み込みが速くなります。 スタイル 必須 スタイルの追加や削除に使えます。 > !注スタイルやスクリプトフォルダの下にフォルダを追加してはいけません。スクリプトやスタイルは、入れ子構造なしで直接フォルダ内に入れることができます。 [スクリプトやスタイルにpreoptimizationを使う](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/preoptimize-your-css-theme-and-javascript.html "Preoptimize your CSS theme and JavaScript")場合、テーマのstyleやscriptsフォルダにはpre-optimized-minファイルしか含まれず、ソースアセットは含まれません。 ![SXA-preoptimizedmin-CE.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-preoptimizedmin-CE.png) ## ワイヤーフレームのテーマ SXAにはWireframeというデフォルトのサイトテーマが付属しており、サイトの立ち上げを迅速にサポートします。サイトはWireframeテーマで構築でき、その間に基本テーマはCreative Exchangeを使ってクリエイティブエージェンシーに送られます。フロントエンド開発者がWireframeを準備した後、サイトテーマと交換することも可能です。 ![Wireframe](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/Wireframe.png) 画像のプレースホルダーにモック画像を使いたい場合は、ワイヤーフレーム画像セクションに行ってフィールドを入力してください: - Mock Image - モック画像として表示する画像を指定する。フィールドが空のままの場合、画像は表示されません。 - Stretch Image - 選択すると画像が幅と高さの全幅に引き伸ばされます。 - Background Color - 画像の背景色をHTML十六進形式で指定します。フィールドが空のままの場合、背景は透明になります。 ![SXA-wireframe-theme.PNG](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-wireframe-theme.PNG) ## Basic2のテーマ 新しいサイトを作成し、新しいテーマを作成する場合、そのテーマはBasic2テーマのコピーとなります。このテーマには、箱から出してから直接編集すべきではない事前最適化されたファイルが含まれています。このテーマの内容は、あなたがサイト用に作成するテーマのプレースホルダーに過ぎません。 ブランディング作業のためにテーマを準備するには、[SXAのCLIコマンドラインツールを使い](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/add-a-theme-using-sxa-cli.html "Add a theme using SXA CLI")ましょう。 **フォルダー** **必須** **概要** フォント 必須ではありません フォントのアセットを整理する方法の例です。このフォルダは任意で、名前を変えることも可能です。 画像 必須 画像アセットをどのように整理できるかの例です。SXAに直接必須ではありませんが、一部のCSSは画像参照を特定のパスに使うことがあります。 文字 必須 最適化済みスクリプトファイルを保存します。 スタイル 必須 最適化済みのスタイルファイルを保存します。このファイルはSassプロジェクトのファイルをコンパイルした結果として作成されるべきです。