これも今さらですが・・・(^-^;。
Movable Typeのデフォルトでは、このように、イメージ画像にテキストが回り込みません。
で、最近、下のように画像の右側にテキストを回り込ませるようにしてみました。
どうも、デフォルトだと右側の隙間が気になってて、tableタグを使おうとしていたのですが、そうすると、携帯から見る時に醜くなるので、やめていました。で、一時そのままにしてたのだが、やっぱり、どうにかしたいと思い、新たな手法でやってみることに(^-^;。
【画像のテキスト回り込みの方法】
その画像の回り込みを指定する方法として、「float」プロパティを使用。
「left」が左回り込み、「right」が右回り込みです。
また、画像とテキストの間が密着してしまって、イヤだと感じる方は、「margin」プロパティを指定し、画像とテキストの間を適度に空けると良いでしょう。
スタイルシートに以下の構文を追加。
※編集は、自己責任において行って下さい。
▼画像の右側にテキストを回り込ませる。
.img_l{
float: left;
border: none;
margin-right:20px;
margin-top:0px;
}
▼画像の左側にテキストを回り込ませる。
.img_r{
float: right;
border: none;
margin-left:20px;
margin-top:0px;
}
これで、画像タグで、<img src=”～” class=”img_l”>とすれば、画像の右側にテキストが回り込み、<img src=”～” class=”img_r”>とすれば、画像の左側にテキストが回り込むことになります。
（自分のサイト環境は、「Movable Type 2.661？」かな。他でも大丈夫かと思われますが、自己責任で。）
自分の場合、画像をアップロードした場合に自動的に「class=”img_l”」をつけるようにしようかとも思いましたが、レイアウト変えたり変化をさせようと、右回り込み、左回り込みを手動でやることにしました。
その日の気分に合わせ、クラスをちょいと挿入するだけなんで、まあいいかと（笑）。
コメント