コメント部分のクリックで編集可能になった関係で、背景にクリーム色を設定するCSSが自動挿入されるようになった模様。
しかしこれ、スタイルに関わらず挿入されているので、例えば暗い背景にクリーム色の文字を設定していた人は困ったことになるんじゃないだろうか。
そうでなくても、暗い青を基調とした私のスタイルなんかでは妙にそこだけ浮いてしまうことになった。
これを上書きする方法を探ろう。
ソースの確認
該当部分はユーザー本人が閲覧した時のみ表示され、クリックで即入力フォームへ変化する。ユーザー本人かどうかの判定はサーバーサイドでやっているのだろうが、入力フォームへの置き換えはJavaScriptで処理している筈だ。
JavaScriptが書き出すHTMLは普通にソーフを表示しても確認できない。jsファイルを読めば処理を理解することもできるだろうが、HTMLソースを確認する方法としては手軽でないし、私はそんなにJavaScriptに堪能でないので、別の方法で解決する。FireFoxの機能拡張「View Render Source」を利用して、JavaScriptが書き出すソースを表示するのだ。
日本語部分がURLエンコードされてしまったソースを普通のソース表示と対比させつつ確認するが、どういうわけか該当部分にそれらしい構造変化が見られなかった。
動的スタイル編集
するとJavaScriptで構造を付加してあるのではなく、既存の構造にスタイルを割り当てただけなのだろうか。
「Web Developer」のCSS編集機能で、システムが自動付加するスタイルを確認してみる。すると、.editinsitu-highlightにそれらしいスタイルが見て取れる。background-color:#ccf;というのがそれだろう。
Web Developerのリアルタイム変種機能を利用し、取り敢えずスタイルシート欄に.editinsitu-highlight { background-color: #999; }を設定して反応を見るが、自動付加されるスタイルの方が後から読み込まれるため上書きされてしまうようで、巧く行かない。
取り敢えず!importantで無理矢理言うことを聞かせるにする。
これで背景色はコントロールできた。が、未だ気になるところが残っている。
クリック可能部分の変更
どういう仕様に拠ってか、コメント編集のクリック可能範囲はコメントの文字幅ではなく行全体の幅に設定されているようで、文字のある部分より右側でもクリックできるようになっている。これでは、例えばウィンドウをアクティヴにしようと画面内をクリックする場合にもこの機能が働きかねない。
調べてみたところ、これは実質的にdd.commentに設定されているようだ。通常ではdd.commentはブロックレベル要素であり、親要素の幅一杯の範囲を持つ。
はてなが設定範囲をspan.commentに変更してくれれば問題ないのだが、少なくとも現在はこの問題を解消するためにdd.commentをdisplay:inlineでインライン要素に変更せざるを得まい。結果としてスタイルに少々の不具合-----というか、予定になかった見栄えが現れてしまうが、背に腹は代えられない。
