ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > 使える?小技 > title - 画像にぼんやりした影をつけるには?

画像にぼんやりした影をつけるには?

たまに画像にぼんやりとした影がついている物を見たことはいですか?立体的でぼんやりした影だから優しい感じがしますよね。

ぼんやりした影の見本

一体どんな画像なの?という方の為に見本を作ってみました

image291.jpg
これが元の画像です。

image291.jpg

右下にぼんやりした影が付いて立体的になりました。影は他にも上下左右などにつけれて、影の色も好きな色をつけれます。

image291.jpg

左上にぼんやりした影が付いて立体的になりました。影は他にも上下左右などにつけれて、影の色も好きな色をつけれます。

(環境によっては影がついて見えない方もいます)

大きな影をつけるとすごく立体的になるし、小さな影は絵画の様な雰囲気が出る気がします。スタイルシートを編集すれば、一括ですべての画像を同じような影をつけることもできるし、記事を作る時に画像のタグに手を加えれば、上記の様に個々の画像に影をつける事もできます。

タグの紹介

まず一番最初に見て欲しいのが影をつけるタグです。基本のタグはfilter: shadowです。filterは画像を加工するタグで、shadowはぼんやりした影をつけるタグです。この基本のタグに下の表のタグを組み合わせて、自由に自分の好きな色の影や影の方向を決められます。

タグの名前 タグの説明 効果を決める数値
width: 画像の大きさ 数値
padding- 余白の指定 top:数値px(上)・bottom:数値px(下)
right:数値px(右)・left:数値px(左)
float: 文字の回りこみ left(左に画像)・right(右に画像)
color= 影の色を決める 色の名前・#色の値
direction= 影の方向 0=上・45=右上・90=右・135=右下
180=下・225=左下・270=左・315=左上
strength= 影の長さ 数値

個別にぼんやりした影をつける方法

新しい記事を書く画面で画像をアップロードしてサムネイルか元画像を選ぶと、
<a href="http://blog~~~.jpg" target="_blank">
<img src="http://~~~.jpg" alt="画像の名前.jpg" border="0">
</a><br clear="all">
この様に記入されますよね。この前後にタグを付け加えると画像に影をつけれます。

実際に何をどこに記入するのかというと、<a href="http://の前に<div STYLE="width: 数値px; padding-:数値px;filter: shadow(color=#色の値, direction=影の方向, strength=数値);">を記入して、</a>の後に</div>を記入します。

これだけではわかりにくいと思うので、数値も設定してすごく具体的な例を作って説明したいと思います。例-画像の大きさは横が250pxで縦が150px、影の長さが15・方向は右下・色は灰色の影をつけ、画像の右側に文字の回りこみを指定する(上の画像の2番目の例)

<div STYLE="width: 250px; padding-right: 15px; padding-bottom: 15px;float: left;filter: shadow(color=#aaaaaa, direction=135, strength=15);"> <a href="http://blog~~~.jpg" target="_blank"><img src="http://~~~.jpg" alt="画像の名前.jpg"border="0"> </a></div>

という様に記入します。

何でこの数値を当てはめるのかを説明したいと思います。
・width:250px;は画像の横の長さと同じ長さにします。
・padding-right:15px; padding-bottom:15px;は長さが15pxの影を右下に指定するつもりなので、画像から右(padding-right)と下(padding-bottom)に余白を作っておかないと、影が入り込む隙間がないので全く表示されなくなります。なので影の長さもstrength=15と指定したのでそれよりも短い余白だと影が途中で切れてしまうから-right:15px・-bottom:15pxと影と同じ長さにします。
20060508041507.gif

もし影を左下に作りたいなら、padding-bottomとpadding-leftを使って画像の左と下に余白を作ります。影を作りたい方向に必ず余白を空けて下さい。
・float:left;は画像を左において、その右側に文字を記入したい時はこれを指定しないと文字が右に書けません。また文字を記入する時は</div>の後ろに書いて下さい。<br clear="all">をそのまま使えば、回り込みを解除してくれます。
・color=#aaaaaa,は灰色の影を作ります。
・direction=135, は右下に影を作ります。
・strength=15は15pxの長さの影を作ります。

ちなみに3番目の画像(左上に緑色の影を25pxの長さでつける)は・・・
<div STYLE="width: 250px; padding-left: 25px; padding-top: 25px;float: left;filter: shadow(color=#999900, direction=315, strength=25);">
と指定しています。

この画像の様にクリックすると元の普通の画像が現れてしまうのが嫌で悩んでいる人は、普通に画像を使う時に記入される下の青字の部分を削除してください。
<a href="http://blog~~~.jpg" target="_blank">
<img src="http://~~~.jpg" alt="画像の名前.jpg" border="0">
</a><br clear="all">

長くなってしまうので続きでスタイルシートを編集して一括で全ての画像の影をつける方法を紹介します。
<つづき>


関連ページ)
画像にくっきりした影をつけるには?
画像にくっきりした影をつけるには?一括編
文字にくっきりした影をつけるには?
・画像にぼんやりした影をつけるには?
画像にぼんやりした影をつけるには?一括編
文字にぼんやりした影をつけるには?


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/108-c26e2c55   

Template Designed by DW99