Mima Memotto

ウィジェットのデザインをcssなどで変更したのでその備忘録に。
twitterは大きく分けると以下のようなタグで囲ってあります。
（かなり省略・・。）

数ヶ月前は「.twitter_pict」も使われていたのですがいつの日からか無くなっていました。
この部分に背景画像を表示させていたので消えたことに気づいたときは冷や汗が・・・X(
でも、依然作ったプロフィールガジェットには影響ありませんでした。
「.twitter_pict」が無くなるのは新しく発行したもののみのようです；D
ソースを調べるにあたってfirefoxのプラグイン「Firebug」を使いました♪

まず、twitter公式サイトにてウィジェットを作成。

今回はプロフィールウィジェットではなくお気に入りウィジェットにしました。
WEBサイト制作において参考になる方々のツイートをお気に入り登録しています。
ツイートするよりもお気に入り登録する方が多いです。

デフォルトでは以下のようなソースになります。

ここからCSSをガリゴリ！！

.twtr-doc {
     width: 170px;
     height: 389px;
     background: url(http://suema-r.com/twitter/twitter_a.gif) no-repeat !important;/*背景画像表示*/
}
.twtr-timeline{
height: 290px !important;
}
.twtr-bd{
width: 163px !importnt;
}
.twtr-profile-img {
     display: none !important;/*アイコン非表示*/
}
.textwidget h3 {
     text-indent:-9999px;/*ヘッダー部分のタイトルを非表示*/
}
.twtr-hd {
     text-indent:-9999px;/*ヘッダー部分のテキストを非表示*/
     height:43px !important;
}
.twtr-ft {
     height:60px !important;
     text-indent:-9999px;
}

.twtr-ft div{
     padding-top: 0 !important;
}

フッター部分
Join the conversation　の文字の変更はこのようにします。

・
・
・
width: 170,
height: 389,
footer: "Follow me", ←この一行を追加
theme: {

footerの「”　”」内の文字は漢字や空白でも可能です！

下のように「transparent」で透明にし、.twtr-docで指定している背景画像が表示されるようにします。

  theme: {
    shell: {
      background: 'transparent',←背景を透明に
      color: '#433d3c'
    },
    tweets: {
      background: 'transparent',←ツイート部分の背景を透明に
      color: '#444444',
      links: '#a8c97f'
    }
  },

完成～♪

こちらのページにてtwitterウィジェットを表示させています。
※鍵をつけているので表示されません。
ソースのみ参考にして下さい。