エントリー内の画像とテキストの回りこみ。(パクリー:笑)
えー、何やら、yujiro さんがお忙しいようなので・・・パクリいっときます。パクリ上等ということで。(笑)
エントリー内に、画像を表示させテキストを回り込ませる方法ですが、img タグに、align オプションを設定して、実現してます。どうやってやっているのかというと、ソース見たほうが早いですね(笑)。一個前のエントリーの画像周りのソースは下記のようになってます。
<img alt="rawlings.jpg" src="http://blog.garaku.cc/cgi/wp-content/uploads/images/rawlings.jpg" width="200" height="160" hspace="5" vspace="5" align="left" /> Rawlings のグラブを使ってるんですよ・・・
デフォルトの img タグ挿入時のソースに、上記青字を追加してます。hspace オプションは、画像の上下の余白をピクセル単位で設定、vspace オプションは、画像の左右の余白をピクセル単位で設定、align オプションは、画像を左右のどちらにおくかを設定してます。left にすれば、先のエントリーのように左側に画像が表示され、right にすれば、このエントリーのように右側に設定されます。
そして、さらに、画像の高さ以内でテキストが終了してしまう、このようなエントリーの場合は、<br clear="left" /> というタグをエントリーの最後にうってます。(画像右配置の場合は right 。両方の場合は both 。)
これによって、画像が、posted 欄・コメント欄などにかぶってしまうエラーを回避することができます。なぜエラーになってしまうかというと、align 設定が生成されたエントリーのソース内で生きてしまっているからなんですねー。
後、もう一個。
いちいち、画像に ”vspace” ”hspace” ”align” を手打ちするの非常に面倒なので、私はシステムを下記エントリーのように改造してデフォルトで入るようにしてますです、はい。
● Movable Type 3.11-ja アップグレード。【追記】 内、”画像アップロード時の基本レイアウトを加工。”
我楽さんはじめまして。
小粋空間さんのところで画像とテキストの回りこみについての質問をさせていただいたaquaと申します。
我楽さんのエントリーの通りにやってみましたら、すぐにできました^^
わかりやすい解説をどうもありがとうございました。
CMS.pmも修正しましたので、簡単にかっこよく画像が配置できるようになり、とてもうれしいです。
BlogPeopleに登録させていただきました。
これからもよろしくお願いいたします。
> aqua さん
はじめましてー。
うまくいかれたようで、よかったです。^^
パクリ・エントリーすみません。(笑)
こちらのほうこそ、今後ともよろしくお願いします。m(__)m
画像を表示させテキストを回り込ませる方法
毎度毎度、カスタマイズの時にはお世話になっております、我楽さんの「エントリー内…
匂い袋
画像とテキストの回りこみについてblogを巡っていて見つけてしまった。 ちょっ…
縦長の画像を配置…
いつも画像は幅を500pixelにしていました。
今まで縦長の画像を配置して文字を入れた場合、第1行目が画像の右横から始まり、次の行が画像の下に続くといっ…
文字の回りこみ
画像の右隣に文字を持ってきたいって思ってたんですが中々できなくて・・ …