読者です 読者をやめる 読者になる 読者になる

handlename's blog

コード片など

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

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

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

もともとのブログパーツ

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

f:id:handlename:20090913104300p:image

このときの不満点は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にしてみます。 するとこんな感じに。

f:id:handlename:20090913104301p:image

角丸を生かす

角の部分ですが、ブログパーツの背景色をブログと合わせれば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)にしてみます。

f:id:handlename:20090913104302p:image

うん、Good。

おわり

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