calendar

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
31      
<< March 2024 >>

profile

@yurippe_momo
Blog Ranking
BlogRanking

スポンサーサイト

0

    一定期間更新がないため広告を表示しています

    • 2020.06.02 Tuesday
    • -
    • -
    • -
    • -
    • by スポンサードリンク

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

    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 |