【HTML】X（旧Twitter）のツイートの埋め込み位置を真ん中にする方法

admin

なぜ、こうなる。。。?!
引用したいツイートがある場合、ツイッターが出力したコードをそのままコピペすると、どうしても左に寄って表示されてしまう場合があります。

夏色かばん、できたー！作りたかったテイストの絵の一つ、、マウスだけで描けました。感涙。やばい。めっちゃ嬉しい。内心家の中をチビーズのようにダッシュしたいのをぐっとこらえて少しずつ作品を増やします。。。。っくぅううううう！#今日の積み上げ #かとみさイラスト pic.twitter.com/YWGupNkOLj
— かとみさ☀️ (@KatoMisa3) June 21, 2020

とてもダサい！何とかしたい！真ん中にしたい！と思った方へ。

私が最初に参考にしたブログのコードが誤りだったので、正しい方法を記録します。（WordPress のビジュアルエディタでhtml をマルっと埋め込んで下記の手順でやればOKです）

2023年8月現在、x.com は twitter.com にリダイレクトされます。herf 部分はそのままで運用可能です。

Contents

埋め込み位置を真ん中にする指定方法
ツイート埋め込みのカスタマイズ方法

埋め込み位置を真ん中にする指定方法

引用を表すhtmlのコード「blockquote」の部分を編集します。一行目にある部分ですね。今まさしくお困りの方は、ご自身のソースコードをご参考ください。

この blockquote の class 指定箇所で、「twitter-tweet」とあります。この後ろに何もつけない場合、左寄せになります。真ん中、右側、と寄せたい場合、明示的に指定する必要があります。今回は真ん中に埋め込みたいので、「tw-align-center」という指定を下記のように埋め込みましょう。

編集前

<blockquote class="twitter-tweet" data-lang="ja">

編集後

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

結果

🌸朝と手帳とブログが好き🌸

手帳とペンで自分と向き合い
ブログで想いを形にしたり
やりたいことをやりきって
満たされた気持ちで迎える朝。
最高に心地よい☀️

優しくなれるし
イライラもしないし
クリエイティブな脳にもなれる。
チャレンジングな気持ちになるし
心も体も美しく豊かになる✨
— かとみさ@朝ライフクリエイター (@KatoMisa3) January 3, 2020