---
title: "テーマを拡張する"
slug: "extend-a-theme"
abstract: "テーマ拡張の作成方法を学び、Attachテーマ拡張機能やExtendサイトテーマアクションの使い方を覚えましょう。"
---
# テーマを拡張する

SXAはテーマを使ってサイトの見た目や雰囲気を定義します。テーマはサイトの機能やコンテンツとは別に作成できます。既存のテーマを拡張しても、テーマ自体を変更する必要はありません。例えば、選択したサイト機能に基づいて特定のテーマ機能を有効化・無効化したり、BasicテーマやWireframeテーマなどのSXAテーマを拡張したり、新しいテーマを作成せずに既存のテーマを拡張したり、SXAの更新後にスタイルや画像、JavaScriptを追加したりする必要がありません。

テーマを拡張するには、テーマ拡張を作成し、「Attach」や「Extension Site Theme」アクションを使って拡張します。

## テーマ用の拡張機能を作成する

テーマを変更する代わりにテーマ拡張を作成することで、必要なところで拡張機能を柔軟に使えます。例えば、フッターやヘッダーに異なるスタイルを使いたい場合などです。

テーマの拡張を作成するには:

1.  コンテンツツリーで **メディアライブラリ** に移動し、「 **拡張テーマ**」を右クリックし、「 **挿入** 」→「 **拡張テーマ**」をクリックします。
    
2.  名前を入力して、**OK**をクリックします。
    
3.  これでスタイルやメディアアイテムをアップロードできます。例えば、フッターのスタイリングを変更するCSSファイルをアップロードするには、stylesフォルダをクリックして「 **Upload File**」をクリックします。
    
    ![E0084A7070A04A85911DBAC22916E3BB.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/E0084A7070A04A85911DBAC22916E3BB.png)
    
    > !注多くの異なるファイルをアップロードするには、「 **アップロードファイル(上級)** 」をクリックして、スタイルやアイテムを一括アップロードしてください。
    
    ![A4F1F8991E5B47529D29526A74C5A6F7.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/A4F1F8991E5B47529D29526A74C5A6F7.png)
    
4.  「 **ファイルのアップロード** 」ダイアログボックスで「 **ファイル選択**」をクリックし、追加したいスタイルを選択して **「OK」**をクリックします。
    

> !注バージョン管理されたメディアテンプレートは、Creative Exchangeや他のSXA機能に問題を引き起こす可能性があるためサポートされていません。

## Extend Site Themeアクションを使ってテーマを拡張する

新しいテーマにテーマ拡張を使うには、Extend Site Themeアクションを使う必要があります。例えば、新しいサイトを作成し、そのサイトで新しいサイトテーマを作成すると、テーマ拡張が選択されている機能には自動的にテーマ拡張が組み込まれます。

「サイトテーマを拡張」アクションを使ってテーマを拡張するには:

1.  *System/Settings/Feature/Experience Accelerator*に移動し、拡張したい機能のSite Setupフォルダをクリックします。例えば、ページコンテンツ機能です。右クリック**でページコンテンツサイトセットアップ**をし、「**挿入**」をクリックし、「**サイトテーマ拡張**」をクリックします。
    
2.  **拡張**セクションの拡張テーマフィールドで、拡張テーマを選択したフィールドに移動します。
    
    ![4ADEDC5A648B441FBE3AA8D5459A22B9.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/4ADEDC5A648B441FBE3AA8D5459A22B9.png)
    
3.  変更を保存してください。
    
    ページコンテンツ機能を有効にして新しいサイトを作成し、「 **新しいテーマを作成** 」チェックボックスを選択すると、テーマが拡張されます。
    
    ![A883B83315D24B56A5B2CAFA0461D0C1.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/A883B83315D24B56A5B2CAFA0461D0C1.png)
    
    この例では、ページコンテンツ機能に新しいフッタースタイルを追加しました。新しいサイトのページを作成し、エクスペリエンスエディターでそのページを開くと、更新されたフッターが表示されます。
    
    ![FCAB0691C95649B0867A8BEA880713F8.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/FCAB0691C95649B0867A8BEA880713F8.png)
    
    > !注既存のサイトで拡張テーマを使用するには、そのテーマをサイトページに割り当てる必要があります。
    

## テーマの拡張アクションを使って拡張する

テーマ拡張を別途展開するには、「Attach」アクションを使わなければなりません。

AttachのTheme Extensionアクションを使ってテーマ拡張を追加するには:

1.  r*System/Settings/Feature/Experience Accelerator*に移動し、スタイルを追加したいレンダリング画面をクリックします。例えば、新しいフッタースタイルを追加するには、**ページコンテンツサイト設定**を右クリックし、「**挿入**」をクリックし、「******テーマ拡張****を付ける」**をクリックします。
    
2.  **拡張**セクションの拡張フィールドの**テーマ**で、拡張が適用したいテーマを選択したフィールドに移動させます。例えば、ワイヤーフレームテーマです。
    
    ![34DF5F1FA1824C78B68F7BF31BF3E4A9.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/34DF5F1FA1824C78B68F7BF31BF3E4A9.png)
    
3.  **拡張**セクションの拡張テーマ欄で、拡張テーマを選択したフィールドに移動できます。
    
    ![93F8C4404EA2490B9A4FBAD79EDAF6A8.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/93F8C4404EA2490B9A4FBAD79EDAF6A8.png)
    
4.  変更を保存してください。
    
    エクスペリエンスエディターでページを開くと、更新されたフッターが表示されます。