チラシの裏のメモ書き

ほとんど自分の備考録

Twitter埋め込みタイムラインの横幅を180px以下にする方法

埋め込みタイムライン | Twitter Developers Twitterの公式は埋め込みタイムラインの横幅を変更するには以下のように設定するように書かれている。

<a class="twitter-timeline"
  width="300"
  height="500"
  href="https://twitter.com/TwitterDevJP"
  data-widget-id="YOUR-WIDGET-ID-HERE">
@TwitterDevJP からのツイート
</a>

ただこれだと180px以下にはならない。

なので、CSSをちょこっと書き換えることで180px以下にも設定ができる。（ただし、デザインは崩れるが…）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
.twitter-timeline {
min-width: 145px!important;
max-width: 145px!important;
}
</style>
</head>
<body>
<p>
    <a class="twitter-timeline"    href="https://twitter.com/ookawa0321" data-widget-id="537564099937177600">@ookawa0321さんのツイート</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </a>
</p>

<p style="width:145px; background-color:#0f0;" >
    a
</p>
</body>
</html>

CSSで”min-width”と”max-width”の値を指定することで強制的に幅を変更させている。

実行してみるとこんな感じ↓

f:id:ookawa0321:20141202145907p:plain