calendar

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
30      
<< April 2017 >>

profile

@yurippe_momo
Blog Ranking
BlogRanking

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

0
    ブログを移転したので、少々レイアウトも自由にいじれるようになりました。

    そんなわけで、全体の枠の広さを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;
    }
    

    | 1/1PAGES |