Twitterの『Profile Widget』をCSSでカスタマイズしてみた。
ついったー。アカウント取ってから一月ほど放置してましたが今後は出来るだけ 活用したいと思います。というわけでサイドバーに公式ウィジェットを表示。 色の指定とか大雑把にはカスタマイズ出来るんですが、デフォルトの状態だと 案外やぼったいデザインになっちゃうんですよね。
そんなわけで細部をCSSでほんのりカスタマイズしてみました。 自分が探した限り「いじっちゃ駄目」とは書いてなかったしね。 外部のCSSファイルを読み込んでる感じだったので、 ダウンロードして中身を拝見。クラス名をチェックしてそれっぽい部分をいじいじ。
具体的には画像がウザかったので非表示に、ヘッダーとフッターの枠を細めにしました。 CSSは以下参照。あとついでにソースコードをそのままHTMLに書くのは抵抗があったので、 外部スクリプトに関数で書いて呼び出すようにしてみました。
.twtr-widget
{
margin-left:4px !important;
margin-top:15px !important;
}
.twtr-widget-profile h4
{
zoom:0.9 !important;
height:4px !important;
position:relative !important;
top:-9px !important;
}
.twtr-widget img,.twtr-widget h3{display:none !important;}
.twtr-join-conv{margin:-11px 0 !important;}