テーマを拡張する

Current version: 10.1

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

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

テーマの拡張の作成

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

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

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

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

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

    注記

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

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

[サイト テーマを拡張] アクションを使用したテーマの拡張

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

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

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

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

  3. 変更を保存します。

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

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

    注記

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

[テーマ エクステンションを追加] アクションを使用したテーマの拡張

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

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

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

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

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

  4. 変更を保存します。

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

Do you have some feedback for us?

If you have suggestions for improving this article,