ブログにTwitterのツイートを埋め込む際のカスタマイズ

- advertisement -

- advertisement -

Tweetの中央寄せ

Twitterのツイート埋め込みhtmlは以下のようになるが、

<blockquote class="twitter-tweet">
<p lang="ja" dir="ltr">ツイート内容</p>&mdash; ﾂﾙﾐﾛﾎﾞ (@kaztsu) <a href="https://twitter.com/kaztsu/status/TweetID">date</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

プレビュー：

ここのblockquoteタグのclassに「tw-align-center」を追加することで中央寄せになる。

<blockquote class="twitter-tweet tw-align-center">

プレビュー：

<div style=”text-align: center;”>などで括っても中央寄せにならない場合。

Twitterカードの非表示

ツイートに含まれるリンク先のTwitterカード（プレビュー）を非表示にする。

blockquoteタグに「data-cards=”hidden”」を追加する。

<blockquote class="twitter-tweet tw-align-center" data-cards="hidden">

プレビュー：

ツイートの内容のみ、また、ツイートに含まれる「いいね」の数などを主に表示する場合

言語の変更

ツイートの言語変更

blockquoteタグに「data-lang=”言語”」を追加する。例）data-lang=”en”、data-lang=”ja”

<blockquote class="twitter-tweet tw-align-center" data-cards="hidden" data-lang="ja">

プレビュー：

日本語で表示したい場合。「フォローする」や「返信」「共有」など

テーマ変更

ツイートのテーマ変更

blockquoteタグに「data-theme=”dark”」を追加する。

<blockquote class="twitter-tweet tw-align-center" data-cards="hidden" data-lang="ja" data-theme="dark">

プレビュー：

ブログのテーマにあわせる場合

その他

返信元のツイートを非表示

data-conversation=”none”

自分の場合よく元ツイートに返信でアンケートツイートをぶら下げるのだが、そのアンケート結果を埋め込むと元のツイートもツリー表示されてしまう。その元ツイートを表示させないようにするときに指定。

表示幅のピクセル値を指定

data-width=”px”

幅を固定で指定する場合。使ったことないや