in between days

表参道で働くシニアのブログ

【間違いでした】はてなダイアリーのtwitter記法が生成するHTMLを見てみる【書きなおします】

[追記]書き直しました!
この記事は間違えてたので書き直されてます。こっちを見てください!!
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; }

って入れてみたけど、これも効いてないっぽい。なんでだろう? だれか理由がわかるひとがいたら教えてください。
そりゃまあねえ。ホントにすんませんでした