- 2005年11月21日 10:14
- カスタマイズ
写真に文字を回り込みさせたくて、ちっとばかりcssを変更・追加しました。
まずmoblog。
お世話になっている平田さんのmoblog.uva.ne.jpでテンプレートの変更をします。
写真を左に、右に文字を回り込みさせます。
floatを使うのでclearを入れますが、xhtmlではclearはCSSで指定することを推奨されているらしいのでstyleで指定。
写真専用のclass名（私の場合はpict）を与えます。alt属性も付け足しました。
template
%(imagecontent)s%(caption)s<br style=\"clear:left;\" />
image template
<img src=\"%(imageurl)s\" class=\"pict\" alt=\"mobile photo\" />
続いて、CSSを変更。
.pict {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #666;
border-right: 1px solid #666;
padding: 5px;
margin: 0px 10px 5px 0px;
float: left;
clear: left;
}
さて、テストしてみますね。これでどうかなー。上手くいってるならば、画像が左に、文字は右に回りこんで表示されてるはず。こ のcssは、モブログ専用に設定してるのではなく、entryの画像全てに使っています。そうすると、モブログではclear:left（回り込み解除） が入るんだけど、 エントリーでは、自分で<br style="clear:both">を追加しなくてはいけないんですよね。
うーーん。面倒くさいなぁ。
エントリーのテンプレを書き換えるのは避けたいんですよね。
何かいい手はないかなぁ。もうちょっと考えなくちゃね。
