画像に縁取りを設定

以前のサイトからのエントリーの引っ越しを，１個ずつ手作業で行っています。iBlogからMovableTypeに書き出せると思っていたのですが，どうもできないようです。いずれにしても，HTMLタグを打ってある部分は手直しが必要なので，確認しながらやっています。

さて今回は画像に縁取りを設定するという話。他の方のブログを拝見していて，画像の回りにグレイの縁取りがしてあるのを見かけて，あれどうやってるのかな，毎回画像を修正してるのかな，などと思っていましたが，よく調べてみると，画像の回りにスタイルシートでborderをつけているのですね。

まず，スタイルシートの設定。MovableTypeのスタイルシートには，標準でphotoというクラスがあるので，今回はこれをちょこっと修正しました。

.photo {
padding: 4px;
margin: 0px;
border-top: solid 1px silver;
border-left: solid 1px silver;
border-bottom: solid 2px gray;
border-right: solid 2px gray;
background-color: white;
}

次に，エントリー内で画像を張り込むHTMLタグを次のように打ち込みます

<img src="http://sushi-fan.com/image/sushi_swing.jpg" class="photo">

これで画像の回りに縁取りをつけることができました。

縁取りをつけたくない時は，class="photo"の部分を外せばいいし，必要に応じて，いくつかのクラスを使い分けてもいいですね。

ちなみに，縁取りをつけるスタイルシートのクラス設定の部分は，私のご近所のmiyaさんのブログからパクらせていただきました。miyaさん，事後報告でごめんなさい。