パーシャル デザインを作成、変更する

Current version: 10.1

SXA は、Web ページを構成するパーシャル デザインと呼ばれるレンダリングのセットを使用します。パーシャル デザインを使用すると、ページのデザイン要素を手早く作成して、一貫したスタイルにすることができます。たとえば、ヘッダーやフッターなどのページのパーツを一度作成すると、サイトのすべてのページでそれらを使用できます。

また、特定のページで少し違うヘッダーが必要な場合などは、特定のページのパーシャル デザインを変更することもできます。パーシャル デザインは互いに継承できるため、再利用可能なパーシャル デザインの基本セットから、より複雑なデザインを作成できます。

パーシャル デザインの作成

既存のパーシャル デザインがニーズに合わない場合は、新しいパーシャル デザイン (ページのヘッダーのパーシャル デザインなど) を作成してページ間で再利用できます。

エクスペリエンス エディターでパーシャル デザインを追加するには、次の手順に従います。

  1. リボンの [エクスペリエンス アクセラレーター] タブで、[パーシャル デザイン]、[パーシャル デザインを追加] の順にクリックします。

  2. [コンテンツを挿入] ダイアログ ボックスで、[パーシャル デザイン] を選択し、名前を入力して [OK] をクリックします。SXA に空のページが読み込まれます。ナビゲーションのチェック ボックスをオンにすると、プレゼンテーション レイヤーが表示されます。

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

  4. 画像 (再利用可能) のレンダリングを使用して、左側の 4 列にロゴを追加します。これを行うには、画像 (再利用可能) のレンダリングを左側の列にドラッグして、名前を入力して [OK] をクリックします。

  5. [関連付けられたコンテンツを選択してください] ダイアログで、画像を選択して [OK] をクリックします。

    注記

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

    ヘッダーにキャッチ コピーを追加したり、ナビゲーションを追加したりなどして、ヘッダーの準備ができたら、それを保存して [パーシャル デザイン] メニューで使用できるようにします。

ベース パーシャル デザインの作成

少し違う 2 つのヘッダーが必要な場合、同じパーシャル デザインをいくつも作成する必要はありません。パーシャル デザインの継承を利用することで、たとえばナビゲーション コンポーネントのベース パーシャル デザインを 1 つ作成しておいて、その上にロゴなどの違いに対応する別のパーシャル デザインを作成することができます。これにより、少しの違いしかないテンプレートをいくつも作成することを回避できます。このような少しの違いは、CMS システムにとって大きな問題でした。パーシャル デザインの継承を使用すると、デザインの共通の部分を 1 か所で保持して、作成するすべての違うページでその変更を簡単に反映することができます。

パーシャル デザインの変更

場合によっては、パーシャル デザインを変更したいときがあります。たとえば、フッターのアドレスが変更された場合や、ヘッダーにキャッチ コピーを追加したい場合などに、更新が必要になります。

注記

パーシャル デザインを変更すると、その変更はそのパーシャル デザインを使用するすべてのページで更新されます。そのため、変更を行う前に、そのパーシャル デザインがどこで使用されているかを確認する必要があります。

エクスペリエンス エディターでパーシャル デザインを変更するには、次の手順に従います。

  1. リボンの [エクスペリエンス アクセラレーター] タブで、[パーシャル デザイン] をクリックします。

  2. 変更するパーシャル デザインを選択します。

    注記

    パーシャル デザインにカーソルを合わせると、そのパーシャル デザインに属するレンダリングがページ上で緑色で強調表示されます。

  3. テキストを変更したり、ツールボックスからパーシャル デザインにレンダリングを追加したりなどして、変更を行います。

  4. メインのリボンで、[保存]をクリックします。これで、パーシャル デザインがその使用されているすべてのページで変更されます。

Do you have some feedback for us?

If you have suggestions for improving this article,