Twitter™ウィジェットの表示幅を変更する方法

2014/01/28 2014/11/22

Twitterのウィジェットを設置して表示する際に、
Twitterウィジェットのカスタマイズ画面で指定できる表示サイズの変更は「高さ」のみになっています。
Twitterのウィジェットの幅変更を行う方法をご紹介しておきます。

はじめに

通常、ウィジェットなどを設置する際には、
サイドバーなどの限られたスペースに対して設置することが多いでしょう。

そうしたスペースにウィジェットを設置した場合でも、
通常は正しくウィジェットの幅が調整され表示されるため特に意識する必要はありません。

ウィジェット設定による指定

Twitterのウィジェット設定画面で指定が行えるのは高さのみ指定が可能です。
尚、高さの指定は、250 px～2000 pxの間で指定が行えます。

Twitterウィジェット高さ変更

横幅の指定が行えませんがTwitterウィジェットは、
設置したエリアの幅が520 px以上である場合には最大幅の520 pxで表示されます。

またウィジェットが実行されて表示されるフレームには以下のようなタグが出力され展開されます。

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" style="border: none; max-width: 100%; min-width: 180px;" title="Twitter Timeline" width="520" height="600"></iframe>

そのまま指定した例

Twitterのウィジェットで与えられたソースをそのまま貼り付けると以下のように表示されます。
幅は最大幅の520px、高さはウィジェット設定にて指定した600 pxで表示されています。

標準貼り付け例

CSS指定例

展開されてくるiframeタグに対してCSS指定を行ってサイズ変更を行うこともできます。

指定したCSSは以下のように指定しています。

iframe#twitter-widget-0 {
	width: 400px;
}

iframe#twitter-widget-0 {

width: 400px;

}

幅変更id指定

CSS指定の方法はいくらでもあるとは思いますが、以下のように指定も行えます。

iframe[id^="twitter-widget-"] {
width: 400px;
}

iframe[id^="twitter-widget-"] {

width: 400px;

}

別途div要素を追加してCSS指定

Twitterから提供されるidやクラスを利用して設定する場合、
展開されてくるソースが変更になった場合に意図せずレイアウトが乱れる場合があります。

別途、divタグを指定して設定を行う方が無難だと思います。

Twitterウィジェットの貼り付け例

<div class=”twitter_widget_style”>（Twitterウィジェットソース）</div>で囲みます。

<div class="twitter_widget_style">
<a class="twitter-timeline" href="https://twitter.com/algorhythnn" data-widget-id="36xxxxxxxxxxxxxxx84">@algorhythnn からのツイート</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>
</div>

<a class="twitter-timeline" href="https://twitter.com/algorhythnn" data-widget-id="36xxxxxxxxxxxxxxx84">@algorhythnn からのツイート</a>

</div>

CSS指定例

ソースを囲むために追加したdivタグに対してCSSを指定します。

div.twitter_widget_style {
	width: 300px;
}

div.twitter_widget_style {

width: 300px;

}

実際にウィジェットを表示すると以下のように表示されます。

幅変更divタグCSS指定

別途div要素を追加し直接スタイル指定

ウィジェット自体、１個設置する程度の設計要素になりますので、
その為にCSS側に記載するのも面倒と思われるかもしれません。

そうした場合には直接スタイルを指定することも可能です。

Twitterウィジェットの貼り付け例

<div style=”width: 150px;”>（Twitterウィジェットソース）</div>で囲みます。
この場合はCSSは利用していません。

<div style="width: 150px;">
<a class="twitter-timeline" href="https://twitter.com/algorhythnn" data-widget-id="36xxxxxxxxxxxxxx84">@algorhythnn からのツイート</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>
</div>