埋め込んだTweetを簡単に中央寄せ表示する方法

Advertisement

centering-embedded-tweets

前回の投稿を書く際に、埋め込んだTweetをセンタリング(中央寄せで表示)する方法を探してみたら超簡単な方法がありました。Twitterの開発者向けのドキュメント を読むと他にもいくつか簡単に設定できるものがあったので備忘録的にまとめておきます。

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

<blockquote class="twitter-tweet" data-lang="en">
  <p lang="ja" dir="ltr">Tweetの埋め込みテスト用</p>— ryo watanabe | 渡辺竜 (@rriver) <a href="https://twitter.com/rriver/status/706466931897839616">March 6, 2016</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Twitterからコピーしてきたデフォルトの埋め込みコードだと、以下のように左寄せで表示されます(スマホなどの小さい画面だとわからないと思いますけど)。

Tweetのセンタリング

埋め込みコードのclass="twitter-tweet"部分にtw-align-centerを追加します。

<blockquote class="twitter-tweet tw-align-center" data-lang="en">
  <p lang="ja" dir="ltr">Tweetの埋め込みテスト用</p>— ryo watanabe | 渡辺竜 (@rriver) <a href="https://twitter.com/rriver/status/706466931897839616">March 6, 2016</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

これで以下のようにTweetが中央寄せで表示されます。ちなみに、<blockquote>data-align="center"を追加しても同じように中央寄せになります。

UIの表示言語を変更する

data-lang="en"data-lang="ja"にするとUIが日本語になります。日付も日本語表記になりますね。

<blockquote class="twitter-tweet tw-align-center" data-lang="ja">
  <p lang="ja" dir="ltr">Tweetの埋め込みテスト用</p>— ryo watanabe | 渡辺竜 (@rriver) <a href="https://twitter.com/rriver/status/706466931897839616">March 6, 2016</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Twitterカードを非表示にする

Tweetに含まれるリンク先のページにTwitterカードのメタ情報がある場合、デフォルトではリンクの詳細情報が以下のようにTwitterカードで表示されます。

カード表示を隠すにはdata-cards="hidden"<blockquote>タグに追加します。

data-link-color="HEXカラーコード"を追加するとTweetに含まれたリンクが指定した色になります。

テーマを変更する

data-theme="dark"を追加するとダークテーマで表示されます。

以上、埋め込みツィートの設定変更方法のまとめでした!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です