Photo by: Jeff Turner
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>— するぷ (@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"」を入れるよりも、事前にスタイルシートを書いておく方が楽ですよね。ぜひお試しください！