--- title: "カスタムテーマを作成してください" slug: "create-a-custom-theme" abstract: "新しいテーマの追加方法や、自分のクラスやアセットの追加方法を学びましょう。" --- # カスタムテーマを作成してください テーマはサイトの見た目や雰囲気を定義し、サイトの機能やコンテンツとは別に作成できます。デフォルトでSXAには2種類のテーマがあります: - サイトテーマ(/sitecore/Media Library/Themes)– サイトの見た目や雰囲気を決定づけるスクリプトやスタイルを含むブランディングテーマです。例えば、レンダリングのスタイリング(ナビゲーション、カルーセルなど)やレンダリングの挙動(必要に応じてカスタム対応)などです。 - ベーステーマ(/sitecore/Media Library/Base Themes)– より複雑な機能を提供するスクリプトやスタイルを含む基盤テーマ。例えば、Bing/Googleマップコネクタ、コアライブラリ(jquery、lo-dash)、編集体験に影響を与えるスクリプト(付箋、編集テーマ、ドラッグ&ドロップ、部分的なデザインハイライト)などの共有機能などです。 スタイル、スクリプト、画像、フォントなどの独自のクラスやアセットを追加するには、新しいサイトテーマを作成できます。 [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")。 このトピックでは、基本テーマをコピーし、サイトウィザードを使い、スクリプトを使ってカスタムテーマを作成する方法について説明します。 カスタムテーマを作成するには: 1. 以下のいずれかの方法で新しいテーマを追加する: - サイトを作成する際にテーマを追加してください。テーマタブの「**新しいエクスペリエンスアクセラレーター作成**」ダイアログボックスで、「**新しいテーマを作成**」チェックボックスを選択します。 ![Create a new SXA site wizard dialog window.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/0CF204D634F44BE99E674F0E42C52C52.png) 新しいテーマはメディアライブラリのサイトフォルダに追加されました: /sitecore/Media Library/Project/Tenant Folder/Your Tenant/Your Site/Site Theme Name - テーマを手動で追加してください。tenant/site media libraryフォルダの下にテーマを追加します。/sitecore/Media Library/Themes/Basic themeのすべての子テーマをコピーします。 - スクリプトを使ってテーマを追加してください。SXAには新しいテーマを作成するヘルパースクリプトが含まれています。サイトを右クリックし、「 **スクリプト」**をクリックし、「 **新しいサイトテーマ**」をクリックしてください。 ![Add a theme using a script.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/3DD988A9544A44CEBBED6C6A85ABDD9B.png) 「 **Create a new Experience Accelerator」サイトテーマ** ダイアログボックスで、名前を入力し、オプションで新しいテーマの場所も入力してください。デフォルトでは、新しいテーマは /sitecore/Media Library/Project/Tenant Folder/Your Tenant/Your Tenant/Your Site/Site Theme Nameに追加されます。 ![Create a new SXA site theme dialog box.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/3D0484E1CBBF40B7A9857F68A0640F2D.png) > !注デフォルトでは、新しいテーマはここに保存されます:/sitecore/Media Library/Project/Tenant Folder/Your Tenant/Your Site/Site Theme NameテーマアイテムはSXAのルートに保存しないでください。次回リリースで上書きされる可能性があります。 2. デフォルトでは、新しいテーマにはフォント、画像、スクリプト、スタイルのフォルダが含まれています。スクリプトとスタイルフォルダを使ってCSSスタイルやJavaScriptを追加してください。 ![964138B0EEB64F668A5A78D070BC4497.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/964138B0EEB64F668A5A78D070BC4497.png) > !注fontsフォルダはオプションで、フォントの資産を整理する方法の一例です。imageフォルダも任意ですが、一部のCSSは画像参照を特定のパスに使うことができます。 3. **Internet Explorer Compatibility**のセクションで、X-UA-Compatible値を設定します。この値により、Internet Explorerは特定の編集・プレビュー/公開モードを強制的にウェブページをレンダリングします。例えば、値を**IE Edge**に設定して、利用可能な最も高い最新のモードを使うことができます。 ![3DC8E56B85E945B1ACBBE2AAD462912B.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/3DC8E56B85E945B1ACBBE2AAD462912B.png) 4. **テーマ**セクションで、新しいテーマが継承すべきテーマを設定します。SXAテーマは複数の継承に対応しています。つまり、すべてのテーマごとに複数の親テーマを定義できます。 > !注選択されたベーステーマの順序は重要です。新しいものを追加したり順序を変えたりする際は注意してください。例えば、SearchThemeがCore Librariesにあるjqueryライブラリに依存している場合、SearchThemeは他のテーマの後に読み込まれるようにしてください。 > > ![652E9E2285EB4733B4CBF63A7C1E5A88.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/652E9E2285EB4733B4CBF63A7C1E5A88.png) 新しいベーステーマを作成した場合や、テーマの変更を望まない場合は、「 **保護されたテーマ** 」を選択してください。これにより、テーマが変更禁止の場所リストに追加され、Creative Exchangeのインポート機能によるテーマの更新がなくなります(Sitecore.XA.Feature.CreativeExchange.config:experienceAccelerator/creativeExchange/restrictedLocations。 ![SXA-theme-protected.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-theme-protected.png) 5. 画像をワイヤーフレーム画像に変換したい場合は、「 **ワイヤーフレーム画像のサポート** 」チェックボックスを選択してください。 ![644994A0F3E14BB099819CA26983E18B.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/644994A0F3E14BB099819CA26983E18B.png) 6. **グローバルクラス**セクションでは、SXAグリッドに付属する標準の一部を上書きし、フッター、ヘッダー、コンテンツのプレースホルダーを幅幅に設定できます。 **OtherClasses**フィールドでは、このテーマを使って各ページのHTMLボディタグのクラス属性にレンダリングする値を指定できます。 **プレースホルダー設定**フィールドで、プレースホルダーHTML要素に追加されるcssクラスを決定します。ヘッダー、メイン、フッターの各オプションを選択できます: - **Flex** – プレースホルダーが画面幅の100%を占めるように選択します。 - **固定** – グリッド設定に従ってプレースホルダーに固定幅を割り当てる設定を選択します。例えばブートストラップ4ではブレークポイントが含まれています: // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... } ) - **行クラス** – プレースホルダーに行クラスの幅を使わせるように選択します。 - **Row container class** - プレースホルダーに行コンテナクラスの幅を使わせるように選択します。 7. **Viewport**フィールドにビューポート要素を入力します。ビューポートは、デバイスによって変化するウェブページのユーザーの可視領域です。タグを使ってビューポートを制御できます。このビューポート要素は、ページの寸法やスケーリングを制御する方法をブラウザに示します。メタ部分デザインにビューポートレンダリングが含まれている場合、このフィールドの値はこのメタタグを埋めるために使われます。例えば: ![ADF74F6FD133490B817232D1F1473064.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/ADF74F6FD133490B817232D1F1473064.png) ページ上には以下の内容が表示されます: 8. 画像のプレースホルダーにモック画像を使いたい場合は、ワイヤーフレーム画像セクションに行ってフィールドを入力してください: **モックイメージ** - モック画像として表示される画像を指定します。フィールドが空のままの場合、画像は表示されません。 **ストレッチ画像 - 選択すると画像の幅と高さが全幅に伸びます。** **背景色** - 画像の背景色をHTMLの十六進形式で指定します。フィールドが空のままの場合、背景は透明になります。 ![SXA-Wireframe.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-Wireframe.png)