Twitter埋め込みサイズを変更【横幅を小さく中央寄せも】

ツイートを並べて表示

ブログに埋め込んだTwitterのサイズ（横幅）を変更する方法の紹介です。

サイズと併せて、位置の調整方法も解説していきます。

こんな人のお役に立てる記事です。

小豆

ブログに埋め込んだTwitterのサイズが大きすぎて、見栄えもバランスも悪い。
これって、好きなサイズに変更できないの？

ブログに埋め込んだTwitterのサイズは変更できる【横幅】
埋め込んだTwitterのサイズを変更する方法【位置の調整も】
複数個のTwitterを埋め込むときは横並びがおすすめ
まとめ：見栄えよくTwitterをブログ内に配置しよう

ブログに埋め込んだTwitterのサイズは変更できる【横幅】

早速ですが、まずはこちらを見てください。

コタツに中掛毛布をセットした効果がヤバかった。
今までとは温かさの次元が違う。

隙間風が全然入ってこない！

パワーMAXでも寒さを感じるって人にはおすすめ。
今までの半分のパワーでも熱くて途中で一旦切るレベル。 pic.twitter.com/Ss4qxOOxsI

— 大福＠まったりブロガー (@daifuku_diary) January 20, 2022

ブログに埋め込んだTwitterのサイズが大きすぎて、バランスが悪いですよね。

一つならまだしも、これが複数個もあったら・・。

細いことが気になる僕は、デフォルトのこのサイズ感がすごく気に入りません。

小豆

確かにねぇ。
ついでに言うと、左に寄っているのも気になるんだよなぁ。

縦長のスマホで見た時は全然いいんだけど、PCで見ると残念だよね。

大福

というわけで、今回紹介する方法で横幅を調整してみました。

コタツに中掛毛布をセットした効果がヤバかった。
今までとは温かさの次元が違う。

隙間風が全然入ってこない！

パワーMAXでも寒さを感じるって人にはおすすめ。
今までの半分のパワーでも熱くて途中で一旦切るレベル。 pic.twitter.com/Ss4qxOOxsI

— 大福＠まったりブロガー (@daifuku_diary) January 20, 2022

だいぶ見た目がスッキリしましたね。

Twitter埋め込み時の横幅は、上記のように任意のサイズに調整することが可能です。

任意の高さ・・への変更はできません。

WordPressにTwitterを埋め込む方法

: 【ブログに他人のTwitterを埋め込む方法】と5つの便利な小技

続きを見る

WordPressにTwitterを埋め込む方法を知りたい人は、上記の記事を参考にしてください。

埋め込み方法と併せて、以下の内容についても解説しています。

背景を黒にする
元のツイートを表示させない
画像や動画を表示させない
Twitterアカウントへのリンクの貼り方
特定のアカウント内から任意の文字列を含むツイートを検索する

埋め込んだTwitterのサイズを変更する方法【位置の調整も】

ブログに埋め込んだTwitterの横幅を調整するには、専用コードの追加を行います。

設定方法

横幅を調整する
位置を中央寄せにする

デフォルト

デフォルトの埋め込みコード

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">コタツに中掛毛布をセットした効果がヤバかった。<br>今までとは温かさの次元が違う。<br><br>隙間風が全然入ってこない！<br><br>パワーMAXでも寒さを感じるって人にはおすすめ。<br>今までの半分のパワーでも熱くて途中で一旦切るレベル。 <a href="https://t.co/Ss4qxOOxsI">pic.twitter.com/Ss4qxOOxsI</a></p>— 大福＠まったりブロガー (@daifuku_diary) <a href="https://twitter.com/daifuku_diary/status/1484097170810994694?ref_src=twsrc%5Etfw">January 20, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

横幅を調整する

data-width="◯◯（px）"

埋め込みコード

<blockquote class="twitter-tweet" data-width="300"><p lang="ja" dir="ltr">コタツに中掛毛布をセットした効果がヤバかった。<br>今までとは温かさの次元が違う。<br><br>隙間風が全然入ってこない！<br><br>パワーMAXでも寒さを感じるって人にはおすすめ。<br>今までの半分のパワーでも熱くて途中で一旦切るレベル。 <a href="https://t.co/Ss4qxOOxsI">pic.twitter.com/Ss4qxOOxsI</a></p>— 大福＠まったりブロガー (@daifuku_diary) <a href="https://twitter.com/daifuku_diary/status/1484097170810994694?ref_src=twsrc%5Etfw">January 20, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

横幅の指定は、300～400pxくらいがおすすめだよ。

大福

任意の幅に調整が可能な横幅ですが、おすすめは300～400px前後。

というのも、それ以外を指定した場合は、PC・スマホどちらかでの見え方が残念になってしまいます。

	100pxで指定	300pxで指定	500pxで指定
P C での見え方
スマホでの見え方

画像はクリックで拡大できます

位置を中央寄せにする

tw-align-center

埋め込みコード

<blockquote class="twitter-tweet tw-align-center"><p lang="ja" dir="ltr">コタツに中掛毛布をセットした効果がヤバかった。<br>今までとは温かさの次元が違う。<br><br>隙間風が全然入ってこない！<br><br>パワーMAXでも寒さを感じるって人にはおすすめ。<br>今までの半分のパワーでも熱くて途中で一旦切るレベル。 <a href="https://t.co/Ss4qxOOxsI">pic.twitter.com/Ss4qxOOxsI</a></p>— 大福＠まったりブロガー (@daifuku_diary) <a href="https://twitter.com/daifuku_diary/status/1484097170810994694?ref_src=twsrc%5Etfw">January 20, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

横幅と位置を同時に指定することも可能

埋め込みコード

<blockquote class="twitter-tweet tw-align-center" data-width="300"><p lang="ja" dir="ltr">コタツに中掛毛布をセットした効果がヤバかった。<br>今までとは温かさの次元が違う。<br><br>隙間風が全然入ってこない！<br><br>パワーMAXでも寒さを感じるって人にはおすすめ。<br>今までの半分のパワーでも熱くて途中で一旦切るレベル。 <a href="https://t.co/Ss4qxOOxsI">pic.twitter.com/Ss4qxOOxsI</a></p>— 大福＠まったりブロガー (@daifuku_diary) <a href="https://twitter.com/daifuku_diary/status/1484097170810994694?ref_src=twsrc%5Etfw">January 20, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>