タイムラインウィジットの幅が足りない

この記事は約2分で読めます。
ブログを移転したので、少々レイアウトも自由にいじれるようになりました。
そんなわけで、全体の枠の広さを1000pxにして
左サイドを 170px + 5px + 5px 右サイドを 170px + 5px + 5px
メインのところを 600px + 20px + 20px
合計で 1000px にしてみました。
色々と入れられるようになったので、twitterのTLのウィジットも入れちゃおう!
と、ウィジットを入れてみたら はみ出る・・・。
 

タグを見てみると
 
<iframe style="border: medium none; max-width: 100%; min-width: 180px;"
title="Twitter Timeline Widget" class="twitter-timeline twitter-timeline-rendered"
allowtransparency="true" id="twitter-widget-5" frameborder="0"
height="600" scrolling="no" width="180"></iframe>
赤文字のところがくせ者なので、最小幅が180pxになってしまいます。
ここのサイドは170pxなので、あとちょっと足りない・・・。
そこで、ちょっとしたおまじないをCSSに一文を追加すればあらぴったり。
iframe.twitter-timeline {
min-width: 170px !important;
width: 170px !important;
}

めでたし、めでたし。
CSSの後ろに、!importantを追加すれば、「俺が一番だYo!」ルールが適用されるので、
タグに180pxと書かれていても、ぴったり 170px に収めることができます。
170pxにしようと思ったけど、5pxずつ広げて180pxで落ちついたので、
必要なくなってしまいました。
iframe.twitter-timeline {
margin-left: -5px;
margin-right: -5px;
}

Follow me!

コメント

タイトルとURLをコピーしました