スポンサーリンク
スポンサーリンク

[wordpress] 設定したCSSが一部反映されない 【LiteSpeed CacheのCSS結合の注意点】

ニッチな話題ホームページ運用

設定を変更していたら、ログアウトしてウェブページを見ると、スタイルシートがおかしいことに気づきました。

スポンサーリンク

スタイル適用の優先順位がおかしい

WordPressにログインすると意図したとおりのスタイルが表示されているのですが、ログアウトすると一部に元のスタイルが適用されています。

微妙な違いなんですが気づきますか?

ログイン時の表示は意図したとおりのスタイルです。

しかし、目次をみると、背景色は変更したstyle.cssで上書きスタイルになっているのですが、枠線の色がテーマのスタイルのまま(黄色)になっています。

どうも、CSSの優先順位がおかしいようです。

一部のスタイルだけが適用されていない

LiteSpeed Cacheのページの最適化が原因になっている

いろいろプラグインをオフにしてみると、LiteSpeed Cacheが原因だとわかりました。

「Lite Speed Cache」→「ページの最適化」→「CSS設定」から、「CSS結合」と「CSS Combine External and Inline」の設定を変更して、確認してみました。

CSS結合CSS Combine External and Inline
オンオフ不具合
オフオフ正常
オンオン正常

つまり、「CSS結合」が不具合の原因です。

「CSS Combine External and Inline」とは?

「CSS Combine External and Inline(外部CSSを含めて結合する)」の説明をみると

Include external CSS and inline CSS in combined file when CSS combile is also enabled. This option helps maintain the priorities of CSS, which should minimize potential errors caused by CSS Combines.

Lite Speed Cache

後半は、「このオプションは、CSSの優先順位をメンテナンスでき、CSS結合によるエラーを軽減する」とあります。

まさに、こういうケースなんですね。

HTMLソースを確認するときに、ページ最適化をいじったときに変えてしまったようです。

QRコードを読み込むと、関連記事を確認できます。
[wordpress] 設定したCSSが一部反映されない 【LiteSpeed CacheのCSS結合の注意点】
タイトルとURLをコピーしました