非ログイン時のコメントフォームのソース

はてな 
<p class="commentform">

<span class="commentator"><img src="http://www.hatena.ne.jp/images/guest_icon.gif" class="hatena-id-icon" alt="ゲスト" title="ゲスト" height="16" width="16"><input type="hidden" name="section" value="1197073126"><input id="comment-username" name="username" size="15"></span><br>

<textarea name="body" value="" cols="60" rows="3"></textarea><br>

<div class="captcha">
<img src="http://d.hatena.ne.jp/captcha?key=e41431687d5329ebb9a80b364f3ce87c_1197181350&amp;username=dobby-dog" class="captcha-image">
<input type="text" name="captcha_code" size="10" class="captcha-string" id="comment-captcha">
<input type="hidden" name="captcha_key" value="e41431687d5329ebb9a80b364f3ce87c_1197181350"><br>
</div>

<input type="submit" value="投稿"></p>

これだとブラウザが意図どおりに解釈してくれないんだよなー。P要素の中にはインライン要素しか存在できないのでブラウザはdiv.captchaの直前でp.commentformを閉じてしまうのです。span.captchaにしてdisplay:blockがいいのではないかな。アイデアに出してみようか。

choki/monolith/unionを更新しました

公開デザイン

主に記法やモジュールの詰めが甘かったところを直したりいろいろ。少しは見やすくなった。はず。
unionに関してはid:rarara123:20071118さんがいろいろ指摘してくださってたので参考になりました。ありがとうございます。やっぱり人に使ってもらう以上最初に用意されてるものを消したりとかよくないですね。デザインのためにデザインしちゃいけないのです。
んで大変申し上げにくいのですが、うっかり修正前に使っていた画像を消してしまいましてmonolithとunionが多分すごいことになってますごめんなさい。使っていただいている方、かつ見捨てないでいただける方はお手数かけますがもう一度インポートお願いします。

はてな記法とHTMLマークアップまとめ

CSS はてな メモ

はてな記法を使ったとき実際にどのようなHTMLが出力されるのか、CSS用にクラスやIDに特化したまとめを作ってみたよー。簡潔にするためにはと略してあります。

続きを読む

コメント新構造に関するいろいろ

CSS はてな

投稿ボタンにCSSが適用できます

<p class="commentform">
   <span class="commentator"><input id="comment-username" name="username" size="15" value=" "></span><br>
   <textarea></textarea>
   <input value="投稿" type="submit">
</p>

このように投稿フォームを含むP要素にclass="commentform"が追加されたので、p.commentform内のinput要素全てに投稿ボタン用のスタイルを書いてやって、そのあとから名前入力フォーム用のスタイルを上書きしてやれば簡単に個別にスタイルが適用できます。これまではコメント削除用とか投稿フォーム以外のinput要素に影響が出てやり辛かったはず。

.commentshort p.commentform input { ... }
.commentshort p.commentform input#comment-username { ... }

今までみたいにしたい

今回の変更で長文コメントなどは見やすくなったと思いますが、短いコメントばかりなら前の方が縦にかさばらず見やすい気もします（id:sampleみたいな）。今までっぽくするのは本文をインライン要素にしてしまえばいいんですが、日付が本文より前に来てしまうのであんまりよくないかも。日付を消す手もありますが、コメントのパーマリンクもなくなってしまうのでそこはお好みで？

.commentshort span.timestamp { display: none; }
.commentshort span.commentbody { display: inline; }

日付を消した場合、前みたいに『』がないので投稿者(span.commentator)を太字にするなり色を変えるなりして差異化をはかった方がいいかも。

.commentshort span.commentator { font-weight: bold; }

コメントの新構造に対応しました

公開デザイン

コメント欄を新しいレイアウト、HTML構造に刷新しました - はてなダイアリー日記
まさかこんなに早くくるとはーと思いつつも全デザインを更新しました。大体全部こんな感じです。そのままっていえばそのままですが。

日付は文字を小さめに目立たない色で。公式みたいな右上配置はなんかやなのでやめました。
一応確認はあらかたやってますが、何か見落としてるかもしれないのでその時はご指摘お願いします。