twitter記法用CSS
先月バージョンアップしたはてなダイアリーだが、新たにtwitter記法なるものができた。Twitterから手軽に引用ができるという記法である。さっそく使ってみたのだが、どうもデフォルトのデザインではTwitterからの引用というのがわかりにくいのではないかと思ったので、適当にデザインを変えてみた。
tweet用
twitter:14599143811:tweet
detail用
twitter:15256117144:detail twitter:15258208921:detail:right
twitter記法の不具合
twitter記法では、
[http://twitter.com/hatenadiary/status/123456789:twitter:detail]
のようにも記述できるのだが、前後によけいな<p></p>タグが入ってしまうのでお勧めしない。
CSS（スタイルシート）
/* twitter記法 */ .body .section div.twitter-tweet { -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #D4D8E0; margin: 1em 0; padding: 0.5em; background: #FFFFFF url("http://img.f.hatena.ne.jp/images/fotolife/m/michinao/20100607/20100607025558.png") no-repeat scroll right bottom; } .body .section div.twitter-detail { -moz-border-radius: 5px; -webkit-border-radius: 5px; margin: 1em 0; border: 1px solid #D4D8E0; background-color: #F9F9F9; } .body .section div.twitter-detail-user { margin: 10px 10px auto 10px; width: 48px; } .body .section div.twitter-detail div.twitter-detail-tweet { margin: 0 68px; padding: 1px 0; background: #FFFFFF url("http://img.f.hatena.ne.jp/images/fotolife/m/michinao/20100607/20100607025558.png") no-repeat scroll right bottom; } .body .section div.twitter-detail div.twitter-detail-tweet p.twitter-detail-text { padding: 5px; } .body .section div.twitter-detail div.twitter-detail-tweet p.twitter-detail-info { padding: 0 5px 5px 5px; }
めんどくさいのでdetail用とtweet用しか作ってません(^^;
記述がおかしいとか、ここはこう纏められるとかございましたらご指摘ください。
