ブログの記事に簡単に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" />