デザインとデザイナー designs-and-the-designer

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

CAUTION

AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。詳細は、技術サポート期間. サポートされているバージョンを見つけるここ.

CAUTION

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

Designer は、AEM のクラシック UI を使用した web サイトのデザインを作成するために使用します。

NOTE

Web アクセシビリティについて詳しくは、 AEMと Web アクセシビリティのガイドライン.

デザイナーの使用 using-the-designer

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

screen_shot_2012-02-01at30237pm

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

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

chlimage_1-74

NOTE

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

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

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

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

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

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

前述の例には、次のようなメリットがあります。

別々のデザインパスを使用しているサイトごとに、コンポーネントのルックアンドフィールを変化させることができます。
design/v1からdesign/v2.のように、デザインパスをサイトのルートにある別のノードに変更することにより、web サイトのデザインを簡単に変更できます。
ブラウザーから見える外部 URL は /etc/designs および /content のみなので、/apps ツリーの下に何があるかに興味を抱く外部ユーザーから保護することができます。前述の URL のメリットは、システム管理者がより高いセキュリティを設定する際にも役立ちます。アセットを公開する範囲を、少数の場所に制限しているからです。

recommendation-more-help

2315f3f5-cb4a-4530-9999-30c8319c520e