写真に枠を付ける

CSSはこんな感じで許していただきたいと思います。もうとても、うちの会社の部下たちにはかないません。

.photoframe {
	margin-bottom: 10px;
}
.photoframeinner {
	border: 1px solid #ccc;
	padding: 3px;
	background-color: #ffffff;
}
.photoframecaption {
	border: none;
	text-align: left;
	line-height: 130%;
	padding: 2px;
}

これをMovable Typeのスタイルシートテンプレートに反映させたら、次は各エントリを書き換え。Movable Typeの書き出し機能を使って、全部1つのテキストファイルに書き出し、エディタなんかで一気に書き換えてしまいましょう。「width:480px」のところは、画像の横幅に合わせて書き直すというのが何気に大変な作業です。誰か、これを指定しなくても横幅がぴったりになるCSSの書き方を教えてください。

<div class="photoframe"><div class="photoframeinner" style="width:480px">
<img alt="20070323momiji2.jpg" src="http://www.spacelogue.com/blog/images/200703/20070323momiji2.jpg" width="480" height="360" />
<div class="photoframecaption">
</div></div></div>

次はいよいよ、Movable Typeの画像のアップロード処理部分の改造です。
lib/MT/App/CMS.pm で、「window.open」を検索してヒットするあたり、4807行目付近です（Movable Type 3.34の場合）。

    } elsif ($q->param('include')) {
        if ($thumb) {
            return <<"HTML";
<a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
HTML
        } else {
            return <<"HTML";

<div class="photoframe"><div class="photoframeinner" style="width:${width}px">
<img alt="$fname" src="$url" width="$width" height="$height" />
<div class="photoframecaption">
</div></div></div>

HTML
        }
    } elsif ($q->param('link')) {
        return $app->translate_templatized(<<"HTML");
<a href="$url"><MT_TRANS phrase="Download file"></a>
HTML
    }
}

画像の横幅も自動的に設定されるので、ただキャプションを書き加えるだけで、枠付きの写真のタグがエントリの内容として投稿画面に埋め込まれます。これでしばらくは大丈夫でしょう。
後はaltですか。いままで楽してきたつけです。こつこつと入力していきたいと思います。