今回は､POCHIKING* 様の方法を参考にさせていただきました。
ありがとうございます。
InternetExplorer のみ､右側の影が表示されません・・・。
他は完璧なのに。大変残念です・・・。
まず､影用の背景画像は前回の GIF file(shadow.gif)を流用しました。
次に､スタイルシートには下記のスタイルを追加しました。
.shadow {
background-image: url(/
パスを通す/shadow.gif);
background-repeat: no-repeat;
background-position: right bottom;
margin: 0px;
padding: 0px;
position: relative;
left:5px;/* オリジナルには無かったのですが､私の環境下(Opera と Firefoxでは)では
左側の枠が消えてしまい表示されなかったので､全体的に右側へ 5 px 移動させました。 */
}
.shadow img {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
margin: -5px 5px 5px -5px;
padding: 4px;
position: relative;
}
/* 画像左でテキスト右に回り込み */
.img_L {
float: left;
margin: 6px 10px 5px 0px;
border: none;
}
/* 画像右でテキスト左に回り込み */
.img_R {
float: right;
margin: 6px 0px 5px 10px;
border: none;
}
今回は､画像のアップロード時に default で、枠付画像に影を表示させ、
文章を右に回り込ませる設定もしておきます。
lib/MT/App/ 内の CMS.pm を書き換えます。
3597 行～の部分に、下記赤文字を書き足しました。
my $link = $thumb ? qq(
<div class="shadow img_L" style="width: $width+10 px;>
<img src="$thumb" width="$thumb_width" height="$thumb_height" alt="" />
</div>)
: q{<MT_TRANS phrase="View image">};
return $app->translate_templatized(<<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=0,top=0'); return false">$link</a>
HTML
} elsif ($q->param('include')) {
if ($thumb) {
return <<HTML;
<div class="shadow img_L" style="width: $width+10 px;"><a href="$url">
<img alt="$fname" src="$thumb" width="$thumb_width"
height="$thumb_height" /></a>
</div>
HTML
} else {
return <<HTML;
<div class="shadow img_L" style="width: $width+10 px;">
<img alt="$fname" src="$url" width="$width" height="$height" />
</div>
HTML
}
default の画像アップロード時に、
<div class="shadow img_L" style="width: ○○○+10 px;">
<img alt="画像ファイル名" src="画像ファイルの URL" width="○○○" height="○○" /></div>
という具合に表示されます。
画像右で､文章左回り込みにしたいときは､img_L を img_R に書き換えればよいです。
また、style="width: ○○○+10 px は､実際の計算値に書き直してください。
CMS.pm の書き換えで､最初から自動的に計算結果値が表示されるとよいのですが､
わたしにはやり方がわかりません。
≪ 続きを隠す
