TwitterのブラウザでWEBサイトの表示崩れの問題を解決した方法

ブログのユーザビリティをアップさせる目的とオリジナルテーマの実践もかねてWordPressテーマを入れ替えました。

[スポンサードリンク]

今回の改善にて自分なりに満足いく仕様に出来上がって「ほっ」と一息。Twitterにて報告をかねてツイートするも束の間・・
Twitter上で自分のブログを確認してみました・・なんと、表示崩れが起きてしまっています^^。

早速他のChromeで確認・Safariで確認・キャッシュの問題かと思いシークレットモードで確認・別のAndroidでも確認、すべてちゃんと表示されています。
もしやと思いinstagramのブラウザ・LINEのブラウザ・・これまた問題ありません。

では、Twitterで確認すると、表示が崩れています・・なんで〜^^?

本来ならこのように表示されるのが、標準なねですが、なんとスライダー部分が機能していません。

あと、左上のWEBフォントでホームボタンを設置していたのですが、これまた表示されません。あと右上の三本線のドロワーメニューもびくとも動きません。
これは、おおごとです^^。

問題が起きた環境

問題が起きている環境について少しだけご紹介致します。

・WordPressでWEBサイト構築
・iPhone X 使用
・Twitterアプリ使用

もしかしたら、Googleサイトスピードを上げる為にCSSの読み込みを遅らせたせいか、Scriptも機能していない・・など色々試行錯誤しましたが、まったく変化なし、もちろんキャッシュのせいかと思い色々試してみましたが、改善の兆しもなく諦めていたのですが・・。

解決策について

とまぁ色々試してみたのですが、最終的にたどり着いたのが下記プラグインの仕業^^

AMPプラグインです。このプラグインの仕業だったんですね。
理由は、正直よく分かっていませんが、このプラグインが有効化されている時に現象が起きている事を何度も試して確認しましたので間違いないかと思います。
その後なんどかTwitterでもブログ確認してますが、問題ないですね^^

どうやらCSSファイルをいくつかに分けてサイト構築している場合に起こるかもしれませんね、でも、何故すべてのCSSが効かなかったのでなく一部だけが無効になってしまうのか?という謎は残りますが原因が分かって良かったです^^。

もし、同じ事が起きている方がいらっしゃいましたら是非この方法を試してみて下さい。この投稿が、誰かの為の解決策になれたらとても幸いです^^

[スポンサードリンク]

Weekly

今週一番閲覧された記事をランキング形式で表示しています。人気になるには何か魅力があるんですね。是非皆様も読んでみて下さい。