【CSS】Twitterの埋め込みツイートを中央揃えにするスタイルシートの書き方。

isloop

8年前

Twitterの埋め込みツイートを中央に設定したい人は少なからずいると思いますが、やろうと思うとなかなか真ん中に行きやがりません。

というのも、ツイートの埋め込みコードを見るとblockquoteで書かれているのですが、なぜかblockquoteのCSSをいじっても反映されないからです。

Chromeの検証を使ってみて中身を見てみたところTwitterの埋め込みツイートはtwitterwidgetになっていました。

というわけで、以下のCSSを書くこと真ん中に行きました。

twitterwidget,
iframe[id^="twitter-widget-"] {
margin-left: auto;
margin-right: auto;
}

ちなみに、iframe[id^="twitter-widget-"]を入れているのは、たまにtwitterwidgetじゃなくiframeのままレンダリングされるようで、その対策のためです。

こんな感じで中央揃えにできます。（Safari、Chrome、Firefoxで真ん中になることを確認しています。）↓↓

ワロタ/ 女子大生の87%「vimを使う男子はキモい」 : ガジェット2ch https://t.co/ehhOCZ4Qwf

— するぷ (@isloop) 2016年5月12日

ちなみに、Twitterの公式リファレンスによると、公式の中央揃えにする方法は「align=”center”」を入れることです。例は以下の通り↓↓

<blockquote class="twitter-tweet" data-lang="ja" align="center"><p lang="ja" dir="ltr">ワロタ/ 女子大生の87%「vimを使う男子はキモい」 : ガジェット2ch <a href="https://t.co/ehhOCZ4Qwf">https://t.co/ehhOCZ4Qwf</a></p>&mdash; するぷ (@isloop) <a href="https://twitter.com/isloop/status/730729325511598080">2016年5月12日</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

まぁ毎回毎回直接ソースコードに「align=”center”」を入れるよりも、事前にスタイルシートを書いておく方が楽ですよね。ぜひお試しください！