X（Twitter）の埋め込みがスマホで表示されない？WP RocketのCSS Minify除外で解決！

2025年12月27日

X（旧Twitter）の埋め込みがスマホで表示されない？ WP Rocketで解決しました！

WordPressサイトでX（旧Twitter）の投稿を埋め込んだところ、PCでは表示されるのに、スマホでだけ非表示に…。
この原因、WP RocketのCSS最適化設定にありました！

本記事では、表示されない原因の特定方法と、WP Rocketの設定変更で解決した手順を詳しく解説します。

X埋め込みが表示されない原因＆WP Rocketでの解決手順

問題の根本原因は、WP RocketのCSS最適化設定にありました。
以下の手順で、スマホでもXの埋め込みが正常表示されるようになります。

STEP

X埋め込みのCSSを除外する

「File Optimization」→「CSS」セクションの
「Minify CSS」→「Excluded CSS Files」に以下を追加し設定を保存。（X埋め込みCSSを除外）

「File Optimization」→「CSS」セクションに移動
「Minify CSS」→「Excluded CSS Files」に以下を追加

https://platform.twitter.com/*

設定を保存

「Excluded CSS Files」が表示されない場合は？

以下の手順で表示されます

「File Optimization」→「CSS」セクションで「Minify CSS」をオフ（チェックを外す）
設定を保存
再度「Minify CSS」をオン

STEP

キャッシュをクリアして反映

WP Rocketのキャッシュとブラウザキャッシュをクリアした後、
X埋め込みが正常に読み込まれているかを確認してください。

X埋め込みが表示されない原因は？WP Rocketで特定した方法

今回の原因は、WP RocketのCSS最適化設定でしたが、
この特定に至るまで、X Grokの助けを借りて以下の可能性を検討しました。

X埋め込みが表示されない3つの可能性

ログイン状態の影響：Xの仕様変更で、ログインしていないと埋め込みが表示されないケース。ただし、今回は関係なし。
Xのサーバー側の不具合：サーバーの仕様変更や障害の可能性も考慮。ただし、ポスト自体はX上で表示されていた。
WP RocketのCSS最適化：最も有力だったのが、WP RocketのJavaScriptやCSS最適化設定がXの埋め込みに干渉している可能性。

📝 3つの可能性を検証
────────────────────
✅ ログイン状態 → 関係なし
✅ Xのサーバー → 問題なし
⚡️ WP Rocket → JavaScriptまたはCSS最適化設定が原因！？

WP Rocketの設定を検証して原因特定

X埋め込みが表示されない原因を特定するために、以下の手順でWP Rocketの設定を確認しました👇

JavaScript関連の設定（遅延・圧縮・結合）をすべてオフ
　→ 結果： 表示されず💔😢
CSS関連の設定（Minify CSS）をオフ
　→ 結果： 表示された！😆🎉

この検証結果から、「WP RocketのCSS最適化」が原因と特定できました。

WP RocketとX埋め込みの学びと注意点

📚 重要なポイント

WP Rocketの設定は埋め込みに影響する
　　→ XやInstagram埋め込み時はCSS/JS除外を確認
キャッシュの管理が必須
　　→ 設定変更後はWP Rocketとブラウザキャッシュを必ずクリア
Xの仕様変更に備える
　　→ Xの仕様変更が多いため、定期的に表示状況をチェック

結論と今後の対策

今回のX埋め込みが表示されない原因は、WP RocketのCSS最適化（「Minify CSS」） でした。
「Excluded CSS Files」に https://platform.twitter.com/* を追加することで、X埋め込みの表示を維持しつつ、サイトのパフォーマンスも保つことができました。

この経験から、WP Rocketの設定は慎重に見直し、外部リソースの除外を意識すること が重要だと改めて実感。