【コピペOK】埋め込みツイートを自動で中央寄せする

ときどき、ブログの記事にツイートを埋め込むことがあります。twitterでコピーした埋め込みコードをそのままペーストすると、左寄せで表示されますね。別に左寄せでも問題ないんです。でも、なにせ私はセンタリング厨なので、ゼッタイに中央寄せで表示したいのです。ところが、たまにしかツイートの埋め込みをしないので、やり方をいつも忘れている…。もう同じ事でググるのは終わりにしましょう。

埋め込みツイートを中央寄せする方法（1）

まずは、中央寄せする方法をおさらいしましょう。ツイート埋め込みコードから次のコードを見つけます。

<blockquote class="twitter-tweet">

見つけたコードを、

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

に変更すると、中央寄せで表示されます。

data-align="center"というコードを追加するわけですね。

値をleft・rightとすることで、右寄せ左寄せも可能です。追加できるデータ属性は他にもあり、色々とカスタマイズすることができます。詳しくは下記URLから。

埋め込みツイートを中央寄せする方法（2）

先ほどと同じく、ツイート埋め込みコードから次のコードを見つけます。

<blockquote class="twitter-tweet">

見つけたコードを、

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

と書き換えても中央寄せになります。

こちらの方法では、tw-align-centerというclassを足しています。こちらは古い方法なのか、デベロッパー向けのページがないようです。恐らく、data属性を追加する方法の方が推奨ということなのだと思います。

問題点

どちらにせよ、追加するコードは短いし簡単なんですけど…。忘れるとか以前に、いちいち書き換えるのが面倒じゃないですか。たくさん埋め込むときは大変です。埋め込みコードをコピーするときに、表示位置を選択するオプションを用意してくれたらいいのに。

とにかく、ツイート埋め込みコードには自動的に、data属性かclassを足すことができたら便利なのは間違いない。

埋め込みツイートを自動的に中央寄せする方法

手動でやっていたことを、JavaScriptで自動化してしまいます。

次のコードを、ブログのテーマ・テンプレートにコピペするだけです。コードを追加する場所は、bodyの最後かフッターの手前になります。ツイート埋め込みコードよりも後でないと意味がありませんので、ご注意ください。

記事を作成するときは、ツイート埋め込みコードをそのまま貼り付ければOKです。エントリー済みの記事など、既に中央寄せの埋め込みコードがあった場合でも、問題なく動作します。

data属性を追加するコード

<script>!function(a){if(a)for(var i=0,l=a.length;i<l;i++)a[i].dataset.align='center'}(document.querySelectorAll('blockquote.twitter-tweet'))</script>

また、次のコードでも同じ動作になります。こちらの方が汎用性は高いです。

<script>!function(a){if(a)for(var i=0,l=a.length;i<l;i++)a[i].setAttribute('align','center')}(document.querySelectorAll('blockquote.twitter-tweet'))</script>

classを追加するコード

<script>!function(a){if(a)for(var i=0,l=a.length;i<l;i++)a[i].classList.add('tw-align-center')}(document.querySelectorAll('blockquote.twitter-tweet'))</script>