1. ページデザイン

部分的なデザインを作成・変更する

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

SXAは部分デザインと呼ばれるレンダリングのセットをウェブページ構成に使います。部分的なデザインを使って、ページのデザイン要素を素早く作成し、一貫したスタイルにできます。例えば、ページのヘッダーやフッターなどを一度作成し、それをサイト内のあらゆる場所で使うことができます。

また、特定のページの部分デザインを変更することも可能です。例えば、特定のページのヘッダーが少し違う必要がある場合などです。部分デザインは互いに継承し合うため、基本的な再利用可能な部分デザインのセットからますます複雑なデザインを構築できます。

部分的なデザインを作成する

既存の部分デザインがニーズに合わない場合は、ページ間で再利用するための新しい部分デザインを作成できます。例えば、ページヘッダーの部分デザインなどです。

エクスペリエンスエディターで部分的なデザインを追加するには:

  1. リボンのExperience Acceleratorタブで 「部分的なデザイン 」をクリックし、「 新しい部分的なデザインを挿入する」をクリックしてください。

  2. 「 アイテム挿入 」ダイアログボックスで「 部分デザイン」を選択し、名前を入力して **「OK」**をクリックします。SXAは空のページを読み込みます。ナビゲーションチェックボックスを選択すると、プレゼンテーションレイヤーに入っていることがわかります。

    D262BB12258D463C90637EAD7447CCFF.png

  3. 今はツールボックスからページにレンダリングをドラッグすることで部分的なデザインに追加できます。例えばヘッダーの場合、レイアウト要素を追加し、左側に4列、右側に8列に分割できます。スプリッター(列)レンダリングをページにドラッグしてレイアウトを分割します。

  4. 画像(再利用可能)レンダリングを使って、左4列にロゴを追加します。そのためには、画像(再利用****可能)レンダリング を左の列にドラッグし、名前を入力してOKをクリックします。

    9290A45FD59C41F7A87A54D991DCD01B.png

  5. 「 関連コンテンツ選択 」ダイアログで画像を選択し、OKをクリックします。

    C771D4BB41CA480E9BEEF3CCF826E315.png

    !注Page Dataノードでデータソースを選択すると、それはローカルデータソースであり、ページアイテムのサブアイテムとして保存されます。ローカルデータソースに変更を加える場合は、作業中のページにのみ影響します。データソースを再利用してグローバルに管理したい場合は、ツリー内の別の場所を選択してください。

    例えばヘッダーにスローガンを追加したり、ナビゲーションを追加したりして完成したら、それを保存して部分的なデザインメニューで利用できるようにしてください。

!警告部分的なデザインを作成すると、contenteditorのsitecore/content/yourcollectionname/yoursitename/ Presentation/Placeholder Settings/Partial Designの上で、そのデザインのプレースホルダー設定アイテムが自動的に生成され、キーはsxa-partialDesignItemNameです。このアイテムを修正、削除、または名前変更しないでください。対応する部分デザインのコンポーネントがページに表示されない場合があります。

基部部分設計を作成する

わずかに異なるヘッダーが2つあります。複数の冗長な部分デザインを作成する必要はありません。部分の継承を活用すれば、例えばナビゲーションコンポーネントを含む1つのベース部分デザインを作成し、その上に他の部分設計を作成し、異なるロゴなどで差分を埋めることができます。これにより、わずかな違いだけの多数のテンプレートを作成するのを避けられます。これはCMSシステムにとって大きな問題でした。部分継承を使えば、共有されたデザインの側面を一箇所にまとめ、作成者が作成するすべてのページタイプに簡単に変更を伝えることができます。

SXA-base-partial-design.PNG

部分的な設計を変更する

時には、部分的なデザインを変更したい場合もあります。例えば、フッターのアドレスが変わった場合やヘッダーにスローガンを追加したい場合など、更新が必要な場合などです。

!注部分的なデザインを変更すると、その部分的なデザインを使うすべてのページで変更が更新されます。したがって、変更する前にどこで使われているか必ず確認してください。

エクスペリエンスエディターで部分的なデザインを変更するには:

  1. リボンのExperience Acceleratorタブで「 Partial Design」をクリックしてください。

  2. 変更したい部分的なデザインを選択します。

    !注部分的なデザインにカーソルを合わせると、その部分的なデザインに属するレンダリングがあなたのページで緑色でハイライトされます。

  3. 例えばテキストを変更したり、ツールボックスから部分的なデザインにレンダリングを追加したりして変更を加えてください。

  4. メインリボンで「保存」をクリックします。これで、部分的なデザインは使用ページごとに変更されています。

この記事を改善するための提案がある場合は、 お知らせください!