d2.hatena.ne.jpで新しいコメント構造の実験を開始しました

本日、はてなダイアリーのテスト環境 d2.hatena.ne.jp にて、コメント欄の新しい構造実験を開始しました。

http://d2.hatena.ne.jp/

詳しい変更内容は以下の通りです。

• [コメントを書く] のかぎかっこ（[]）を削除しました
• コメント本文に付くかぎかっこ（『』）を削除しました
• これまでは「ユーザー名＞コメント本文＞書き込み日時」でしたが、「ユーザー名＞書き込み日時＞コメント本文」に変更しました
• ユーザーアイコンのリンクをその人のダイアリーへのリンクに変更しました（span.canchorは廃止）
  • 個別コメントのpermalinkは書き込み日時にリンクしています
• 書き込み日時・コメント本文をそれぞれ別のspanで囲み、classを設定しました
• base.cssにいくつかのスタイルを追加しました
  • ユーザー名・書き込み日時の後が改行されて本文が始まるような指定にしました
  • 書き込み日時のanchorの色を指定しました
    • hatena2テーマでは、新しいcomment構造にあった形でさらにスタイルを追記しました

いただいたご意見を元に改善を行い、近日中に本番環境へ反映する予定です。ご興味のある方はご覧いただき、ご意見やご感想をいただければと思います。

HTML構造の変更

<form id="comment-form" class="comment">
  <div class="comment">
    <div class="caption"><a name="c">コメントを書く</a></div>
    <div class="commentshort">
      <p>
        <span class="commentator"><a class="hatena-id-icon"><img class="hatena-id-icon">username</a></span>
        <span class="timestamp"><a href="permalink">2000/00/00 00:00</a></span> 
        <span class="commentbody">コメント本文</span>
      </p>
      <p class="commentform">
        <span class="commentator"><input id="comment-username" name="username" size="15" value=" "></span><br>
        <textarea></textarea>
        <input value="投稿" type="submit">
      </p>
    </div>
  </div>
</form>

base.cssの指定

.commentshort p img.hatena-id-icon {
  margin-left: 0;
}

.commentshort span.commentbody {
  display: block;
  padding: 0.2em 0 0.4em 0;
}

.commentshort span.timestamp a {
  color: #999;
  margin-left: 0.5em;
  text-decoration: none;
  font-weight: normal;
}

.commentshort span.timestamp {
  font-size: 90%;
}