[追記]書き直しました!
この記事は間違えてたので書き直されてます。こっちを見てください!!
→ http://d.hatena.ne.jp/mohri/20100528/1275005317
以下オリジナル原稿(に手を入れて意味が通じるようにしたもの)
はてなダイアリーの新規追加されたTwitter記法で、twitterの発言を貼りやすくなったんだけど、発言のまわりに枠線でも付けたいなーとおもったので、CSSをあてるdivを見つけるためにどういうHTMLが生成されてるのかソースを見てみた。
この記事の直前のエントリの実際のソースです。ちょっと読みやすくなるように改行をてけとーに入れてます。
(はてなのtwitter記法ではなく)twitterのツールが生成するHTMLソースです
<p><!-- --> <style type="text/css"> .bbpBox14816720332 { background:url('http://s.twimg.com/a/1274834447/images/themes/theme7/bg.gif') #EBEBEB; padding:20px; } p.bbpTweet{ background:#fff; padding:10px 12px 10px 12px; margin:0; min-height:48px; color:#000; font-size:18px !important; line-height:22px; -moz-border-radius:5px; -webkit-border-radius:5px } p.bbpTweet span.metadata{ display:block; width:100%; clear:both; margin-top:8px; padding-top:12px; height:40px; border-top:1px solid #fff; border-top:1px solid #e6e6e6} p.bbpTweet span.metadata span.author{ line-height:19px} p.bbpTweet span.metadata span.author img{ float:left; margin:0 7px 0 0px; width:38px; height:38px} p.bbpTweet a:hover{ text-decoration:underline} p.bbpTweet span.timestamp{ font-size:12px; display:block} </style> <div class="bbpBox14816720332"> <p class="bbpTweet"> はてなダイアリーがリニューアルされた <a rel="nofollow" href="http://htn.to/JDpALJ">http://htn.to/JDpALJ</a> <span class="timestamp"> <a href="http://twitter.com/mohri/status/14816720332" title="Thu May 27 06:06:44 +0000 2010">less than a minute ago</a> via <a rel="nofollow" href="http://www.hatena.ne.jp/guide/twitter">Hatena</a></span> <span class="metadata"> <span class="author"><a href="http://twitter.com/mohri"><img src="http://a1.twimg.com/profile_images/834000356/nightmeeting03_normal.png"></a><strong><a href="http://twitter.com/mohri">mohri taroh</a></strong><br/>mohri</span></span> </p> </div> <!-- --> </p>
注目したいのが、全体のdivについてるこの背景設定で
background:url('http://s.twimg.com/a/1274834447/images/themes/theme7/bg.gif') #EBEBEB;
これってつまりTwitterのほうで使ってるデザインの背景画像をこっちでも表示しますよ、っていう設定に見えるんですけど、でもこれって効いてます? 少なくともこのダイアリーをchromeで見る限りは、背景画像らしきものはぜんぜん表示されてないんですけど……
Twitterからコピペしたソースでは効いてますね
あとデザイン設定に
p.bbpTweet { border: solid 5px black; }
って入れてみたけど、これも効いてないっぽい。なんでだろう? だれか理由がわかるひとがいたら教えてください。
そりゃまあねえ。ホントにすんませんでした