自動で影付きサムネイルを表示することに挑戦してみた。

とりあえずテスト

と、こんな感じで表示されます。写真がページに乗っかってるみたいでしょ？ さてやり方は、POCHIKING*: 画像に自動的に影をつけてテキストを回り込ませる
と
[銀] ginzi.com/blog: MovableTypeの画像にフチ(枠)･モブログ画像のサムネイルを参考にさせていただきました。



方法は、ちょっとした画像とCSSによって実現されています。POCHIKING*のままだとIEとFirefoxで表示がずれてしまったので、次のようにCSSを変更しました。

    .img-bg2 img {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    margin: -5px 5px 5px -5px;
    _margin: -5px 5px 5px 0px;
    padding: 4px;
    position: relative;
    }

この辺は周辺のCSSやレイアウトによって変わってくるのかもしれませんね。

そして、MTのアップロード機能でサムネイルと共に作成されるコードも改造しています。 lib/MT/app/の中にある　CMS.pm　の1414行目辺りとありましたが、私のバージョンでは3602行でした。

変更は必ずバックアップを取ってからやりましょうね。
ちなみに自己責任でお願いしますね。

    } elsif ($q->param('include')) {
        if ($thumb) {
            return <<HTML;
<a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
HTML
        } else {
            return <<HTML;
<img alt="$fname" src="$url" width="$width" height="$height" />
HTML
        }

この記述を探し出し、以下のようにします。 
縁取りなしの場合 

    } elsif ($q->param('include')) {
        if ($thumb) {
            return <<HTML;
<div class="img-bg img_R" style="width: $width px;"><a href="$url" rel="lightbox"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a></div>
HTML
        } else {
            return <<HTML;
<div class="img-bg img_R" style="width: $width px;"><img alt="$fname" src="$url" width="$widthplus" height="$height" /></div>
HTML
        }

縁取りありの場合はwidthを+10するので

    } elsif ($q->param('include')) {
       my $widthplus = $width+10;
        if ($thumb) {
            return <<HTML;
<div class="img-bg2 img_R" style="width: $widthplus px;"><a href="$url" rel="lightbox"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a></div>
HTML
        } else {
           return <<HTML;
<div class="img-bg2 img_R" style="width: $widthplus px;"><img alt="$fname" src="$url" width="$widthplus" height="$height" /></div>
HTML
        }

これで自動的に+10された数値が表示されるようになります。
上の例は画像を右寄せにしたばあいです。左寄せにするときにはimg_Lを指定します。

人気度：

7%

Computer, MovableType