WordPressテーマSANGOの質問

Twitter埋め込みでスマホのみ横スクロールバーが表示される

アバター
ペンギン

お世話になっております。

Twitterを埋め込んだ記事をiPhoneで確認すると、最下部に横スクロールバーが表示されます。
埋め込んだTwitterの横幅は、記事内に収まっており、はみ出しているわけではありません。
Twitterの埋め込みを削除すると、横スクロールバーは表示されなくなります。

この現象は、ドラマの公式サイトのTwitterを埋め込んだ時に発生するようです。
公式サイト以外のTwitter埋め込みでは、横スクロールバーは出てきません。

私以外のSANGO利用者のサイトでも同じような現象を確認しました。
恐れ入りますが、ご教示のほどお願いいたします。

ツイートや動画を埋め込む
記事にツイートやInstagram、YouTube動画を埋め込む
コメントへの回答
サルワカくん
サルワカくん
2020/03/15

お世話になっております。
なるほど、
以下について教えていただけますか?
①問題が発生しているページのURL
②iPhoneの種類
③(可能であれば)iOSのバージョン

よろしくお願いします。

アバター
ペンギン
2020/03/15

お問い合わせフォームから詳細のメールいたしました。
ご確認よろしくお願いいたします。

サルワカくん
サルワカくん
2020/03/15

ありがとうございます。
確認したところ埋め込みしたTwitterのユーザー名が長いときにはみ出るようです。
以下のCSSをダッシュボードの[外観]⇒[カスタマイズ]⇒[追加CSS]に貼り付けることで、修正されると思われます。

.wp-block-embed {
  overflow: hidden;
}

こちらの問題は、上記のようなコードを貼っていない限りどのテーマでも起こる問題なので、WordPress本体もしくはTwitter本体によりそのうち対応されるかもしれません。
(SANGOでも次のGutenbergプラグインアップデートで対応しておきます)

よろしくお願いします。

アバター
ペンギン
2020/03/15

ご対応ありがとうございます。

早速、cssを追加しましたが改善されませんでした。
ブラウザのキャッシュは消去済みです。

もし他の改善方法があれば、ご教示いただければ幸いです。
よろしくお願いいたします。

サルワカくん
サルワカくん
2020/03/15

あ、ブロックエディターを使われているのではないのですね。
(さきほどのCSSはブロックエディター対応のものでした)

こちらのCSSも合わせてコピペすれば解決すると思います!

.twitter-tweet {
  overflow: hidden;
}
アバター
ペンギン
2020/03/15

無事に解決でき、本当に助かりました。
ありがとうございます。