eclatinfo's diary

テキストの回り込みですが、
いろいろやりかたはあるとは思うのですが、
今風なCSSスタイルのHTMLの書き方だと、
CSSのfloatでやるのがスマートかなと思います。
あくまで自分ならこうするというやりかたですが。
このように画像を右にしたいなら…
<img src="http://aladin.eclat.cc/img/greet.gif" style="float:right" />
とやればいけるのかなと思います。

…と思ったら、これ自体は正しいのですが、記事を記事個別ページで見るとおかしくないですが
日記トップで見るとおかしな空白が…
恐らく日記トップのCSSの書き方とぶつかって予期してなかった表示になってるのでしょう。(たぶん同じくfloat配置してる右のメニュー)
ちょっとデフォルトのテンプレートCSSが要検証ということが分かりました…


左に画像を置きたい場合はfloatを左にすればいけます。
このstyle=は全ての許可タグで使えます。
これはHTMLやCSSの解説サイトを読んでいただければわかりますが
タグ単位でCSSをページ内に直で埋め込む場合の記法のためのものです。
floatだけのものでなく、CSS全般の設定を書けます。fontの色や配置などもCSSの記法で入れることが可能です。
例えば上記HTMLサンプルの背景が白色ですが、これもstyle="background-color:#ffffff;"等入れて指定しています。

回り込み解除ですが、CSSではfloat解除もCSSで指定します。
clear:both;を指定することでその個所以下でfloat解除が行われます。
<p style="clear:both" />
とでも入れればそこで解除できると思います。

画像左寄せでは変な空白は出てないですね…(というか、一番上のclear:bothが干渉するのでしょう)
ちょっとまた調べときます。おそらく昔作ったテンプレートが妙なCSSなのでしょう。そちらのCSSと今回指定したCSSがぶつかってるのだと思います。

CSSを自由に触れますので、頑張ればかなり自由に配置はできるとは思います。


＃現状このような不具合がありますので、現在のテンプレートのままではこのfloatを使った回り込みはお勧めしません。
(逆に言うとテンプレートのCSS次第では今回の問題は発生しないこともあるはずです。
同じようなレイアウトのはずの記事個別ページで不具合は発生していないのですから、トップでも問題無いように改造することは可能に思います)

＃もっと正確に言うと、floatによるテキスト回り込みは問題ありません。
その語文中で解除しようとclear:bothを行うと、多くのテンプレートで空白ができると思います。