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

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

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

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

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

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

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

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

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

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

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

3. 「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ソースを確認するときに、ページ最適化をいじったときに変えてしまったようです。

こちらもどうぞ。

やっとLiteSpeed Cache 3.5.2がリリースされたので更新してみた 【Javascript読込みの最適化設定】

ここまでのあらすじを振り返ってみると、LiteSpeed Cache 3.5.0.1がリリースされたのが、2020年9月29日でした。 その後、すぐに（2020年9月30日）JQueryの遅延読みで不具合が見つかり、LiteSpeed Cache 3.5.0.2として以前のバージョンにいったん戻されます。 当初はすぐに修正される見通しでしたが、しばらく、そのままになっていました。 最近ようやく動きがありましたので、メモしておきます。 LiteSpeed Cacheの更新履歴を...

chiilabo.com

遅延読込みでコードハイライトが機能しない【LiteSpeed Cache】

cocoonには「ソースコード設定」をしておいて「コードブロック」を挿入すると、コードをカラフルにハイライト表示する機能があります。 なんか見た目にカラフルでいいですよね。 cocoonでコードがハイライトしない ところが何故かうまく表示されません。 まずは、表示されたコードブロックを見てみてください。 このように、コードブロックがあるのにjavascriptの色分けがされていません。 まずはHTMLを検証してクラスを確認する 検証でHTMLを見てみると、ちゃんとjavasc...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。