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>

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

</div>

実際にウィジェットを表示すると以下のように表示されます。
今回は150px幅を直接指定していますが、
Twitterウィジェット側のスタイルで、min-width: 180px指定がされている為、
最小幅は180pxとして表示されます。

幅変更divタグ直接指定

さいごに

このようにして、Twitterウィジェットの幅はスタイルシートや上位div要素の幅指定などを利用して、
好きなサイズに調整を行うことができます。

尚、Twitterウィジェットの高さ指定を変更した際には、
設置するスクリプトタグを貼り付けなおす必要があります。

twitterおよび、twitterロゴは、トゥイッター　インコーポレイテッドの登録商標です。
登録番号は以下の通りです。
第５１８８８１１号、第５４６９００３号
ツイッター、およびツイッターロゴはトゥイッター　インコーポレイテッドの登録商標(商願２０１２－７０６４１)です。

- twitter twitter

: 自分以外のユーザーのTwitter™タイムラインをウィジェットで表示する

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: WordTwitの利用と導入(wordpressプラグイン)

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: Twitter™でブログに設置するリストウィジェットを作成する

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: Twitter™でカスタムタイムライン作成にTweetDeckにログインする

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: Zenbackプラグインで利用のスクリプトコードを取得する

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: (Android+Chrome)Twitter™のアプリ連携を取り消す為の操作方法

Google or AdMax Promotion(cel) 禁断の機能がau公 …

: WordPressサイドバーにTwitter™タイムライン(timeline)ウィジェットを表示する

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: (Android+Twitter)位置情報サービスGPSの有効/無効設定確認方法

Google or AdMax Promotion(cel) 禁断の機能がau公 …

: Twitter™でブログに設置する検索ウィジェットを作成する

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: Twitter™で作成が可能なウィジェットの例

Google or AdMax Promotion(it) 禁断の機能がau公式 …

PREV: WordPress投稿本文中にTwitter™タイムライン(timeline)ウィジェットを表示する
NEXT: WordPressサイドバーにTwitter™タイムライン(timeline)ウィジェットを表示する