テーマを拡張する

概要

テーマの拡張を作成して、[テーマ エクステンションを追加] アクションまたは [サイト テーマを拡張] アクションを使用する方法について説明します。

SXA では、テーマを使用してサイトのルック アンド フィールを定義します。テーマは、サイトの機能やコンテンツとは別に作成できます。テーマ自体を変更することなく、既存のテーマを拡張することができます。たとえば、選択したサイトの機能に基づいて特定のテーマの機能を有効または無効にしたり、ベーシック テーマやワイヤーフレーム テーマなどの SXA のテーマを拡張したり、テーマを新規作成せずに既存のテーマを拡張したり、SXA の更新ごとにスタイル、画像、JavaScript を追加したりすることができます。

テーマを拡張するには、テーマの拡張を作成して、[テーマ エクステンションを追加] アクションまたは [サイト テーマを拡張] アクションを使用します。

テーマを変更する代わりにテーマの拡張を作成すると、必要に応じて拡張を柔軟に使用できます。これには、フッターとヘッダーで異なるスタイルを使用できるようにする場合などがあります。

テーマの拡張を作成するには、次の手順に従います。

  1. コンテンツ ツリーで Media Library に移動し、Extension Themes を右クリックして、[挿入]、[拡張テーマ] の順にクリックします。

  2. 名前を入力して、[OK] をクリックします。

  3. これで、スタイルとメディア アイテムをアップロードできます。たとえば、フッターのスタイルを変更する CSS ファイルをアップロードするには、styles フォルダーをクリックして [アップロード] をクリックします。

    E0084A7070A04A85911DBAC22916E3BB.png

    注記

    多くの異なるファイルをアップロードするには、[アップロード (複数 - 高度な設定)] をクリックして、スタイルやアイテムを一括アップロードします。

    A4F1F8991E5B47529D29526A74C5A6F7.png
  4. [アップロード] ダイアログ ボックスで、[ファイルを選択] をクリックし、追加するスタイルを選択して [OK] をクリックします。

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

[サイト テーマを拡張] アクションを使用してテーマを拡張するには、次の手順に従います。

  1. System/Settings/Feature/Experience Accelerator に移動し、拡張する機能の Site Setup フォルダーをクリックします。たとえば、Page Content 機能の場合は、Page Content Site Setup を右クリックし、[挿入] をクリックして、[サイト テーマを拡張] をクリックします。

  2. [拡張] セクションの [拡張テーマ] フィールドで、拡張テーマを [選択済み] フィールドに移動します。

    4ADEDC5A648B441FBE3AA8D5459A22B9.png
  3. 変更を保存します。

    これで、Page Content 機能を有効にして新しいサイトを作成する場合に [新しいテーマを作成する] チェックボックスをオンにすると、テーマが拡張されます。

    A883B83315D24B56A5B2CAFA0461D0C1.png

    この例では、Page Content 機能に新しいフッターのスタイルを追加しました。新しいサイトのページを作成して、そのページをエクスペリエンス エディターで開くと、更新されたフッターが表示されます。

    FCAB0691C95649B0867A8BEA880713F8.png

    注記

    既存のサイトで拡張テーマを使用するには、サイトのページにテーマを割り当てる必要があります。

テーマの拡張を個別にデプロイするには、[テーマ エクステンションを追加] アクションを使用する必要があります。

[テーマ エクステンションを追加] アクションを使用してテーマの拡張を追加するには、次の手順に従います。

  1. System/Settings/Feature/Experience Accelerator に移動し、スタイルを追加するレンダリングをクリックします。たとえば、新しいフッターのスタイルを追加する場合は、Page Content Site Setup を右クリックし、[挿入] をクリックして、[テーマ エクステンションを追加] をクリックします。

  2. [拡張] セクションの [拡張されたテーマ] フィールドで、拡張を適用するテーマを [選択済み] フィールドに移動します (この例では、ワイヤーフレーム テーマ)。

    34DF5F1FA1824C78B68F7BF31BF3E4A9.png
  3. これで、[拡張] セクションの [拡張テーマ] フィールドで、拡張テーマを [選択済み] フィールドに移動できます。

    93F8C4404EA2490B9A4FBAD79EDAF6A8.png
  4. 変更を保存します。

    ページをエクスペリエンス エディターで開くと、更新されたフッターが表示されます。