ブログに埋め込んだTweetを簡単に中央寄せ表示

電脳備忘録

ブログ記事に埋め込んだTweetを中央に表示させたかったのでちょいとGoogleで調べました。

埋め込む時はこんな感じの埋め込み専用コードが発行されるのでそれをコピペすることになります。

<blockquote class="twitter-tweet" data-lang="en">
<!--  内容  -->
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

class名に「tw-align-center」を追加してあげればセンタリングできるようなのですが、私のサイトでは意図した通りに表示されませんでした。

<blockquote class="twitter-tweet tw-align-center" data-lang="en">

blockquote要素にdata-align="center"を追加してもセンタリングできるようです。この方法で中央表示させることができました。

<blockquote class="twitter-tweet" data-lang="en" data-align="center">

今後twitterを埋め込む場合は、blockquote要素にdata-align="center"を埋め込むことで対応しようと思います。

埋め込んだTweetを簡単に中央寄せ表示する方法

Newer
Older
Dark
Light
menu