Corredor

ウェブ、プログラミングの勉強メモ。

Twitter の埋め込みツイートを中央寄せする方法

Twitter の個別ツイート画面右上のメニューより、「このツイートをサイトに埋め込む」を選ぶと、次のような HTML コードが取得できる。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"> …… (以下略)

コレを Web ページに貼り付けると、埋め込みツイートが表示できるワケだが、このブロックが左寄せで表示されてしまうのが残念。

埋め込みツイートを中央揃えにしたく、やり方を調べてみると、とても簡単に変更できることが分かった。

以下のように、class="twitter-tweet" 部分を class="twitter-tweet tw-align-center" と変更する (.tw-align-center クラスを追加する) だけで直せた。

<blockquote class="twitter-tweet tw-align-center" data-lang="ja"><p lang="ja" dir="ltr"> …… (以下略)

他にもいくつか埋め込みツイートの表示仕様を変更する小技があるので、詳しくは以下の記事を見てみてほしい。

できるゼロからはじめるLINE&Instagram&Facebook&Twitter超入門 (できるゼロからはじめるシリーズ)

できるゼロからはじめるLINE&Instagram&Facebook&Twitter超入門 (できるゼロからはじめるシリーズ)

  • 作者: 田口和裕,森嶋良子,毛利勝久,できるシリーズ編集部
  • 出版社/メーカー: インプレス
  • 発売日: 2018/03/16
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る