1. Pages設定

RTE出力のHTMLラッピングを制御する

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

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

ページビルダーでは、リッチテキストエディタ (RTE)が専用のコンテンツスタイルシートに依存し、編集・公開されたコンテンツが正しくレンダリングされるようにしています。一部の機能には、生成するHTMLのスタイル化のための追加CSSが含まれます。例えば：

  • 画像および画像キャプション

  • Block quotes

  • リストとリスト間隔

  • 表

  • メディアのプレゼンテーションと連携

これらの コンテンツスタイルがない場合:

  • Imageキャプションやブロック引用は期待通りのスタイルを失うかもしれません。

  • タイポグラフィ、間隔、インラインの特徴スタイルが、著者がエディターで見るものと一致しないことがあります。

  • プレビューや公開された成果物は編集体験とは異なる場合があります。

これらのスタイルをページの他の部分から隔離し、一貫したレンダリングを確保するために、生成されたHTMLはck-contentクラスを用いてラッパーに包まれ、必要なフォーマットとレンダリングルールを適用します。

サイト固有 エディタープロファイルで特定のサイトの自動ラッパーを無効にしたい場合は、以下が必要です:

  • RTE出力の周りに自分のHTMLマークアップが、先祖チェーンのどこかでck-contentクラスを使用しているか確認してください。

  • または、通常の .ck-contentで提供されているものをすべて置き換える、あなたのサイトのスタイルシートで同等のCSSものを提供してcontent-styles.css。同等のスタイリングを自分で実装する際は、使用するすべてのCKEditor機能(画像、ブロック引用、表など)がプレビューと公開サイトの両方で正しくレンダリングされているかを必ず確認してください。

デフォルトのラッパーの理解

ページビルダーは以下のスタイルシートからコンテンツスタイルを読み込みます: https://edge-platform.sitecorecloud.io/v1/files//styles/content-styles.css?sitecoreContextId=<ContextId>

このスタイルシートには、CKEditorの推奨通り、.ck-contentクラスでスコープ化されたエディターのコンテンツスタイルが含まれています。

  • すべてのルールは、アプリケーション全体への漏れを防ぐために .ck-contentで前付けされています。

  • 編集者と公開コンテンツの両方に同じスタイルシートが使われているので、著者が見るものはラッパーが存在すれば最終サイトと一致します。

スタイルが確実に適用されるように、RTEからレンダリングされたHTMLは以下のck-contentクラスを持つコンテナにラップされます。

<div class="ck-content">
  <!-- RTE output -->
</div>

このラッパー:

  • コンテンツスタイルをRTE出力にのみ適用するようにスコープ化します。

  • 画像、キャプション、ブロッククォート、表、タイポグラフィなどの特徴の正確なレンダリングを保証します。

  • CKEditorのスタイルがページの他の部分に影響するのを防ぎます。

親ck-contentラッパーを使いましょう

ck.contentラッパーを避けつつ組み込みのコンテンツスタイルを使いたい場合は、RTE出力の親要素にck-contentクラスを適用できます。親要素にすでにOldクラスck-contentがある場合は、Page Builderはフィールド値の周りに追加のラッパーを追加しません。これにより、マークアップ構造(例えばコンポーネントレベルやバリアントレベル)をコントロールでき、共有content-styles.cssルールの恩恵を受けながら、スコープが.ck-content。

カスタム親ラッパーの例(追加のラッパーなし)

Componentマークアップ:

<div class="my-rich-text ck-content">
  <!-- RTE field output is rendered here without an additional ck-content wrapper -->
  {{ rteFieldValue }}
</div>

公開サイトでの効果的な成果:

<div class="my-rich-text ck-content">
  <p>Some rich text with images, lists, etc.</p>
</div>

親要素をck-contentに提供しない場合、ページビルダーはデフォルトで自動的にラッパーを追加します:

<div class="my-rich-text">
  <div class="ck-content">
    <p>Some rich text with images, lists, etc.</p>
  </div>
</div>

どちらの方法でも、コンテンツスタイルが正しく適用されることを保証します。主な違いは、あなたとページビルダーのどちらがラッパー要素を制御するかです。

サイトのラッパーを無効にしてください

ck-contentラッパーを回避し、CKEditor提供のスタイルに依存する場合は、content-styles.cssのエディターのコンテンツルールをコピーして自分のセレクターに適応させる必要があります。これを行わないと、画像キャプションやブロック引用などの機能が、編集者と公開されたサイトの間でスタイルがなかったり一貫性がなかったりする可能性が高いです。

RTEが追加の <div class="ck-content">...</div> ラッパーを追加しないように、disableContentWrapをtrueに設定したRTEツールバープロファイルを作成してください。例えば：

{
  "toolbar": { "items": ["bold", "italic"] },
  "disableContentWrap": true
}

disableContentWrapがtrueに設定されている場合、RTEは自動ck-contentラッパーなしでコンテンツを出力します。つまり、すべてのコンテンツスタイリングルールはRTEで設定されたものではなく、あなたのサイトから引き継がれ、スペース、タイポグラフィ、リスト、表、メディアのレンダリングが乱れたり不一致になったりすることがあります。

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