DXP 7.1でCSSを適用する際のよくあるエラー

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

この記事では、Web コンテンツ管理の CSS を文書化し、問題を解決するか、または完全に回避するための手順を示しています。

決議

エラー: テンプレート内のCSSがWebコンテンツの記事に適用されていない

まとめ: WebコンテンツテンプレートにCSSを記述したユーザーは、Webコンテンツがカスタムフォーマットではなくデフォルトフォーマットに従うことがわかります。

一般的な原因

1. 古いポータルのバージョンでは、ベロシティとフリーマーカーのグラフィカルエディタを提供することで、ウェブコンテンツ構造とテンプレートを設定するミニマリスト的なアプローチをとっていました。 すべてのユーザーが Web コンテンツ表示ポートレットで利用できる機能を常に活用しているわけではありません。
2. ユーザーが6.0や6.1でデータを作成して、6.2にアップグレードして、今度はDXP 7.0にアップグレードしていたら、アップグレードのプロセスが壊れていたかもしれません。
3. ユーザーエラー。 誤字脱字がないか、セミコロンや大括弧の欠落がないかを確認します。

推奨される解決策

1. ウェブコンテンツ表示ポートレット

   1. Web コンテンツ表示ポートレットの オプション → 見た目の設定 をクリックします。

   2. Look and Feel → Advanced Styling と進み、そこのGUIを使用します。
      
2. 任意のHTMLページを \webapps\ROOT\HTML フォルダ内に配置し、CSSを \webapps\ROOT\HTMLCSS フォルダ内に配置します。 (それらはカスタムランディングページとして使用することができます)。
3. カスタムテーマを作成している開発者は、ソースの \docroot_diffs\css フォルダにcustom.cssファイルを配置する必要があります。 (ソースファイルはLiferay Plugins SDKにあります)。 Dev Studioを使用している場合は、CSSを作成する際のプロンプトとガイドに従ってください。

予防のヒント

1. HTMLコンテンツとCSSを分離するのは、HTMLページごとに変更するよりも、CSSをグローバルに変更する方が簡単なので、ベストプラクティスです。 Webコンテンツのテンプレートであっても、できるだけきれいなものを選ぶようにしましょう。 実際、Liferayでは現在、ポートレットのIDとタイプに基づいてカスタムCSSを変更できるようになっています（Webコンテンツの表示ポートレットなど）。
2. データベースの移行とポータルのアップグレードのためのチェックリストに従ってください。
3. 誤字脱字がないか、大括弧、セミコロン、ダッシュなどの欠落した要素がないかチェックします。