ひとりごと

2004年06月06日

画像のテキスト回り込み

chiricoyet

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

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

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
}
}


(太字部分は1行ですので、コピペして改行されてしまったら修正のこと)

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

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

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



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

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

ほ〜らなったでしょ tongue.gif




このエントリーのトラックバックURL:
      [ 参考になりましたか? ] [ blog ]
blank_space
投稿者 hi^-^ro : 2004年06月06日 19:07 | トラックバック | Edit | Clip!! | このエントリーを含むはてなブックマーク


コメント 

こんにちは〜
画像のテキスト回り込みは前から知ってたんですが、回り込みをやめる方法がわからなくて最近使ってないのでした・・・。

どうもありがとう(^o^) 参考にさせていただきます。そうそう、テキストの回り込みも上のボタンに割り当てることできないのかなぁ〜〜??

Posted by: Candy at 2004年06月07日 17:55 ___ψ(‥ ) カキカキ

こんにちは

ボタンによる指定での回り込みですか・・・
どうやればいいのだろう
簡単なのは上記で説明したのをやってしまって
回り込みさせたくない写真に対してだけ
「<br clear=all>」で逃げるのがいいかもですね。

Posted by: hi^-^ro at 2004年06月07日 19:11 ___ψ(‥ ) カキカキ

いつも「なんて打ち込んだらテキスト回り込みができるんだろう〜?」って迷ってしまうのです。だからボタンでポンってできたらべんりだろうなぁと思ったわけです。

    ulのボタンってあるでしょ?あれってアンダーラインじゃないんですよね?
Posted by: Candy at 2004年06月08日 21:17 ___ψ(‥ ) カキカキ

画像を表示させる時って、imgタグを使っているんですか?
それでしたらリンクを貼る時のようなボタン方法でも出来るかも?ですね。
普通にアップして使うのであればファイルを弄った方が早いです。

<ul>タグは

    タグ

↑こうなります。段落ですね。
アンダーラインは「<u>」です。

それと今後スパム対策を取り入れメアドも表示しないようにさせますが
“webmaster”のアドレスは他のサイトでは使用しないほうがいいかもですよ。
「管理人」という意味ですもんね。
老婆心ながらと思いましたが大きなお世話ですかな(笑)

Posted by: hi^-^ro at 2004年06月09日 08:07 ___ψ(‥ ) カキカキ
blank_space
コメントする




必須ですが表記はされません





たま〜にですが、「酢鶏」という人工無能によるコメント投稿があります。
可愛くも人工無能ですのでどんな投稿をするのかサッパリと分かりません。
ですのでコメント内容に関してはあまり気にしないでくださいね。
作者のLanタソさんに感謝! 





名前、アドレスを登録しますか?






blank_space
Trackback
blank_space

この記事に関する商品 by:amazon
blank_space

本日のリンク元
blank_space
519608756574091
カテゴリー
blank_space
Amagle PartnerNet
blank_space
お勧めAmazon
Amazon Web Services

Amazon Web Services

2017綛530 憜
  若悟 / 6087566若娯賢   罨<若
blank_space
リンク

クルマの部屋

本家のサイトだす(*゚д゚)
とほほのWWW入門
PHP マニュアル
レッツPHP!
できるCGI
TohrudcFamilyPage
コロボースキンDL
昨日 今日 明日
† Atelier Kanon †
Yahoo! JAPAN
Google ニュース 日本版

☆クルマ&ブログ仲間☆
GARAGE ODYSSEY
アエラスSとオレ物語
FULL-SCRATCH
ody industrial
サイコドライブblog
カービュー






track feed












Sony Style(ソニースタイル)

オートバックスドットコム

犬・猫の総合情報サイト『PEPPY(ペピイ)』

アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ

【車買取ガリバー】高価買取ならガリバー

価格.com 自動車保険 一括見積り





RSS feed meter for http://blog.vaioclub.com/

QLOOKアクセス解析
blank_space
Powered by
blank_space