デザインとデザイナー

注意

この記事では、クラシックUIに基づくWebサイトの作成方法について説明します。 アドビでは、AEM Sites の開発の手引きで詳しく説明しているように、Web サイトに最新の AEM テクノロジーを利用することをお勧めします。

デザイナーは、AEMのクラシックUIを使用して、Webサイト用のデザインを作成する際に使用します。

メモ

Web アクセシビリティについて詳しくは、AEM と Web アクセシビリティのガイドラインを参照してください。

デザイナーの使用

デザインは、「ツール」タブの​designs​セクションで定義できます。

screen_shot_2012-02-01at30237pm

ここで、デザインの格納に必要な構造を作成し、必要なカスケーディングスタイルシート(CSS)および画像をアップロードできます。

デザインは/apps/<your-project>の下に格納されます。 Webサイトに使用するデザインへのパスは、jcr:contentノードのcq:designPathプロパティを使用して指定します。

chlimage_1-74

メモ

デザインモードのページ上でおこなわれたすべての変更は、サイトのデザインノードの下に保持され、同じデザインを持つすべてのページに自動的に適用されます。

必要なもの

デザインを実現するには、以下が必要です。

CSS — カスケーディングスタイルシートは、ページ上の特定の領域の形式を定義します。

画像 — 背景、ボタンなどの機能に使用する画像。

Web サイトをデザインする際の考慮事項

Webサイトを開発する際は、/apps/<your-project>の下に画像とCSSファイルを保存し、次のスニペットで説明するように、現在のデザインに基づいてリソースを参照できるようにすることを強くお勧めします。

<%= currentDesign.getPath() + "/static/img/icon.gif %>

前述の例には、次のような利点があります。

  • 別々のデザインパスを使用しているサイトごとに、コンポーネントのルックアンドフィールを変化させることができます。

  • Webサイトの再設計は、デザインパスをdesign/v1からdesign/v2.までの間、サイトのルートにある別のノードに向けることで簡単におこなえます

  • /etc/designs/content は、ブラウザーが外部ユーザーの保護を確認する唯一の外部URLで、ツリーの下に何があるかを確認 /apps します。上記のURLの利点は、アセットの公開をいくつかの異なる場所に制限するので、システム管理者がより高いセキュリティを設定するのに役立ちます。

このページ