Hatena2テーマで「その場編集」の見出しハイライト色を変更しました
「その場編集」機能では、各見出しの上にマウスを持ってきたときに、見出しの周辺の色が黄色くハイライトしています。本日、Hatena2テーマ(カラーバリエーション含む)を更新し、それぞれのテーマカラーに合わせた色でハイライトし、また左側のボーダー色も合わせて変わるように変更いたしました。
たとえば、標準の「Hatena2」テーマでは以下のスクリーンショットのように薄い青色でハイライトされます。
その他、これまで右寄せで表示されていた投稿日時、カテゴリーなどを左寄せで表示し、より見やすくなるよう整理いたしました。
「前の日」「次の日」ページャにidを追加しました(開発者向け)
日記のページ上部と下部にある「前の日」「次の日」ページャー(div.calendar)に#pager-top,#pager-bottomを追加しました。
これにより、上下のページャそれぞれに対して、個別のスタイル指定が行えるようになりました。
<div class="calendar" id="pager-top"><a href=""><前の3日<88><86></a>div>
・・・・
<div class="calendar" id="paget-bottom"><a href=""><前の3日<88><86></a>div>
コメント欄を新しいレイアウト、HTML構造に刷新しました
本日、はてなグループ日記のコメント欄のレイアウトとHTML構造を刷新し、新しいコメント構造にいたしました。
主な変更点は以下の通りです。(はてなダイアリー日記の告知と同内容です。)
- [コメントを書く] のかぎかっこ（[]）を削除しました
- コメント本文に付くかぎかっこ（『』）を削除しました
- これまでは「ユーザー名＞コメント本文＞書き込み日時」でしたが、「ユーザー名＞書き込み日時＞コメント本文」に変更しました
- ユーザーアイコンのリンクをその人のグループ日記へのリンクに変更しました（span.canchorは廃止）
- 書き込み日時・コメント本文をそれぞれ別のspanで囲み、classを設定しました
- base.cssにいくつかのスタイルを追加しました
- ユーザー名・書き込み日時の後が改行されて本文が始まるような指定にしました
- 書き込み日時のanchorの色を指定しました
- hatena2テーマでは、新しいcomment構造にあった形でさらにスタイルを追記しました
先日よりd2.hatena.ne.jpではてなダイアリーの新しいコメント構造を実験しておりましたが、特に問題はないと判断し本番環境に反映いたしました。コメントやトラックバックでご意見、ご感想をいただいたユーザー様、ありがとうございました。
また、今回の変更の影響で、お使いのデザインテーマによってはレイアウトが崩れていることがございます。かんたんデザインで提供しているテーマについては近日中にはてなで対応を行う予定ですが、ご自身でテーマの更新を希望されるテーマ作者様は、お手数ですがはてなまでご連絡いただければと思います。
その他詳細な変更点については以下をご覧ください。
<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">usernamea>span>
<span class="timestamp"><a href="permalink">2000/00/00 00:00a>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>
.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%;
}
