ひとりごと

画像にテキストを回り込りこます方法 new!

chiricoyet

最近になって上記のサイトさまで勉強させてもらっております。
嬉しいことに私の書いた記事が2件も取り上げてくれているんですよ〜

この画像の回り込み記事で簡単に成功しましたが、ちょっと変なところで改行が入っておりましたので
その辺だけはテストした時に焦りました
私への覚書として記しておきます。

lib/MT/app/の中にあるCMS.pm（※CMS.pmと書き忘れのため追記）

my $link = $thumb ? qq(<img src="$thumb" width="$thumb_width" height="$thumb_height" border="0"/>) : "View image";
return <<HTML;
<a href="$url" onclick="window.open('$url','popup','width=$width, height=$height, scrollbars=no, resizable=no, toolbar=no, directories=no, location=no, menubar=no, status=no, left=150, top=100'); return false">$link</a>
HTML
} elsif ($q->param('include')) {
(my $fname = $url) =~ s!^.*/!!;
if ($thumb) {
return <<HTML;
<a href="$url"><img alt="$fname" src="$thumb"width="$thumb_width" height="$thumb_height" border="0" /></a>
HTML
} else {
return <<HTML;
<img alt="$fname" src="$url" width="$width" height="$height" border="0"/>
HTML
}
} elsif ($q->param('link')) {
return <<HTML;
<a href="$url">Download file</a>
HTML
}
}

の箇所を

my $link = $thumb ? qq(<img src="$thumb" width="$thumb_width" height="$thumb_height" border="0" class="img_L" />) : "View image";
return <<HTML;
<a href="$url" onclick="window.open('$url','popup','width=$width, height=$height, scrollbars=no, resizable=no, toolbar=no, directories=no, location=no, menubar=no, status=no, left=150, top=100'); return false">$link</a>
HTML
} elsif ($q->param('include')) {
(my $fname = $url) =~ s!^.*/!!;
if ($thumb) {
return <<HTML;
<a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" border="0" class="img_L" /></a>
HTML
} else {
return <<HTML;
<img alt="$fname" src="$url" width="$width" height="$height" border="0" class="img_L" />
HTML
}
} elsif ($q->param('link')) {
return <<HTML;
<a href="$url">Download file</a>
HTML
}
}

次にスタイルシートに下記を追記

.img_L{
float: left;
border: none;
margin-right:8px;
margin-top:4px;
}

上記で画像の周りにテキストを回り込ませることができます。
これはあくまでも画像が左に対しての回り込みですからね。

そうするとこうなります。

もしここで回り込みを止めたい場合は「<br clear=all>」とすれば画像の下にテキスト表示となります。

ほ〜らなったでしょ