埋め込みツイートのサイズ変更【令和7年版】
transformはもう古い？！ X公式の可変幅が改善されている件について

ページスピード改善
ちょっと便利なテック系小ネタなんかを紹介

Twitter（X）のツイート（ポスト）をサイトに埋め込むとき、サイズ調整がうまく出来なくてイライラした事ってありませんか？
私はあります。
昔はパラメータを追加する方法が最小幅350px（うろ覚え）と物足りなかったため流行らず、抜け道としてtransformで無理やり親要素のサイズを縮小する方法なども知られていました。

ぽんきちくんあきらめたらいいのに。

話が終わってしまうがな (ﾟДﾟ)ｸﾜｯ！
いいですか落ち着いて聞いてください。
なんとツイートのサイズ調整幅が劇的に改善されているのです。

注：今後イーロンの気分によって挙動が変化、最悪使用できなくなる可能性があります。あくまで参考程度に留めていただきますようお願いします。

1.ツイート埋め込みのおさらい

1-1.ポストのurl

毎度のことながらツイートを埋め込む方法をおさらいしてから始めます。
まず、埋め込みたいツイート（ポスト）のurlをコピー。

1-2.パブリッシュ

パブリッシュへ移動。
ちなみにパブリッシュのページは2種類あります。
旧：https://publish.twitter.com
新：https://publish.x.com（⇦ こちらを使う）
サイトの動き、吐き出される埋め込みコードともに同等の挙動を示すと感じていますが、個別ツイートを埋め込む場合公式ヘルプからはXの方へリンクが張ってあります。
ですので、Xのパブリッシュを使用するのが無難です。

1-3.コード取得

「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つの方法に共通する結果として、埋め込みツイートの横幅は以下のように変化します。

以上のことにより、現在の埋め込みツイートの可変サイズ幅は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です。

米子力研究所によるツイート

width:250px（最小）