Twitter

Photo by: Jeff Turner

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

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

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

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

twitterwidget {
  margin-left: auto;
  margin-right: auto;
}

と思いきや、これだとFirefoxでうまく表示できないようです。

そこで、Twitterの公式リファレンスを見ると、中央揃えにするパラメータが存在しました。

埋め込みタグのblockquoteに、「data-align="center"」を入れてみましょう。↓↓

<blockquote class="twitter-tweet" data-lang="ja" data-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>

こんな感じで中央揃えにできます。↓↓

ぜひお試しアレ!