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

電脳備忘録

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から2年以上経過しています。

ブログ記事に埋め込んだ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