ツイッターウィジェットを中央寄せしたい
はてなブログの標準機能でツイートを埋め込むと、左寄せで埋め込まれます。
私の他のブログでは、ツイートを中央寄せで埋め込みたい時があり、どうすればよいか調べてみました。
はてなブログの標準機能の貼り付けには中央寄せの機能はありません。
そこで、本家ツイッターサイトからコードを取得しはてなブログの編集画面で「HTML編集」欄に直接貼ります。
この時、コード内のクラス(class="twitter-tweet")部分を、(class=”twitter-tweet tw-align-center”)に変更すれば、センタリングできます。
試しに以下に貼ってみました。しっかり中央寄せにカスタマイズされています。
たくさんのリクエストありがとうございました!http://t.co/wFTOuU7J3z #有線大賞 pic.twitter.com/CAkeEtlmMm
— TBSテレビ「第47回 日本有線大賞」 (@TBS_awards) 2014, 12月 20
ツイッター埋め込みレイアウト機能
左寄せ(デフォルト) | twitter-tweet |
中央寄せ | twitter-tweet tw-align-center |
右寄せ | twitter-tweet tw-align-right |
レイアウトカスタマイズを表にまとめると上記のようになります。最初CSSでやろうとして出来ず、ぐぐってみたら以上の方法があると知りました。
ただしこの方法は、はてなブログの挿入機能が使えないのでコードを取りに行く手間が増えて不便です。CSSで変更できれば、はてなブログの挿入機能でツイッターウィジェットを貼ったものを変更できそうなので手間いらずなのですが、現在私の科学力ではやり方がわかりませんでした。
センタータグを使う方法もありました(追記)
(2015/01/06追記)センタータグを使う方法もありました。いつもどおり、ブログのツイッター挿入機能を使ってツイートを挿入したあと、そのコードをセンタータグ(<center></center>)で括るのです。(タグは”HTML編集”画面で追加します)
明けましておめでとうございます。本日念願のバイきんぐがバイキングに出る事が出来ました。幸先いいね pic.twitter.com/bOM4HK6TAI
— バイきんぐ小峠 (@viking_kotouge) 2015, 1月 5
以上のように、こちらの方法でもセンタリング可能です。こっちのほうが簡単なのでこれからこの方法にしようと思います。