WordPressにツイートを貼り付けると横揺れする不具合を解消する方法

先日、「WordPress投稿内にツイート貼り付けると横揺れする」とフォーラムに投稿がありました。

こんな感じの状態。

ツイート貼り付けると横揺れする

この現象を解決するのに、思いのほか苦労してようやく原因がわかったので対処方法をメモがてら残しておこうと思います。

スポンサーリンク
レクタングル(大)広告

ツイート横揺れ不具合の解決方法

まず、解決方法を先に書いてしまいます。

問題を解決するには、テーマ(子テーマ)のstyle.cssに、以下のように追記するだけです。

/*Twitterウィジェットはみ出し対策*/
twitter-widget {
  overflow: hidden;
}

単に、ツイートのラップ要素に対して「はみ出したら隠せ」とスタイリングしているだけです。

横揺れの原因

投稿にツイートを貼り付けたとき、横揺れする原因としては、パソコンだとツイートのラップ要素からはみ出していなかった「ツイート投稿者名」が、モバイルでははみ出していたからのようです。

ツイートが横揺れする原因

これは、デベロッパーツールをちょっと見ただけでは、すぐに原因に気づくことはできませんでした。

フォーラム投稿者の方が「横揺れするツイート」の特徴に気づかれて、教えていただいてようやく分かりました。

動作確認

CSSコード適用後は、以下のような感じで横揺れはしなくなりました。

コード適用後は横揺れしない

まとめ

この「ツイート横揺れ」の不具合は、原因が非常に分かりづらかったです。

おそらく「Twitter側のスタイルの問題なのでは?」とは思うのですが、もしツイート挿入時にWordPress投稿ページが横揺れする場合は、今回の方法を試してみると良いかもしれません。

この不具合がTwitter側で改善されればなと(もしかしたら仕様なのかもしれないけど)。

詳細はこちらのトピック。

お世話になっております。 ツイートを埋め込むとモバイル画面で右側に余白が発生し画面が動いてしまう現象に何度か遭遇しており、その度に一箇所ずつ消して原因特定しているのですが、現状での共通点は「埋め込んだツイートのタイトルが画面の横幅より長い」というケースでこれが原因ではないかと疑っております。 上記...