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

TOP > 使える?小技 > title - 画像にくっきりした影をつけるには?

画像にくっきりした影をつけるには?

たまに画像にくっきりとした影がついている物を見たことはいですか?画像がすごく立体的に見えてブログは平面だから余計に映えますよね。

画像にくっきりした影の見本

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

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

image292.jpg

右下にくっきりした影が付いて立体的になりました。影は他にも近づけたり離したり、影の色も好きな色をつけれます。

image292.jpg

右下にくっきりした大きな影が付いて画像が浮いているみたいになりました。

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

大きな影で薄い色を影にすると本当に浮いているみたいで面白いですよね。スタイルシートを編集すれば、一括ですべての画像を同じような影をつけることもできるし、記事を作る時に画像のタグに手を加えれば、上記の様に個々の画像に影をつける事もできます。

タグの紹介

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

タグの名前 タグの説明 効果を決める数値
width: 画像の大きさ 数値
padding- 余白の指定 top:数値px(上)・bottom:数値px(下)
right:数値px(右)・left:数値px(左)
float: 文字の回りこみ left(左に画像)・right(右に画像)
color= 影の色を決める 色の名前・#色の値
offx=
offy=
影の長さと方向 offx=右方向と影の長さ(マイナスで左方向)
offy=下方向と影の長さ(マイナスで上方向)
positive= 影を反転させる 0(false)反転・1(true)通常

個別にくっきりした影をつける方法

新しい記事を書く画面で画像をアップロードしてサムネイルか元画像を選ぶと、
<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: dropshadow(color=#色の値, offx=数値, offy=数値);">を記入して、</a>の後に</div>を記入します。

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

<div STYLE="width: 250px; padding-right: 25px; padding-bottom: 30px;float: left;filter: dropshadow(color=#D0D0D0, offx=25, offy=30);"> <a href="http://
blog~~~.jpg" target="_blank"><img src="http://~~~.jpg" alt="画像の名前.jpg"border="0"> </a></div>

という様に記入します。

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

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

ちなみにこのすぐ下の画像の様に左と上に影をつけるには・・・
<div STYLE="width: 150px; padding-left: 7px; padding-top: 7px;float: left;filter: dropshadow(color=#BF873F, offx=-7, offy=-7);">
と指定しています。

この画像の様にクリックすると元の普通の画像が現れてしまうのが嫌で悩んでいる人は、普通に画像を使う時に記入される下の青字の部分を削除してください。
<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/111-1b8324f6   

Template Designed by DW99