サイトに埋め込んだTwitterのタイムラインの背景色を変える方法

2016年 07月 25日

前回、ホームページにTwitterのタイムラインを埋め込む方法をご紹介しました。

サイトにTwitterのタイムラインを埋め込もう2016

Twitterのタイムラインを埋め込む時は設定で『Light』か『Dark』を選択して背景色を白か黒かにする事が出来るのですが、先日タイムラインの背景をグレーにしたいというお話を頂いて、背景色を変えられるか調べてみました！

タイムラインを埋め込んで属性を書き加えていく

ではまずタイムラインを埋め込みましょう。前回の記事でTwitter公式のタイムラインを埋め込んでみましたので、今回もそちらを使用してみますね。

Tweets by twitter

と言う事でこれでタイムラインを埋め込めました！
この埋め込むためのソースコードを見てみると…

こんな感じになっていますね！
Twitterに関するソースコードを<div class=”Twitter_area”>で囲いました。

中身を見てみると色々と書いてありますが、”href”や”width”、”height”などHTMLに触れた事があればよく見かけるタグですので何となく分かるんじゃないでしょうか？

このコードの中に新たにタグを書き加えていく事で、背景の色も変更する事が出来るのです！
その背景色を変更するために必要なタグが『data-chrome=”transparent”』です。

これは実はタイムラインの背景の色を変えるタグではなく、タイムラインの背景を透明にするタグなのです。
では取りあえず実際にこのタグを付け加えてみましょうか。

<div class=”Twitter_area”>
<a class=”twitter-timeline” href=”https://twitter.com/twitter” data-width=”250″ data-height=”400″ data-dnt=”true” data-link-color=”#E81C4F” data-chrome=”transparent”>Tweets by twitter</a>
</div>

はい、ソースコードの中に『data-chrome=”transparent”』を書き加えてみました！
これで背景が透明色に…！なっているはずなのですが、そもそもこのサイトは背景がもともと白なので変わっていませんね。

しかしタイムラインの背景が透明になったという事は、このタイムラインが表示されている部分の背景色を設定してあげれば、タイムラインの背景の色も変更されるという事になりますね！

と言う事で、このタイムラインを囲っている『div class=”Twitter_area”』の部分にcssで背景色を設定してみましょう。

.Twitter_area{
background-color:#eeeeee;
width:250px;
}

cssに上記のタグを追加して、Twitter_areaの横幅を固定し、背景色を淡い灰色に設定しました。
（#eeeeeeは薄い灰色の設定ですね）

 『p class=”Twitter_area”』の背景を灰色にした事で、タイムラインの背景も灰色になりました！
これで自分の好きな色にカスタマイズする事が出来ますね。

自分のホームページにあった色に是非カスタマイズしてみて下さい！