はてなダイアリーのtwitter記法が生成するHTMLを見てみる【リライト版】

はてなダイアリーにtwitter記法ができて便利になったので、ついでにツイートに枠線でも入れてみるか、ということでどういうHTMLが生成されているか見てみました（という記事をさっき書いたのが間違ってたので書き直した版がコレです）

はてなのtwitter記法が生成するHTMLは、こんな感じです。

<div class="twitter-detail twitter-detail-left"> 
  <div class="twitter-detail-user"> 
    <a class="twitter-user-screen-name" href="http://twitter.com/mohri"> 
      <img src="http://a1.twimg.com/profile_images/834000356/nightmeeting03_normal.png" alt="mohri" height="48" width="48"> 
    </a> 
  </div> 
  <div class="twitter-detail-tweet"> 
    <p class="twitter-detail-text"> 
      はてなダイアリーがリニューアルされた <a class="twitter-tweet-url" href="http://htn.to/JDpALJ" target="_top"><span>URL</span></a> 
    </p> 
    <p class="twitter-detail-info"> 
      <a href="http://twitter.com/mohri/status/14816720332" class="twitter-detail-info-permalink">
<span class="twitter-detail-info-date">2010-05-27</span>
 <span class="twitter-detail-info-time">15:03:44</span></a>
 <span class="twitter-detail-info-source">via <a href="http://www.hatena.ne.jp/guide/twitter" rel="nofollow">Hatena</a></span> 
    </p> 
  </div> 
</div>

ということで、このレイアウトをもとにツイートに枠線とか付けてみました。こんな感じにできます。

表示例

(http://twitter.com/mohri/status/14868120521:twitter:detail)

ツイートに枠線

ツイート全体をtwitter-detailが囲ってるので、これにborderを設定します。それだけだとキツキツになってるのでpaddingを入れて、ついでに角丸にしてみました。

div.twitter-detail {
  border: 1px grey solid;
  padding: 15px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

ツイートに背景画像

調子に乗って、twitter-detailに背景画像（background）も追加してみます。発言そのものは白バックにしたいので、twitter-detail-tweetにも背景色やパディングや角丸を指定します。

div.twitter-detail {
  border: 1px grey solid;
  padding: 15px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: url('背景に指定する画像') #EBEBEB;
  background-position: center; }

div.twitter-detail-tweet {
  padding: 5px;
  margin-right: 0px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #fff; }

div.twitter-detail-tweet p.twitter-detail-info {
  margin-top: 5px; }

そのほかの設定 - 右側のアキを取る、ほか

上のリストには、枠線や背景じゃないCSS設定も入ってます。

デフォルトのスタイルでは、左右どっちにでもアイコンを入れられるレイアウトにするためtwitter-detail-tweetの両サイドに同じだけのマージンを取ってるんですが、そのままだと背景画像を敷いたときにアイコンが入ってないほうがちょっと格好わるい。

アイコンがどっちに来るかを決め打ちで使うなら、反対側のマージンを詰めちゃってもいいんじゃね？ ということでtwitter-detail-tweetのmargin-rightをゼロにしてます。

それから、twitter-detail-infoにmargin-topを設定しているのは、発言日時などの情報行をちょっと行アキで表示したかったため。

そのほか、twitter-*のデフォルトのレイアウトは次のCSSに設定されてるので、アレンジの際には要チェックです。
http://d.st-hatena.com/statics/css/base.css

背景画像を設定するときの注意

上記のツイートでは、自分がTwitterで設定しているテーマの背景画像を設定してるんですけど、これだと誰のツイートを貼っても必ず自分の背景画像で表示されちゃうから、そういう意味ではあんまイクないですね。自分の発言しか貼らないってならいいけど、いろんなひとの発言を貼るようなまとめサイトには向かない。

Twitterのデフォルト背景（たとえば下記URLとか）にしとけば汎用っぽくなるのかな。
http://a3.twimg.com/a/1274899949/images/bg-clouds.png

[2010-05-29 11:20ごろ - 少しリライトしました]