花見酒先日のエントリー、写真のポップアップ表示に味をしめてこんなことしてみました。
より写真を際だたせるために元画像に縁と影を付けてみます。
MTのスタイルシートやライブラリにあるソースを改変することにより、全ての画像にこの表示を与えることは可能ですが、今回は任意の画像のみ実現したかったのでスタイルシートの追加のみでやってみました。


◇前提条件
 元画像の大きさは横150px、縦100px固定です。

◇スタイルシートへの追加

.shadow150 {
background-repeat: no-repeat;
background-image:url(img/shadow150.gif);
padding-left: 1px;
padding-top: 1px;
width: 160px;
height: 110px;
float: left;
}

上記の「shadow150.gif」は元画像の背景になる縁付き影付きの画像になります。
つまりこの空背景画像の上に元画像を置くので元画像に縁と影が付いて見えると言うことです。
もっと方法はありますがかなりシンプルになっています。
元画像の大きさ固定なので背景画像も合わせて作っておく必要があります。
今回はこの背景画像になります。

padding-left、padding-topは背景画像の左と上部から1ピクセル内側に元画像を置くための設定です。
float: leftは元画像の左側にテキストを回り込ませるための設定です。

◇表示させるためのエントリ時の書き方

この方法で見せたい時は常にこの書き方をしなくてはいけないので面倒ですね。
でも固定されるタグ部分を単語登録しておけばかなり軽減されると思います。
また元画像の大きさ別にスタイルシートを複数作っておくのも良いかも。
まあ、超手抜きの方法です(笑)

3件のコメント

  1. 写真に影を付ける方法使わせて戴いております。
    FC2でもMTのlightbox風にしたかったので外部スクリプトのpopup.jsをお借りしていましたが、何とかpopup出来るようになりました。ありがとうございました。

  2. 写真に影を付ける

    写真に影を付けてブログに貼り付けるとなんとなく見栄えしますよね。影を付けるのにはいろいろ方法があるみたいですが、このブログでは写真にpopup.jsという…

  3. はじめまして。
    お役に立てたようでうれしいです^^

でっぱ へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。