前回の投稿を書く際に、埋め込んだ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の埋め込みテスト用
— ryo watanabe | 渡辺竜 (@rriver) March 6, 2016
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"を追加しても同じように中央寄せになります。
Tweetの埋め込みテスト用
— ryo watanabe | 渡辺竜 (@rriver) March 6, 2016
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>Tweetの埋め込みテスト用
— ryo watanabe | 渡辺竜 (@rriver) March 6, 2016
Twitterカードを非表示にする
Tweetに含まれるリンク先のページにTwitterカードのメタ情報がある場合、デフォルトではリンクの詳細情報が以下のようにTwitterカードで表示されます。
過去の記事: Affinity Designerの使い方： 複数のアートボードを個別ページとしてPDFにエクスポートする方法 https://t.co/8fHPcIV8Jb
— ryo watanabe | 渡辺竜 (@rriver) March 6, 2016
カード表示を隠すにはdata-cards="hidden"を<blockquote>タグに追加します。
過去の記事: Affinity Designerの使い方： 複数のアートボードを個別ページとしてPDFにエクスポートする方法 https://t.co/8fHPcIV8Jb
— ryo watanabe | 渡辺竜 (@rriver) March 6, 2016
リンクカラーを設定する
data-link-color="HEXカラーコード"を追加するとTweetに含まれたリンクが指定した色になります。
過去の記事: Affinity Designerの使い方： 複数のアートボードを個別ページとしてPDFにエクスポートする方法 https://t.co/8fHPcIV8Jb
— ryo watanabe | 渡辺竜 (@rriver) March 6, 2016
テーマを変更する
data-theme="dark"を追加するとダークテーマで表示されます。
過去の記事: Affinity Designerの使い方： 複数のアートボードを個別ページとしてPDFにエクスポートする方法 https://t.co/8fHPcIV8Jb
— ryo watanabe | 渡辺竜 (@rriver) March 6, 2016
以上、埋め込みツィートの設定変更方法のまとめでした！
2016年3月8日に公開され、2016年3月8日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。