画像ごとにテキストの回り込み方を変えるCSS

各記事内の画像にテキストを回り込ませるために、alignを入れていて、
当初はプレビューでもアップした記事でも、ちゃんと回り込んでいたのに、
しばらく時間を空けてみてみたら、どれもテキストが下に落ちていた・・・。なぜ?

調べたらこのタグ、もともと非推奨のうえに、近い将来使えなくなるとか。
そのせいかどうかはわからないが、このブログで反映されないことは確かなので、別の方法で回り込ませることに。


ほかの方の参考になるかもしれないので、解決策をメモ。

画像のimgタグにclass指定(例:<img class="mamadeok" />)をしたあと、
記事ごとに以下のようなタグを直接書き込む。
marginとpaddingの値を変えれば、レイアウトを記事ごとに調整できる。

<style type="text/css">
<!--
img.mamadeok {
float: left;
margin:0px;
}
-->
</style>


margin:0px;は一見要らないようだが、入力しないと回り込まなかった。
bloggerの「作成」モードから「HTML」モードに戻すと、なぜか最後の -->と</style> が入れ替わってしまうため、「作成」モードには切り替えないのが吉。
【11/03 追記】入れ替わらなくなっている模様。

0 comment :

コメントを投稿