推奨事項: レンダリングの利用
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
SXA には、モジュール式のコンポーネント ベースのデザインを確実に実行できるように、事前定義されたレンダリングおよびレンダリング バリアントのライブラリが付属しています。カスタム レンダリング (バリアント) を作成することもできます。レンダリングを適切に使用すると、作業を効率化できます。
ジョブに適切なレンダリングを使用する
ページ コンテンツ、ページ リスト、プロモーション、リッチ テキストなど、用途の広いレンダリングを使って、ページ レイアウトの大部分をレンダリングすることは避けてください。目的に応じた正しいレンダリングを使用します。標準レンダリングのクローンを作成し、これにレンダリングの目的を示す名前を付けるようにします。
たとえば、デフォルトのレンダリングからクローンを作成して名前を付けると、ビジネス ユーザーはレンダリングの目的を即座に理解できます。
-
Teaser (ページ コンテンツ レンダリングのクローン) は、ページにリンクしてコンテンツをティーズするように設定されています。
-
Highlight または Call to Action(プロモ レンダリングの単純なコピー) は、ジョブに適した一連のスタイルとレンダリング バリアントを提供します。
-
Hero Carousel (Carousel コンポーネントのクローン) は、プロジェクトに固有のレンダリング バリアントを使用して事前設定されたスライド データ ソースとコンポーネントを備えています。
作成者が編集したコンテンツにはプレーン HTML レンダリングを使用しない
複雑なコンポーネントの場合、コンポーネントに HTML を自由に配置できるプレーン HTML レンダリングの利用を検討することもできます。ただし、すべてのコンテンツ編集担当者が HTML コードの編集方法を知っているわけではないため、この方法でページにコンテンツを追加すると、編集担当者の作業がやりにくくなる場合があります。プレーン HTML レンダリングの代わりに、クローン、バリアント、または HTML スニペットの利用を検討してください。
プレーン HTML レンダリングを使う前に、以下の他のオプションも考慮します。
-
SXA レンダリング (プロモ レンダリングなど) をコピーしてカスタマイズする。
-
より詳細なレンダリング バリアントを作成する。この方法では、編集担当者がテキストと画像を編集できるようにしながら、レンダリング バリアント内のコンポーネント マークアップを完全に制御できます。これは、ビジュアル コンポーネントに推奨されるアプローチです。
-
メタ パーシャル デザインで HTML スニペットを使用する。コンポーネントに編集するビジュアル コンテンツがない場合 (JavaScript コードをページに配置する場合など)、メタ パーシャル デザインで HTML スニペットを使用することを検討します。
注記この機能は SXA バージョン 1.7 以降で使用できます。
リッチ テキスト フィールドのコンテンツが完全に編集可能であることを確認する
サイトのデプロイ後にマーケティング担当者が維持する予定のテキストには、WYSIWYG エディターで維持できないマークアップやクラスを絶対に配置しないでください。
テーマ内で特定の方法でスタイルを設定する必要があるテキスト要素にクラスを配置する必要がある場合は、Sitecore のリッチ テキスト エディターにこれらのクラスを追加する必要があります。これにより、クラスはドロップダウン メニューで利用できるようになり、編集担当者は、HTML ビューに切り替えることなくコンテンツのスタイルを設定できます。
また、コンテンツの公開後に予期せぬ事態を避けるために、スタイルがリッチ テキスト エディター内のアピアランスに反映されていることを確認する必要があります。
ページにより詳細な HTML コードが必要な場合は、リッチ テキストフィールドに複雑な HTML を 配置するのではなく、コンポーネントのクローンの作成、レンダリング バリアントの設定、またはカスタム コンポーネントの作成を検討します。