CSSを使って写真に影を付けてみました（●＾o＾●）：追記2007/02/17

このブログの読者になる（チェック）

« 鹿児島県下一周駅伝 | 記事一覧 | Bookmark:･･･ »

February 17, 2009

CSSを使って写真に影を付けてみました（●＾o＾●）：追記2007/02/17

テーマ：blog and what not

以前、画像、写真に影を付けるアプリ、WEBサイトサービスをご紹介したのですが、これがなかなか面倒になってきて、付けたり、付けなかったりという状況でした。

それで、WEBサイト、ブログ界では、有名な、yujiroさんの「ブログ小粋空間」に掲載されている内容を参考にさせていただき、CSSを用いて画像、写真に影を付ける方法を試してみます。

参考にさせていただいた、ブログは、次のとおりです。

小粋空間: CSSで画像に影をつける（ドロップシャドウ)
→http://www.koikikukan.com/archives/2006/01/30-235209.php

POCHIKING*: 画像に自動的に影をつけてテキストを回り込ませる
→http://boo.chu.jp/pochiking/archives/000009.html

A List Apart: Articles: CSS Drop Shadows
→http://www.alistapart.com/articles/cssdropshadows/

ほとんどみなさんは、テキストを画像、写真に回り込みさせていましたが、わたしの場合、回り込みさせないので、少し修正を加えて次のようにしました。

.shadow {
margin: 10px 8px 0px 5px;
background: url(影画像URL) right bottom;
}

.shadow img {
position: relative;
left: -10px; /* 画像を左へ移動 */
top: -5px; /* 画像を上へ移動 */
padding: 5px; /* 画像枠 */
background: #ffffe0; /* paddingを設定した場合の背景色 */
border: 1px solid #999999; /* 画像の枠線 */
}

上記をCSSに追記します。

「margin: 10px 8px 0px 5px;」という微妙なマージン（margin）がポイントでした（これに時間をとられました。）。アメブロで、やってみたい方は、もしかしたら、この数値の微調整が必要かもしれません。

マージンとは、要素の外側の余白で、4つの数字が上右下左の順になっています。これに対して、パッディング（padding）とは、要素の内側の余白で、同じように上右下左を指定できます。

影画像は、こちら（GIF形式、PNG形式、いずれもMr. Sergio Villarrealの「A List Apart: Articles: CSS Drop Shadows」、URL：http://www.alistapart.com/articles/cssdropshadows/に掲載されているものです。）からダウンロードできます。

また、影画像URLには、画像フォルダにアップ後に右クリックでプロパティ表示で確認できる画像のURLを記入します。

で、画像、写真を貼り付けたあとにちょちょいとタグを追加します（赤文字のタグ）。

画像URLは、テスト画像で、幅を450px（width="450px"）にした例です。

＞上記の方法では、画像の幅が450pxの場合に有効でしたが、それ未満の場合、うまく表示できませんでした。対策として、<div>タグで幅を指定してあげるといいようです（微調整が必要で、半端な数値ですが…。）。

＞

＞画像幅+12pxでうまくいくと思います。

テスト画像が次のとおりです。

＞画像幅を220pxにした場合を追記しました（220pxというのは、アメブロで携帯からアップした場合や、サムネイルでアップした画像の標準サイズになります。）。

どうでしょう…。うまくいっていますでしょうか？

ただ、アップから1日間は、新しいエントリーに付けている背景と同化してしまっているので、明日か、明後日にでも見に来ていただけると嬉です。

もし、影が画像の右と下に見えない場合は、コメントくださいm（_ _ ）m

＞こちらは、<div>タグで幅を指定しなかった場合（こんな感じになってしまいます。）。

＞こちらが、<div>タグで幅を指定（画像幅+12px）した場合。

（LittleFlair on deviantART、URL：http://littleflair.deviantart.com/art/in-the-end-109999840より引用）

これまでは、影をアプリかWEBサービスで付けたり、枠をPhoto Shopで付けたりしていたのですが、これで、大幅に手間が省けます。

予想以上に時間がかかったので、こんな時間になりました((+_+))

寝ます。おやすみなさい(-_-)zzz

PS．
<img>タグをはさむ、<div class="shadow">タグを挿入するのも、手間は手間ですね。
フリーソフトウェアで、定型文を挿入できるものもありますが、わたしの場合、Firefoxのアドオン「Clippigns 」を使います。「ctrl」+「alt」+「V」→ショートカットキー、または、右クリックメニューに「Clippings」がありますので、便利です。お勧めです。

追記：2009/02/17
CSSで画像に影を付ける方法ですが、この方法だと、幅450px（width="450px"）未満の画像だとうまく表示できないことがわかりました。ちょっと改良が必要なので、試みてみます。

追記2：2007/02/17
画像幅450px（width="450px"）未満の場合<div>タグで幅を指定すればいいようです。具体的には、「画像幅+12px」でうまくいくと思います。場合により、調整が必要な可能性がありますが、画像幅220px（width="220px"）の場合は、うまくいきました。