本日、はてなダイアリーのコメント欄のレイアウトとHTML構造を刷新し、新しいコメント構造にいたしました。
主な変更点は以下の通りです。(先日の告知と同内容です。)
- [コメントを書く] のかぎかっこ（[]）を削除しました
- コメント本文に付くかぎかっこ（『』）を削除しました
- これまでは「ユーザー名＞コメント本文＞書き込み日時」でしたが、「ユーザー名＞書き込み日時＞コメント本文」に変更しました
- ユーザーアイコンのリンクをその人のダイアリーへのリンクに変更しました（span.canchorは廃止）
- 個別コメントのpermalinkは書き込み日時にリンクしています
- 書き込み日時・コメント本文をそれぞれ別のspanで囲み、classを設定しました
- base.cssにいくつかのスタイルを追加しました
- ユーザー名・書き込み日時の後が改行されて本文が始まるような指定にしました
- 書き込み日時のanchorの色を指定しました
- hatena2テーマでは、新しいcomment構造にあった形でさらにスタイルを追記しました
先日よりd2.hatena.ne.jpで新しいコメント構造を実験しておりましたが、特に問題はないと判断し本番環境に反映いたしました。コメントやトラックバックでご意見、ご感想をいただいたユーザー様、ありがとうございました。
また、今回の変更の影響で、お使いのデザインテーマによってはレイアウトが崩れていることがございます。かんたんデザインで提供しているテーマについては近日中にはてなで対応を行う予定ですが、ご自身でテーマの更新を希望されるテーマ作者様は、お手数ですがはてなまでご連絡いただければと思います。
その他詳細な変更点については以下をご覧ください。
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%; }
