頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

Google or AdMax Promotion(it)

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

はじめに

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

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

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

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

01_Twitterウィジェット高さ変更

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で表示されています。

02_標準貼り付け例

標準貼り付け例

CSS指定例

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

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

03_幅変更id指定

幅変更id指定

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

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

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

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

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

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

CSS指定例

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

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

04_幅変更divタグCSS指定

幅変更divタグCSS指定

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

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

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

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

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

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

05_幅変更divタグ直接指定

幅変更divタグ直接指定

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

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

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


twitterおよび、twitterロゴは、トゥイッター インコーポレイテッドの登録商標です。
登録番号は以下の通りです。
第5188811号、第5469003号
ツイッター、およびツイッターロゴはトゥイッター インコーポレイテッドの登録商標(商願2012-70641)です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - twitter

  関連記事