Not quick a Nine

納得いかない!!

11  05 2006

自動で影付きサムネイルを表示する

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

とりあえずテスト

s-yun_947.jpg

と、こんな感じで表示されます。写真がページに乗っかってるみたいでしょ? さてやり方は、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を指定します。

Popularity: 6% [?]


One Response to “自動で影付きサムネイルを表示する”

  1. I was curious if you ever thought of changing the layout of your blog?

    Its very well written; I love what youve got to
    say. But maybe you could a little more in the way of content
    so people could connect with it better. Youve got an awful lot of text for only
    having one or two pictures. Maybe you could space it out better?

Leave a Reply

70