Insert Caption under Photo - tsntsumi’s NOOTO

日記に挿入した画像の下にキャプションを入れたかったので、 CSSをいじってみた。そもそもは img 要素の alt 属性の値として写真の説明を入れたいんだけど。フォトライフ記法では対応していない。何となれば、フォトライフ記法がそのまま alt 属性の値に設定されてしまう。
例えば「[][f:id:tsntsumi:20090720202337j:image:w160][]」と記述すると、
ソースに alt="[]f:id:tsntsumi:20090720202337j:image:w160[]" と出力されてしまう。カーソルを画像の上にロールオーバーするとツールチップが表示されるのでわかるはずだ。しかしこんなのは、はてなの開発者のデバッグにはいいかもしれないけれど、本来の目的であるアクセシビリティから見てどうなんだと思う *1 。

まずスタイルシートに以下を追加する。

div.figure { margin: 0 1em 0.5em; padding: 0; }
div.section div.figure p {
    margin: 0 0 0.5em; line-height: 100%; text-indent: 0; text-align: center;
    font-style: italic; font-size: smaller; }

そして画像とキャプションを次のように挿入する。

><div class="figure" style="float:right; width:160px; margin-right:0em;"><
[f:id:tsntsumi:20090720202337j:image:w160]
Apple Wireless Mighty Mouse and Batteries
></div><

ここで style に width を指定しないとキャプションが長過ぎた時に折り返されないし、画像サイズよりも小さすぎると画像が切り取られてしまう。

それに <div ...>、</div> の前後を p タグ停止記法の「>...<」で囲まないと、前後に <p></p> が挿入されてしまうので注意。挿入されても表示上は問題なく思われるが、タグが入れ子になってしまうので、ソースをみたときに気持ち悪い。

float と margin-... を style で指定して、 CSS で指定していないのは float: right と float: left を時に応じて指定するため。これが面倒なら、 CSSで div.figure-right と div.figure-left を定義すればいいんじゃないかな。例えば

div.figure-right { float: right; margin: 0 0 0 1em; padding: 0; }
div.figure-left { float: left; margin: 0 1em 0 0; padding: 0; }
div.section div.figure p, div.section div.figure-right p, div.section div.figure-left p {
    margin: 0 0 0.5em; line-height: 100%; text-indent: 0; text-align: center;
    font-style: italic; font-size: smaller; }

という感じ。

また、 [f:id:...:image:w160] のサイズを指定せずに、スタイルシートで

div.figure img.hatena-fotolife { width: 100%; }

としてもいいのだが、そうすると RSS を表示した時に画像のサイズが指定されなくなってしまうので、サイズは指定した方がいいだろう。

*1: 7月26日追記。調べてみたら、はてなアイデアで以前から alt 属性をユーザが指定できるよう提案されていたらしい（d:id:masakanou:20080921:p2）。しかし、却下されてしまっているのが悲しい。