みなさんもお使いかもしれませんが、Twitterの公式ウィジェットをカスタマイズする方法を紹介します。今回紹介する方法を使えば、まるで公式ウィジェットではないかのようなデザインにカスタマイズすることができます。Twitterの公式ウィジェットを使っている方は、ぜひぜひやってみてください。
みはら（@masashi_385）も以前、Twitterを利用したWebサイトを作ったんですが、そのときにこの方法を知っていたら、もっともっとラクにサイトを作れただろうなぁとしみじみ感じています。
まずhtml部分
html部分に関してはとくに弄りません。ただ、CSS適用のために全体を id=twi_widget として囲んでいます。
[cc lang=”html”]
肝心のCSS部分
こっからが本題です。CSSを適用させて、ステキなTwitterウィジェットにつくりこみましょう。
まず、border-radiusを0にして、角丸をなくします。そして全体を囲むdivに対して、マス目の背景画像を指定してやります。名前のh3、ユーザー名のh4は、背景を透明にしてマス目画像がきちんと見えるようにします。プロフィール画像twtr-profile-imgは48px四方のものを縮小して表示しているようなので、縮小をやめてみます。そして、なんとなく右にもってきてみます。さらに、Twitterの公式ウィジェットっぽさを醸し出している原因のフッター部分を全撤去します。
で、いろいろやった結果、こういうコードになるわけです。
[cc lang=”CSS”]
#twi_widget {
border: 1px solid #3399ff;
}
#twi_widget .twtr-doc {
border-radius: 0 0 0 0;
-moz-border-radius: 0 0 0 0;
-webkit-border-radius: 0 0 0 0;
}
#twi_widget .twtr-bd {
border: 1px solid #3399ff;
margin: 0 10px;
}
#twi_widget .twtr-timeline {
border-radius: 0 0 0 0;
-moz-border-radius: 0 0 0 0;
-webkit-border-radius: 0 0 0 0;
}
#twi_widget .twtr-widget-profile img.twtr-profile-img {
display: block;
float: right;
width: 48px;
height: 48px;
}
#twi_widget .twtr-widget-profile h3, #twi_widget .twtr-widget-profile h4 {
margin: 0 !important;
}
#twi_widget .twtr-widget h4 {
font-size: 32px !important;
font-weight: bold;
}
#twi_widget #twtr-widget-1 .twtr-doc {
background: url(“https://miha5.com/img/bg.gif”) repeat scroll 0 0 #FFFFFF;
}
#twi_widget #twtr-widget-1 h3, #twi_widget #twtr-widget-1 h4, #twtr-widget-1 .twtr-hd a {
background-color: transparent !important;
}
#twi_widget .twtr-ft {
display: none !important;
}
[/cc]
できたのはこんなウィジェット
で、完成したのがこちらです。
どうでしょうか？
パッと見では公式ウィジェットとは思えませんね。なかなかの出来ではないでしょうか？ぜひぜひみなさんもこれを参考にやってみてくださいね：）
