Twitter本家のブログパーツをいじる

twitter本家から提供されているFlash形式のブログパーツですが、サイズなり色なりが微妙に使いにくい感じなので、ブログに合わせていじってみました。

ちなみに、今回いじるのはIntaractive Widgetの方。 Display-only Widgetの方はそもそも見た目が好きくないのでスルーします。

もともとのブログパーツ

指示に従った末に生成されたソースをそのまま貼り付けると、こんな感じのものが表示されます。

このときの不満点は2つ。

幅が微妙: Widget sizeで「narrow」を選んでも横幅290pxあります。でかすぎ。
角が丸く･･･ない: Select a styleで「Smooth」を選んだ場合、下の角の部分がどうにも気になる。

実はこのふたつ、ソースをちょこっといじれば解決できます。

ソースコードを覗いてみる

ブログパーツ本来のソースコードはこんな感じになっています。（見やすいように適宜改行とスペースを入れています。）

<object
    classid  = "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    codebase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,124,0"
    width    = "290"
    height   = "350"
    id       = "TwitterWidget"
    align    = "middle">
    <param name  = "allowScriptAccess"
           value = "always" />
    <param name  = "allowFullScreen" 
           value = "false" />
    <param name  = "movie"
           value = "http://static.twitter.com/flash/widgets/profile/TwitterWidget.swf" />
    <param name  = "quality"
           value = "high" />
    <param name  = "bgcolor"
           value = "#000000" />
    <param name  = "FlashVars"
           value = "userID=19582600&styleURL=http://static.twitter.com/flash/widgets/profile/smooth.xml">
    <embed src     = "http://static.twitter.com/flash/widgets/profile/TwitterWidget.swf"
           quality = "high"
           bgcolor = "#000000"
           width   = "290"
           height  = "350"
           name    = "TwitterWidget"
           align   = "middle"
           allowScriptAccess = "sameDomain"
           allowFullScreen   = "false"
           type    = "application/x-shockwave-flash"
           pluginspage = "http://www.macromedia.com/go/getflashplayer"
           FlashVars   = "userID=19582600&styleURL=http://static.twitter.com/flash/widgets/profile/smooth.xml"/>
</object>

読めば何となくわかるでしょうけど、一応説明。

サイズ変更

ソースコード中のwidthとheightの値をいじればOKです。簡単。

いじるべきは最初のobjectタグ内の値と、

<object
    classid  = "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    codebase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,124,0"
    width    = "290"  ← 高さ
    height   = "350"  ← 幅
    id       = "TwitterWidget"
    align    = "middle">

最後のembedタグ内の値です。

<embed src     = "http://static.twitter.com/flash/widgets/profile/TwitterWidget.swf"
       quality = "high"
       bgcolor = "#000000"
       width   = "290"  ← 高さ
       height  = "350"  ← 幅
       name    = "TwitterWidget"
       align   = "middle"
       allowScriptAccess = "sameDomain"
       allowFullScreen   = "false"
       type    = "application/x-shockwave-flash"
       pluginspage = "http://www.macromedia.com/go/getflashplayer"
       FlashVars   = "userID=19582600&styleURL=http://static.twitter.com/flash/widgets/profile/smooth.xml"/>

今回ははてなダイアリーのテーマ、breezeに合わせて、幅を220pxにしてみます。するとこんな感じに。

角丸を生かす

角の部分ですが、ブログパーツの背景色をブログと合わせればOKです。いじるのはやっぱり2カ所。

5番目のparamタグと、

<param name  = "bgcolor"
       value = "#000000" />

最後のembedタグ

<embed src     = "http://static.twitter.com/flash/widgets/profile/TwitterWidget.swf"
       quality = "high"
       bgcolor = "#000000"  ← 背景色
       width   = "290"
       height  = "350"
       name    = "TwitterWidget"
       align   = "middle"
       allowScriptAccess = "sameDomain"
       allowFullScreen   = "false"
       type    = "application/x-shockwave-flash"
       pluginspage = "http://www.macromedia.com/go/getflashplayer"
       FlashVars   = "userID=19582600&styleURL=http://static.twitter.com/flash/widgets/profile/smooth.xml"/>

記事の背景色に合わせて白（#FFFFFF）にしてみます。

うん、Good。

おわり

あといじれるのは表示のクオリティくらい？ userIDを書き換えて知り合いのをずらっと並べてみるとか･･･そうだね。おもしろくないね。