パーシャル デザインの作成と変更
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
SXA は、Web ページを構成するパーシャル デザインと呼ばれるレンダリングのセットを使用します。パーシャル デザインを使用すると、ページのデザイン要素を手早く作成して、一貫したスタイルにすることができます。たとえば、ヘッダーやフッターなどのページのパーツを一度作成すると、サイトのすべてのページでそれらを使用できます。
また、特定のページで少し違うヘッダーが必要な場合などは、特定のページのパーシャル デザインを変更することもできます。パーシャル デザインは互いに継承できるため、再利用可能なパーシャル デザインの基本セットから、より複雑なデザインを作成できます。
パーシャル デザインの作成
既存のパーシャル デザインがニーズに合わない場合は、新しいパーシャル デザイン (ページのヘッダーのパーシャル デザインなど) を作成してページ間で再利用できます。
エクスペリエンス エディターでパーシャル デザインを追加するには、次の手順に従います。
-
リボンの [エクスペリエンス アクセラレーター] タブで、[パーシャル デザイン]、[パーシャル デザインを追加] の順にクリックします。
-
[コンテンツを挿入] ダイアログ ボックスで、[パーシャル デザイン] を選択し、名前を入力して [OK] をクリックします。SXA に空のページが読み込まれます。ナビゲーションのチェック ボックスをオンにすると、プレゼンテーション レイヤーが表示されます。
-
これで、ツールボックスからレンダリングをページにドラッグすることで、パーシャル デザインにレンダリングを追加できます。たとえば、ヘッダーの場合は、いくつかのレイアウト要素を追加して、ヘッダーの左側を 4 列、右側を 8 列に分割できます。スプリッタ― (列) のレンダリングをページにドラッグして、レイアウトを分割します。
-
画像 (再利用可能) のレンダリングを使用して、左側の 4 列にロゴを追加します。これを行うには、画像 (再利用可能) のレンダリングを左側の列にドラッグして、名前を入力して [OK] をクリックします。
-
[関連付けられたコンテンツを選択してください] ダイアログで、画像を選択して [OK] をクリックします。
注記ページ データ ノードの下でデータ ソースを選択すると、ページ アイテムのサブアイテムとして保存されるローカルのデータ ソースになります。ローカルのデータ ソースに加えた変更は、作業中のページにのみ影響します。データ ソースを再利用してグローバルで管理できるようにする場合は、ツリーの別の場所を選択してください。
ヘッダーにキャッチ コピーを追加したり、ナビゲーションを追加したりなどして、ヘッダーの準備ができたら、それを保存して [パーシャル デザイン] メニューで使用できるようにします。
ベース パーシャル デザインの作成
少し違う 2 つのヘッダーが必要な場合、同じパーシャル デザインをいくつも作成する必要はありません。パーシャル デザインの継承を利用することで、たとえばナビゲーション コンポーネントのベース パーシャル デザインを 1 つ作成しておいて、その上にロゴなどの違いに対応する別のパーシャル デザインを作成することができます。これにより、少しの違いしかないテンプレートをいくつも作成することを回避できます。このような少しの違いは、CMS システムにとって大きな問題でした。パーシャル デザインの継承を使用すると、デザインの共通の部分を 1 か所で保持して、作成するすべての違うページでその変更を簡単に反映することができます。
パーシャル デザインの変更
場合によっては、パーシャル デザインを変更したいときがあります。たとえば、フッターのアドレスが変更された場合や、ヘッダーにキャッチ コピーを追加したい場合などに、更新が必要になります。
パーシャル デザインを変更すると、その変更はそのパーシャル デザインを使用するすべてのページで更新されます。そのため、変更を行う前に、そのパーシャル デザインがどこで使用されているかを確認する必要があります。
エクスペリエンス エディターでパーシャル デザインを変更するには、次の手順に従います。
-
リボンの [エクスペリエンス アクセラレーター] タブで、[パーシャル デザイン] をクリックします。
-
変更するパーシャル デザインを選択します。
注記パーシャル デザインにカーソルを合わせると、そのパーシャル デザインに属するレンダリングがページ上で緑色で強調表示されます。
-
テキストを変更したり、ツールボックスからパーシャル デザインにレンダリングを追加したりなどして、変更を行います。
-
メインのリボンで、[保存]
をクリックします。これで、パーシャル デザインがその使用されているすべてのページで変更されます。