はてなブログ云云でアフィリエイトがしたい人のブログ

「はてなブログ」でアフィリエイト・ブログカスタマイズ・最適化・色々試行錯誤中!

【スポンサーリンク】

はてなブログにてツイート(埋め込みツイッター)を中央寄せで埋め込むカスタマイズ方法

ツイッターウィジェットを中央寄せしたい

はてなブログの標準機能でツイートを埋め込むと、左寄せで埋め込まれます。

私の他のブログでは、ツイートを中央寄せで埋め込みたい時があり、どうすればよいか調べてみました。

f:id:yonta24:20150103215611j:plain

はてなブログの標準機能の貼り付けには中央寄せの機能はありません。

そこで、本家ツイッターサイトからコードを取得しはてなブログの編集画面で「HTML編集」欄に直接貼ります。

この時、コード内のクラス(class="twitter-tweet")部分を、(class=”twitter-tweet tw-align-center”)に変更すれば、センタリングできます。

試しに以下に貼ってみました。しっかり中央寄せにカスタマイズされています。

ツイッター埋め込みレイアウト機能

左寄せ(デフォルト) twitter-tweet
中央寄せ twitter-tweet tw-align-center
右寄せ twitter-tweet tw-align-right

レイアウトカスタマイズを表にまとめると上記のようになります。最初CSSでやろうとして出来ず、ぐぐってみたら以上の方法があると知りました。

ただしこの方法は、はてなブログの挿入機能が使えないのでコードを取りに行く手間が増えて不便です。CSSで変更できれば、はてなブログの挿入機能でツイッターウィジェットを貼ったものを変更できそうなので手間いらずなのですが、現在私の科学力ではやり方がわかりませんでした。

センタータグを使う方法もありました(追記)

(2015/01/06追記)センタータグを使う方法もありました。いつもどおり、ブログのツイッター挿入機能を使ってツイートを挿入したあと、そのコードをセンタータグ(<center></center>)で括るのです。(タグは”HTML編集”画面で追加します)

f:id:yonta24:20150106035638j:plain

以上のように、こちらの方法でもセンタリング可能です。こっちのほうが簡単なのでこれからこの方法にしようと思います。