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

15:46

本日、はてなダイアリーのテスト環境 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%;
}

ツイートする

キーワードの「含む日記」ページに利用規約違反ダイアリーの通知フォームを設置しました

15:22

はてなダイアリーキーワードの「含む日記」ページに、ワンクリック詐欺サイトやアダルト情報サイトへの誘導目的など、はてな利用規約に違反しているダイアリーの通報リンクを設置しました。

例：「はてな」を含むブログ - はてなキーワード

キーワードを含む日記の右下に「利用規約違反を通知する」というリンクがありますので、クリックするとそのページに掲載されているダイアリーから、規約違反のものだけをチェックして、コメントとともにはてなに通報することができます。

idea:15821でご要望いただきありがとうございました。今後、キーワードを含む日記に上記のような規約違反ダイアリーを発見された方は、お手数ですがこちらから通報いただければと思います。ご協力をよろしくお願いいたします。

ツイートする