インフラメンコ

まず、「Put your updates on your site!」をクリックすると、以下の画面が出てきます。

ここでは「Other」を選択しましょう。

Bloggerでブログを書いている人は「Blogger」を選択しても良いかもしれませんが、よく分かりません。

次に出てくるのは、以下の画面です。

左2つはFlashを用いたブログパーツです。選択するとこんなのができあがります。
どちらも、画面に表示される度に自動ロードされます。

自分の発言が1つだけ表示される。 上下ボタンで選択可能	Followerも含めた発言が表示される。 （タイミングが良くないと自分の発言が表示されない。）
follow gorimaru9 at http://twitter.com

格好いいけどカスタマイズ性に欠けるので、以下では「HTML/Javascript」を説明します。
表示されるのは自分の発言のみです。

ここで注意したいのは、Javascriptにより出力されるHTMLに多少クセがあることです。

<div id="twitter_div">
<h2 class="twitter-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul></div>
<li><span>発言</span> <a href="http://twitter.com/ユーザ名/statuses/ステータスID" style="font-size: 85%;">時間</a></li>
...
</div>

出力されるHTMLに「style="font-size:85%"」と指定されてしまっています。

従って、「font-size:85%」が気にくわない場合はCSSにて明示的に無効にしなければなりません。
以下にCSSの例を示します。

@charset "utf-8";
.twitter-title {
font-size: 150%;
}
/* リスト全体を囲む領域 */
ul#twitter_update_list {
margin: 8px 15px;
padding: 0;
}
/* リストの項目一つ一つの領域 */
ul#twitter_update_list li {
margin: 0 0 10px 0;
padding: 0;
width: 100%;
clear: both;
list-style-type: disc;
}
ul#twitter_update_list li span {
font-size: 90%;
}
/* リンク全般指定 */
ul#twitter_update_list li a {
font-size: 80% !important;
}

「!important」と宣言することにより、インラインスタイルよりも優先度を上げる必要があります。

このCSSを基本に、自分のブログに合うようにカスタマイズすればＯＫです。

---

以上、多少クセのあるブログパーツですが、CSSを使いこなせばできないことはありません。
みなさんも自分のブログにTwitter Badgeを導入してみませんか？