スポンサーリンク

サイトにTwitterを埋め込むときの背景色を変える方法

sns ウェブ Web

ブログの記事に簡単にTwitterウィジェット(ツイッタータイムライン)を埋め込めます。

でも表示されるTwitterウィジェットが白色系なため、ブログのデザインと色合いが合わないことがあります。

そんなときにツイートの色をカスタマイズする方法について書きました。

スポンサーリンク

サイトにTwitterを埋め込むときの背景色を変える方法

通常、サイトにTwitterを埋め込むと背景色は白い色になります。

ダークモードなど暗色系でブログを作っているとき、そのままの白い色では雰囲気ぶち壊しですね。

そんなときTwitterウィジェットの背景色を変えることが出来ます。

HTMLのヘッド要素(<head> </head>領域)に下記のmetaタグを追加します。

<meta
 name="twitter:widgets:theme"
 content="dark" />

このmetaタグがあると、そのページにあるTwitterウィジェットのテーマが自動でダークモードになります。

Twitterテーマのデフォルトが”light”設定になっているのを、”dark”で上書きできます。

サイトにTwitterを埋め込むときのリンク色を変える方法

サイトにTwitterを埋め込むときのハイパーリンクの色を変えることが出来ます。

content部分「#ff00ff」が色コードです。これを好みで変更できます。

<meta
 name="twitter:widgets:link-color"
 content="#ff00ff" />

同様に、Twitterウィジェット境界線の色も変更できます。

<meta
 name="twitter:widgets:border-color"
 content="#ff00ff" />

 

TIPS

1つのページに複数のTwitterウィジェットを挿入する場合、スニペット後部に付いているscript部分は1つあればOKです。

2個め以降のembed Tweetから

<script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>

部分を削除して、無駄に同じスクリプトを繰り返し読み込まないようにして遅延を減らせます。

コメント