Twitterのタイムラインを埋込時に
正常に表示されない場合の対処方法。
テーマ「SWELL」を使用している場合に
width:1pxになってしまう場合の対処方法をご紹介。
目次
現象
WordPressのサイドバーやフッターエリアなどにTwitterのタイムラインの埋め込みをしようとしたら
画面上にこんな線だけが表示されて上手く表示されない現象です。
WordPressのウィジェットにある「埋め込み」「Twitter」「カスタムHTML」「テキスト」で
どの方法でも上手くいきません。
原因と解決方法
Chromeのデベロッパー画面で埋め込んだ要素を検証してみると
「width:1px;」
となっています。
親要素から幅を上手く取得できていない?ためだと思います。
色々と試し見たところ下記CSSを追加で上手く表示できるようになりました。
テーマのカスタマイズから「追加CSS」で
.twitter-timeline { display: flex!important; }
と記述します。
これで正常に表示できると思います。
正常に表示できない場合のご参考になればと思います。
コメント