How To

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

ツイートを並べて表示

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

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

 

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

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

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

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

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

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

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

小豆
確かにねぇ。
ついでに言うと、左に寄っているのも気になるんだよなぁ。
縦長のスマホで見た時は全然いいんだけど、PCで見ると残念だよね。
大福

 

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

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

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

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

 

WordPressにTwitterを埋め込む方法

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

続きを見る

 

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

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

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

 

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

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

設定方法

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

デフォルト

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>&mdash; 大福@まったりブロガー (@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)"

Twitter埋め込み左寄せ

埋め込みコード

<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>&mdash; 大福@まったりブロガー (@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




横幅100pxパソコン 横幅300pxパソコン 横幅500pxパソコン







スマホ横幅100px スマホ横幅300px スマホ横幅500px

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

 

位置を中央寄せにする

tw-align-center

Twitter埋め込み中央寄せ

埋め込みコード

<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>&mdash; 大福@まったりブロガー (@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>

 

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

Twitter埋め込みサイズと位置を調整

埋め込みコード

<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>&mdash; 大福@まったりブロガー (@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>

複数個のTwitterを埋め込むときは横並びがおすすめ

ブログに複数個のTwitterを連続して埋め込むときは、横並び表示がおすすめです。

実際に両者を比較してみました。

 

デフォルトの状態で複数埋め込み

Twitter埋め込み縦並び

記事内に占めるTwitterの割合が大きすぎて、バランスが悪いですよね。

せっかく横幅を調整しても、これでは意味がありません。

 

横並び表示で複数埋め込み

Twitter埋め込み横並び

複数個のTwitterを埋め込んでも、すっきり表示することができました。

 

小豆
でも、縦長のスマホの画面ではどうなるの?
横並びにしたら小さすぎて見づらくなると思うけど。
スマホで見たときは、自動的に縦並びに変更されるから大丈夫。
大福

 

Twitterを横並びで表示させる方法

以下、WordPress【ブロックエディタ】にて横並びにする方法の紹介です。


  • カラムを選択

    メニューからカラムを選択


  • 分割したい割合を選択

    カラムパターンを選択


  • Twitter埋め込みコードを挿入

    カスタムHTML

    Twitter埋め込みコードを入力


 

小豆
なるほど。
クラシックエディタでは、どうやるの?
残念ながら、この「カラムブロック」はブロックエディタだけの機能なんだ。
大福

 

使用しているWordPressテーマによっては、専用の機能がある場合があります。
当ブログで使用中のAFFINGER(アフィンガー)の場合、クラシックエディタでも分割機能を利用することができます。
関連ブログ内のツイートを横並びで表示する方法【AFFINGER編】

 

まとめ:見栄えよくTwitterをブログ内に配置しよう

ブログに埋め込んだTwitterの「幅」「位置」を調整する方法の紹介でした。

埋め込んだTwitterのサイズに不満を感じていた人は、ぜひ参考にしてください。

 

  • Twitter関連の記事

 

Sponsored Links

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴4年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-How To