CLSが改善しない原因は追加CSS？THE THORで0.00になった実体験

THE THOR（ザ・トール）で Core Web Vitals の CLS がどうしても合格しない 状態に悩んでいました。

チェックできるサイトで原因を確認したところアドセンス広告が原因のようだったので削除。

CLSの不良レベルから要改善のオレンジ状態まで改善できましたが、ここからどうしても改善が出来ませんでした。

PageSpeed Insights

そんな中、思い切って 追加CSSを全部削除してみたら…

なんと即0.00で合格！

目次

🟦 結論：追加CSSを消す → CLSが0.00 → 合格

まず試しに 追加CSS（外観→カスタマイズのCSS）をすべて削除。

すると…

  • CLS＝0.00
  • PageSpeed Insights のCLSも合格
  • 不具合なし

その後、削除したCSSを THE THORの style-user.css（子テーマ内のCSS）へ移植。

結果は…

  • CLS＝0.00のままを維持

ただし一部のCSSだけは style-user.css に移しても反映されない という現象が発生しました。

🔍 THE THORでは「追加CSS」と「style-user.css」は読み込み順が違う

THE THOR の場合も、Cocoonと同じように
CSSの 読み込み順＝優先度の違い によって、反映の強弱が変わります。

🟧 追加CSS（外観→カスタマイズ）は“最後に読み込まれる最強のCSS”

THE THORで追加CSSに書くと、
WordPressはそれを HTMLの一番下に <style> で書き込む仕組み になっています。

つまり…

  • テーマのCSSより後
  • style.css より後
  • 子テーマの style-user.css より後

→ 常に最も強い（上書きが通りやすい）CSS

🔥 しかしCLSには不利

読み込みが遅く、
ページ表示後にレイアウトが「動く」原因 になります。

これが CLS赤判定の大きな要因でした。

🟩 style-user.css（THE THOR子テーマ）の特徴

THE THORの子テーマには
style-user.css という独立したCSSファイルがあります。

読み込み順は以下：

  1. 親テーマ THE THOR style.css
  2. 子テーマ style.css
  3. style-user.css
  4. 追加CSS（最強）

➤ style-user.css は早めに読み込まれるので

レイアウトを途中で動かしにくい
＝ CLSに強い

今回の改善で、CLSが0になった大きな理由はこれです。

🟥 style-user.cssで「反映されないCSS」が出る理由

追加CSSでは100％反映されたのに、
style-user.cssに移すと反映されない。

これには3つの理由があります。

① THE THOR独自CSS（動的CSS）に負けている

THE THORは

  • ボタンデザイン
  • アニメーション効果
  • ブログカード
  • フッター
  • 見出し装飾

などに多くの 動的CSS（インラインCSS） を使います。

これが style-user.cssより後 に読み込まれるため、
あなたのCSSが負けて反映されない。

→ 対策：!important で解決することが多い
例：

.thor-btn a {  background: #000 !important;}

② セレクタの優先度不足

追加CSSでは勝てたが
style-user.cssでは勝てないのは優先度の問題。

例：

.article-title { font-size: 20px; }

よりも、

body .article-title { font-size: 20px !important; }

が強い。

③ THE THORのキャッシュが強力

THE THORは独自の高速化機能があり
CSSキャッシュがかなり強くかかります。

特に

  • CSS最適化（圧縮）
  • 不要タグ削除
  • 画像遅延
  • JS最適化

などのON/OFFで反映が変わることも。

→ style-user.cssが「効かないように見える」ことがある
→ キャッシュクリアで直る

🔷 私が実際にやったCLS改善の流れ

① CLS不合格
② 追加CSSを全部削除
③ CLSが 0.00 → 合格
④ CSSを style-user.css に移行
⑤ 一部だけ反映されないCSSが発生
⑥ 読み込み順の違いが原因と判明
⑦ セレクタ優先度 or !important で解決

これで CLS問題は完全にクリアしました。

📌 THE THORでCLSを改善するなら

追加CSSに大量のスタイルを書くのはNG。

理由：

  • 後読みになる
  • レイアウトが動きやすい
  • CLS最大化の原因になる

💡 おすすめ構成

  • 基本のCSS → style-user.css
  • 優先度が必要なCSS → 必要な範囲のみ追加CSS
  • 多用しない
  • 必要なら !important を併用

📝 まとめ（THE THOR版）

項目追加CSSstyle-user.css
読み込み順最後（最強）テーマCSSの後
CLS出やすい出にくい
反映の強さ強い状況による
THE THORの動的CSS勝てる勝てないことがある
推奨度△（最低限のみ）◎（基本はこちら）

✍️ 最後に

CLSに悩んでいる方は、
追加CSSの削除→style-user.cssへの移行
これが驚くほど効果的です。

THE THORは動的CSSが多く、
追加CSSを多用すると CLS が悪化しやすいテーマです。

あなたが同じ悩みを抱えているなら、
ぜひ一度追加CSSを見直してみてください。

✍️ブログ運営の最新記事8件