先日、「WordPress投稿内にツイート貼り付けると横揺れする」とフォーラムに投稿がありました。
こんな感じの状態。
この現象を解決するのに、思いのほか苦労してようやく原因がわかったので対処方法をメモがてら残しておこうと思います。
目次
ツイート横揺れ不具合の解決方法
まず、解決方法を先に書いてしまいます。
問題を解決するには、テーマ(子テーマ)のstyle.cssに、以下のように追記するだけです。
/*Twitterウィジェットはみ出し対策*/ twitter-widget { overflow: hidden; }
単に、ツイートのラップ要素に対して「はみ出したら隠せ」とスタイリングしているだけです。
横揺れの原因
投稿にツイートを貼り付けたとき、横揺れする原因としては、パソコンだとツイートのラップ要素からはみ出していなかった「ツイート投稿者名」が、モバイルでははみ出していたからのようです。
これは、デベロッパーツールをちょっと見ただけでは、すぐに原因に気づくことはできませんでした。
フォーラム投稿者の方が「横揺れするツイート」の特徴に気づかれて、教えていただいてようやく分かりました。
動作確認
CSSコード適用後は、以下のような感じで横揺れはしなくなりました。
まとめ
この「ツイート横揺れ」の不具合は、原因が非常に分かりづらかったです。
おそらく「Twitter側のスタイルの問題なのでは?」とは思うのですが、もしツイート挿入時にWordPress投稿ページが横揺れする場合は、今回の方法を試してみると良いかもしれません。
この不具合がTwitter側で改善されればなと(もしかしたら仕様なのかもしれないけど)。
詳細はこちらのトピック。