twitterウィジェットを可変に

今はやりの「レスポンスWEB」に対応してるテンプレートでサイトを作成、スマホ版として作ったサイトを削除してしまおうか…と考えてる今日このごろ。
しかし、その為にまず一番気になっていたのが → twitterウィジェット。




ページの幅を『狭くした時』にガッツリにはみ出してしまう為、仕方なく最小幅を指定してるのですが、その為に通常幅（PCサイズ）の時に隙間が空いてカッコ悪くてしかたない(-＿-;)
※単純に width="100%" を指定しただけでは、変わらないんですよね（泣）





＜変更前のtwitterウィジェットの状態＞

（左）ブラウザを画面いっぱいに開いた状態。隙間が空いてダサイ。
（右）ブラウザの幅を狭くした状態。タブレットのサイズでは、しっくりきてますが…

・
・
・
・

で、検索し…　よーやく見つけたのがこの方法！
※残念ながら（1日経って）なぜかソース元を見つけることが出来ませんでしたが、こういうことのようでした。

cssにこちらを追加。

.twitter-timeline{
    width: 100% !important;
}

埋め込みたいページには、こんな感じに。

<a class="twitter-timeline" href="●●" data-widget-id="●●">@●● からのツイート</a>
<script> ～　</script>

で、＜変更後のtwitterウィジェットの状態＞

（左）ブラウザを画面いっぱいに開いた状態。隙間がありません！(^▽^)
（右）ブラウザの幅を狭くした状態。ちゃんとブラウザサイズに合わせて狭くなりました！




素晴らしい!!!!　というか、これで スッキリ!!!(^▽^)


ちなみにMEMO。。。
自分の作ったリストに自分を入れられないものだろうか…と思い検索してみたら、こちらも発見！
▶twitterで作成したリストに自分のアカウントを追加できるサイト さん。

これまで別のアカウントを取得し、そちらのリストを埋め込んでたんですが、これで1つtwitterを削除できます(^_^;