【令和7年版】埋め込みツイートのサイズ変更 transformはもう古い？！公式の可変幅が改善されている件について
サイト作成の困りごとをサクッと解決
Twitter（X）のツイート（ポスト）をサイトに埋め込むとき、サイズ調整がうまく出来なくてイライラした事ってありませんか？
私はあります。
昔はパラメータを追加する方法が最小幅350px（うろ覚え）と物足りなかったため流行らず、抜け道としてtransformで無理やり親要素のサイズを縮小する方法なども知られていました。
あきらめたらいいのに。
終わってしまうがな今回の話が (ﾟДﾟ)ｸﾜｯ！
いいですか落ち着いて聞いてください。
なんとツイートのサイズ調整幅が劇的に改善されているのです。
というわけで、
もうtransformに頼るのは古い！？
Twitter（X）のツイートを好きなサイズに調整して埋め込む方法
というのをご紹介しましょう。
注：今後イーロンの気分によって挙動が変化、最悪使用できなくなる可能性があります。あくまで参考程度に留めていただきますようお願いします。
1.ツイート埋め込みのおさらい
毎度のことながらツイートを埋め込む方法をおさらいしてから始めます。
まず、埋め込みたいツイート（ポスト）のurlをコピー。
パブリッシュへ移動。
ちなみにパブリッシュのページは2種類あります。
旧：https://publish.twitter.com
新：https://publish.x.com（⇦ こちらを使う）
サイトの動き、吐き出される埋め込みコードともに同等の挙動を示すと感じていますが、個別ツイートを埋め込む場合公式ヘルプからはXの方へリンクが張ってあります。
ですので、Xのパブリッシュを使用するのが無難です。
「X URLを入力してください／Enter a X URL」
と書いてある部分に先ほどのURLを貼り付けてエンター押下もしくは矢印をクリックすると、
・埋め込みビデオ／Embedded Video
・埋め込み投稿／Embedded Post
の選択ができるようになります。
どちらかを選んで表示されたコードをコピーすれば埋め込み準備は完了です。
2.埋め込んだツイートのサイズを調整する方法2選
2-1.親要素にスタイル「width」を適用する方法
ここから本題。
埋め込みツイートの横幅は親要素のサイズに合わせて ある程度 変化します。
横幅350pxのサイドバーとかに埋め込んだら、なんかよくわからんけどピッタリサイズで表示されるのはそのためです。
制約がない場合は最大サイズで表示されます。
※令和7年現在550px
この特性を利用して
親要素にスタイル「width」をかけてやる
というのが最初に紹介する方法です。
コードは以下のとおり。
<style>
.tweet-wrapper{
width:250px;
}
</style>
<div class="tweet-wrapper">
<blockquote class="twitter-tweet">
<p lang="ja" dir="ltr">7月のご来場特典アップしました云々…
<a href="https://t.co/lB5LP1GDXz">pic.twitter.com/lB5LP1GDXz</a>
</p>
— 米子力研究所 (@beishiryoku_Exp)
<a href="https://twitter.com/beishiryoku_Exp/status/1939806149231935798?ref_src=twsrc%5Etfw">June 30, 2025</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
クラス名は適当ですのでお好きな名前をつけてください。
| 紫色 | ： | スタイルブロック |
| 水色 | ： | 親要素 |
| 灰色 | ： | ツイートの埋め込みコード |
実演はもう一つの方法を紹介したあとでやります。
同じ結果になりますので。
2-2.パラメータ「data-width」を使う方法
次にパラメータを使用する方法です。
コードは以下のとおり。
<blockquote class="twitter-tweet" data-width="250px">
<p lang="ja" dir="ltr">7月のご来場特典アップしました云々…
<a href="https://t.co/lB5LP1GDXz">pic.twitter.com/lB5LP1GDXz</a>
</p>
— 米子力研究所 (@beishiryoku_Exp)
<a href="https://twitter.com/beishiryoku_Exp/status/1939806149231935798?ref_src=twsrc%5Etfw">June 30, 2025</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>2-3.実演と可変幅の検証
以上2つの方法に共通する結果として、埋め込みツイートの横幅は以下のように変化します。
米子力研究所によるツイートwidth:200px
米子力研究所によるツイートwidth:250px（最小）
米子力研究所によるツイートwidth:300px
米子力研究所によるツイートwidth:350px
米子力研究所によるツイートwidth:450px
米子力研究所によるツイートwidth:500px
米子力研究所によるツイートwidth:550px（最大）
米子力研究所によるツイートwidth:600px
以上のことにより、現在の埋め込みツイートの可変サイズ幅は250～550pxであることがわかります。
もしそのように見えないのでしたら、この記事を書いているこの瞬間以降突然イーロンの気分が変わった事が原因だと考えられますので、まことに恐れ入りますがTwitter（X）のDMなどで教えていただけますと助かります。
で、見た感じ最小サイズである横幅250pxより小さくしたくなるケースが思いつきませんので、変なことなどせずに自然な方法でサイズ調整する事をおすすめします。
スタイルシート、パラメータのどちらを使用するかはお好みで。
まぁ突然レイアウトを変更したくなったり、イーロンの気分が変わってしまったときなど一括で対応できますので、圧倒的にスタイルシートのほうが優秀だとは思いますが。
3.念のため紹介『transformで無理やり縮小する方法』
Twitter（X）の仕様で許される範囲を超えてサイズを変更する最終手段として
親要素の縮尺をtransformで無理やり変えてしまう
という方法が知られていました。
埋め込みツイートの可変幅が満足できないものだった頃はやむを得ず使用することもありました。
今後、万が一何が起こるかわかりませんので、念のため、本当に念のため方法を説明だけしておきます。
理屈は以下のとおり。
埋め込みコードの制約が『<blockquote>タグで囲まれた部分を表示するまで』であると想定して、表示された結果そのものを小さくするという発想です。
もう少し言い方を変えると、
| × | 50％のサイズで表示するのではなくて |
| 〇 | 表示してから50%にする |
コードはこんな感じです。
<style>
.tweet-wrapper{
transform:scale(0.5);
transform-origin:top left;
}
</style>
<div class="tweet-wrapper">
<blockquote class="twitter-tweet">
<p lang="ja" dir="ltr">7月のご来場特典アップしました云々…
<a href="https://t.co/lB5LP1GDXz">pic.twitter.com/lB5LP1GDXz</a>
</p>
— 米子力研究所 (@beishiryoku_Exp)
<a href="https://twitter.com/beishiryoku_Exp/status/1939806149231935798?ref_src=twsrc%5Etfw">June 30, 2025</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
まともな方法で表示した横幅250pxの埋め込みツイートと、無理やり縮小して横幅250pxにした埋め込みツイートを並べてみましょう。
右のほうがtranslationです。
フォントやアイコン、ラジアスも全部縮小されますので全く違う結果になります。
今となってはおすすめしないという文脈で説明してきましたが、これはこれでありだな…
特にフォントサイズ不変の仕様が気に入らない方など、スケール0.8ぐらいで使用するといいかもしれません。
ただスケールを変更した場合、他の要素と並べたりする難易度が高くなりますのでそのあたりは覚悟して臨みましょう。
以上、埋め込みツイートのサイズ変更各種についてご説明しました。