サイトテーマ

AEM サイトテーマを使用して、サイトのスタイルやデザインをカスタマイズする方法を説明します。

概要

AEM サイトテーマは、AEM サイトのスタイルを定義し、AEM サイトテーマの構造に準拠する CSS、JavaScript および静的リソースを含むパッケージです。

AEM サイトテンプレートを使用して作成されたサイトでは、テーマを簡単にダウンロード、カスタマイズ、再デプロイできます。

メモ

AEM サイトテーマを AEM サイトテンプレートと混同しないでください。 AEM サイトテーマには、AEM サイトのスタイル設定情報のみが含まれます。AEM サイトテンプレートは、サイト構造と初期コンテンツを定義し、 クイックサイト作成 を可能にするために AEM サイトテーマを含みます。

サイトテーマの使用

サイトテーマは、次の 2 つの方法で使用されます。

  • これらは、 サイトの作成 時にスタイル設定を定義するためのサイトテンプレートの一部として使用されます。
  • これらは、サイトテンプレートに基づいてサイトを作成した後にダウンロードされるので、フロントエンド開発者はスタイル設定をさらにカスタマイズできます。
ヒント

テンプレートからサイトを作成し、そのテーマをカスタマイズするプロセスのエンドツーエンドについては、 クイックサイト作成ジャーニー を参照してください。

サイトテーマの構造

サイトテーマは、パッケージのコンテンツの目的を明確に反映した論理構造を持つ単純なパッケージです。サイトテーマは、フロントエンドプロジェクトの典型的な次の構造を持ちます。

  • src/main.ts:JS および CSS テーマの主なエントリポイント
  • src/site:サイト全体に適用される JS および CSS ファイル
  • src/components:AEM コンポーネント固有の JS および CSS ファイル
  • src/resources:アイコン、ロゴ、フォントなどの静的ファイル

標準のサイトテーマ

アドビは、独自のテーマを作成する際の基礎として使用できる、ベストプラクティスの参照テーマを提供します。標準のサイトテーマは GitHub で入手できます。

サイトテーマの開発

アドビは、新しいサイトテーマを作成するための一連のスクリプトとして AEM Site Theme Builder を提供します。

AEM Site Theme Builder は、GitHub の使用方法ドキュメントと共に利用できます。 テーマをカスタマイズするには、フロントエンド開発エクスペリエンスが必要です。

このページ