ドキュメントExperience Cloud KCS

カスタム CSSがプレビューモードに反映されない

最終更新日： 2026年8月21日

この記事では、AEM Guidesのカスタム CSSの変更がプレビューモードで期待どおりに表示されない問題をトラブルシューティングし、解決する方法について説明します。

説明 description

環境

Adobe Experience Manager （AEM） Guides

問題/症状

  • AEM Guidesで適用されたカスタム CSSが、プレビューモードで正しく表示されない。
  • 背景色や境界線スタイルなどの視覚的な変更は想定されますが、プレビューに切り替えると表示されません。
  • エラーメッセージは表示されませんが、想定される形式が見つかりません。

原因

CSS ファイルのパス、セレクター、構文が正しくない場合、またはブラウザーキャッシュで最新のスタイルが読み込まれない場合、カスタム CSSがプレビューモードで表示されないことがあります。

解決策 resolution

問題を修正するには、次の手順に従います。

  1. カスタム CSS ファイルが/var/dxml/folderprofiles/global-profile/XmlEditorConfigs/css_layout.cssなどの正しいパスに配置されていることを確認します。
  2. CSS セレクターがDITA コンテンツとプレビューモード DOMの構造と一致していることを確認します。 例えば、プレビュー固有のスタイルには.previewbody .testnoteを使用します。
  3. CSS ルールを追加または更新し、AEM Guidesのプレビューモードに切り替えて、スタイルが適用されていることを確認します。
  4. DITA コンテンツで、CSS セレクター（例：outputclass="testnote"）に一致する正しいoutputclass属性が使用されていることを確認します。
  5. CSSの更新後にブラウザーのキャッシュをクリアするか、ハードリフレッシュを使用して、最新のスタイルが読み込まれていることを確認します。
  6. ブラウザー固有のキャッシュやレンダリングの問題を除外するために、様々なブラウザーでプレビューモードをテストします。

これらの手順を完了したら、カスタムスタイルがプレビューモードで表示されていることを確認します。

recommendation-more-help
experience-cloud-kcs-help-kbarticles