パーシャル デザインを作成および変更する
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
SXAは、Webページを構成するパーシャル デザインと呼ばれるレンダリングのセットを使用します。パーシャル デザインを使用すると、ページのデザイン要素をすばやく作成して、一貫性のあるスタイルにすることができます。たとえば、ヘッダーやフッターなど、ページの一部を一度作成しておけば、サイト上のあらゆる場所で使用できます。
また、特定のページでわずかに異なるヘッダーが必要な場合など、特定のページのパーシャル デザインを変更することもできます。パーシャル デザインは相互に継承できるため、再利用可能なパーシャル デザインの基本セットから、ますます複雑なデザインを構築できます。
パーシャルデザインの作成
既存のパーシャル デザインがニーズに合わない場合は、ページ ヘッダーのパーシャル デザインなど、ページ間で再利用する新しいパーシャル デザインを作成できます。
エクスペリエンス エディターでパーシャル デザインを追加するには:
-
リボンのExperience Acceleratorタブで、Partial Design,をクリックし、Insert a new Partial Designをクリックします。
-
Insert Itemダイアログボックスで、「Partial Design」を選択し、名前を入力して「OK」をクリックします。SXAは空のページをロードするようになりました。ナビゲーション チェック ボックスをオンにすると、プレゼンテーション レイヤーにいることがわかります。
-
これで、レンダリングをツールボックスからページにドラッグして、パーシャルデザインに追加できます。たとえば、ヘッダーの場合、いくつかのレイアウト要素を追加し、ヘッダーを左側に4列、右側に8列に分割できます。スプリッター(列)レンダリングをページにドラッグし、レイアウトを分割します。
-
画像 (再利用可能) レンダリングを使用して、左側の4列にロゴを追加します。これを行うには、Image (Reusable) renderingを左側の列にドラッグし、名前を入力してOKをクリックします。
-
Select the Associated Contentダイアログで、画像を選択し、「OK」をクリックします。
メモ「ページ・データ」ノードの下のデータ・ソースを選択すると、そのデータ・ソースはページ・アイテムのサブアイテムとして格納されるローカル・データ・ソースになります。ローカル データ ソースに加えた変更は、作業中のページにのみ影響します。データ ソースを再利用してグローバルに管理できるようにする場合は、ツリー内の別の場所を選択します。
ヘッダーにスローガンを追加したり、ナビゲーションを追加したりしてヘッダーの準備ができたら、ヘッダーを保存してパーシャルデザインメニューで使用できるようにします。
ベースパーシャルデザインの作成
わずかに異なる2つのヘッダー。冗長なパーシャル デザインを多数作成する必要はありません。パーシャルの継承を利用すると、たとえばナビゲーションコンポーネントを含む1つのベースパーシャルデザインを作成し、その上に他のパーシャルを作成して、異なるロゴなどで違いを埋めることができます。これにより、わずかな違いだけで多数のテンプレートを作成するのを避けることができます。これは、CMSシステムにとって大きな問題でした。パーシャル継承を使用すると、デザインの共有部分を1か所で管理し、作成者が作成しているすべての異なるページの種類にそれらの変更を簡単に反映できます。
パーシャル デザインの変更
場合によっては、パーシャル デザインを変更したい場合があります。たとえば、フッターのアドレスが変更されたため、またはヘッダーにスローガンを追加するために、フッターを更新する必要がある場合があります。
パーシャル デザインを変更すると、このパーシャル デザインを使用するすべてのページで変更が更新されます。したがって、変更する前に、どこで使用されているかを確認する必要があります。
エクスペリエンス エディターでパーシャル デザインを変更するには:
-
リボンのExperience Acceleratorタブで、Partial Designをクリックします。
-
変更するパーシャルデザインを選択します。
手記パーシャル デザインにカーソルを合わせると、このパーシャル デザインに属するレンダリングがページ上で緑色で強調表示されます。
-
たとえば、テキストを変更したり、ツールボックスからパーシャル デザインにレンダリングを追加したりして、変更を加えます。
-
メイン リボンで、Save
をクリックします。現在、パーシャル デザインは、それを使用するすべてのページで変更されています。