画像貼付の実験 - clear


デフォルトだと画像をタイトルより後ろにはれないのが気に入らず、ちょこっといじってみました。
スタイルシート

img.photo {
	float: left;
	border: 0;
	margin-top: 30px;
	margin-right: -333px;
	margin-left: 33px;

}
.clear {
	clear: both;
}

として、本文に

*画像貼付の実験
<BR CLASS="clear">
デフォルトだと画像をタイトルより後ろにはれないのが気に入らず、ちょこっといじってみました。

と書いています。すると、上のように表示されるわけです。ブラウザによって表示が崩れるかもしれないので要調査。

  • Internet Explorer 6.0では意図したように表示されますが、時々配置が崩れます。
  • Opera 6.05では意図したように表示されます。
  • Netscape 7.01および7.1では画像に文字が重なってしまいます。NNもclear対応ということになってるんですが。NNははてなのデフォルト設定の引用部や、他の様々なWebpageでも、変な表示をしてくれます。昔はNNの方がIEよりいいと考えていましたが、最近はNN無視してもいいかなと… とりあえず、字、読めるし。

3月2日追記:ここの仕様では、カテゴリーで記事を呼ぶと、一日の日記全部ではなく、指定されたカテゴリーのセクションだけが表示されます。そこに必ずその日の画像(一日に一画像のみアップロードできる)が表示されるので、画像表示位置をいじるとレイアウトがおかしくなります。複数の話題=セクションがある日は、カテゴリーで呼んだ文章と関係のない画像が出てくるわけで、画像表示位置の問題がなくてもこの仕様は不満。その日の最初のタイトルにだけその日の画像が出てくるならIEOperaではここに書いた方法でも問題なさそうなんですが、とりあえずやり方を変えます。ちなみに、タイトルで呼ぶ場合はその日の日記全部が出るようにできるので、問題ありません。表示は変わっていませんが、現在のソースは上の記述とは異なっています。同じ理由で2月28日の方法もダメ。解決案は3月3日に。