- 2006-03-10 (金) 20:41
- Web
CSS によって画像にドロップシャドウを付ける Tips。
ほとんどそのままソースを使わせてもらいました。仕組みについては A List Apart: Articles: CSS Drop Shadows を見れば、図解されているので非常にわかりやすい。
Seesaa BLOG サービスでは、アップロードした画像を記事に貼付ける時は自動でソースを埋め込んでくれる。
- Seesaa BLOG が書き出すソース
-
<a href="http://seize-a-day.up.seesaa.net/image/20060310_kimuchi.jpg" target="_blank"> <img src="http://seize-a-day.up.seesaa.net/image/20060310_kimuchi-thumbnail2.jpg" width="150" height="112" border="0" align="left" alt="kukkyさんちのキムチ" /> </a>
見やすいように空白類文字を加えました。
あたしの場合、この生成されたソースを実際に使う時は <div class="image">
で囲んでいるので、こいつを CSS のクラスセレクタとして利用することにします。
まずは Easy CSS drop shadows | Blog | 1976design.com からドロップシャドウの画像素材をダウンロードして Seesaa BLOG にアップロードしておく。そして CSS のソースも参考にしながら、margin
の微調整と画像が連続する場合のみ float
で流し込むように書き換える。
- 実際に使う HTML ソース
-
<div class="image"> <a href="http://seize-a-day.up.seesaa.net/image/20060310_kimuchi.jpg" target="_blank"> <img src="http://seize-a-day.up.seesaa.net/image/20060310_kimuchi-thumbnail2.jpg" width="150" height="112" border="0" align="left" alt="kukkyさんちのキムチ" /> </a> </div>
見やすいように空白類文字を加えています。
- CSS のソース
-
/**************************************************** * Easy CSS drop shadows * http://www.1976design.com/blog/archive/2003/11/14/shadows/ ***************************************************/ /* 画像が連続する場合のみ流し込みするため、他のは流し込み解除 */ .posted { clear: both; } /* .image の場合 */ .text .image { text-indent: 0; background: url('http://hoge(環境に合わせて書き換え)/shadow.gif') no-repeat bottom right; clear: none; float: left; width: auto; margin: 0 1em 1em 5px; padding: 0; position: relative; } .text .image img { color: inherit; background-color: #fff; border: 1px solid #a9a9a9; display: block; margin: -5px 5px 5px -5px; padding: 4px; position: relative; } /* もしもアンカーだった場合のために :hover 時の装飾 */ .text .image a img:hover { color: inherit; background-color: #fff0f0; border: 1px solid red; }
- 表示例
-
ここで使った猫の写真は、So-net blog:HDV/ハイビジョン/ネコ年は来ないの Studio Kukky さんちの猫、キムチです。 勝手に出演させちゃいました。
以下、追記。
スタイルシートをやや修正。
- 記事本文中のみに影響範囲を限定するため、各セレクタの親に
.text
を追加 - 流し込み解除するセレクタを変更
- 画像がアンカーではない場合も想定し、
.image a
としていたセレクタを.image
に変更 - 画像がアンカーの場合は、マウスオーバーでアンカーであることがわかるように装飾を変更
さらに追記。
- 流し込み解除のセレクタとして
.text > a
と.posted
を追加(けっこう重要)
さらに追記。
- 流し込み解除のセレクタを
.posted
のみに絞りました。これがあることで最低限のレイアウト崩壊を防げると思います
関連するかもしれない記事
- Newer: ソースコードのマークアップ
- Older: 車載 iPod
Comments:1
- Bandar Judi Casino 25rb 18-09-26 (水) 5:01
-
Simply wish to say your article is as amazing. The clearness to your put up is simply spectacular and
that i could suppose you are an expert on this subject.
Well together with your permission allow me to snatch your feed to keep updated with imminent post.
Thanks a million and please continue the rewarding work.
Trackbacks:26
- Trackback URL for this entry
- http://szdy.info/wp/2006/03/10/11/trackback/
- Listed below are links to weblogs that reference
- Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) from べたろぐ。
- trackback from NaturaCel 14-10-09 (木) 17:23
-
NaturaCel
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from Cellan Reviews 14-10-09 (木) 22:33
-
Cellan Reviews
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from affiliation 14-10-10 (金) 9:05
-
affiliation
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from please click personaltrainerscertification.com 14-10-10 (金) 14:15
-
please click personaltrainerscertification.com
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from free coupons 14-10-10 (金) 20:27
-
free coupons
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from personal brand 14-10-11 (土) 2:43
-
brand building strategy
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from visit the next internet site 14-10-11 (土) 11:39
-
visit the next internet site
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from plastic surgery disasters korean model 14-10-11 (土) 13:52
-
plastic surgery disasters korean model
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from 匿名 14-10-11 (土) 16:40
- trackback from binary options 14-10-11 (土) 22:27
-
binary options
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from planttheory043.newsvine.com 14-10-13 (月) 9:07
-
planttheory043.newsvine.com
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from social media marketing higher education 14-10-14 (火) 5:29
-
social media marketing higher education
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from Mannheim Kindergeburtstag 14-10-14 (火) 10:37
-
Mannheim Kindergeburtstag
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from signs of lie 14-10-15 (水) 19:14
-
signs of lie
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from idea magna cover and cases 14-10-15 (水) 20:07
-
idea magna cover and cases
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from videos pornografico con animales 14-10-15 (水) 21:05
-
videos pornografico con animales
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from spice sex 14-10-16 (木) 14:18
-
spice sex
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from idea magna back cases 14-10-18 (土) 21:04
-
idea magna back cases
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from hermes replica handbags sale for women 14-10-19 (日) 5:20
-
hermes replica handbags sale for women
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from aboutme 14-10-19 (日) 8:28
-
aboutme
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from Free Credit Fast 14-10-24 (金) 0:32
-
Free Credit Fast
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from click the up coming webpage 14-10-24 (金) 0:34
-
click the up coming webpage
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from DejaVu Serum Review 14-10-31 (金) 3:39
-
DejaVu Serum Review
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from pure cambogia ultra Reviews 14-11-15 (土) 19:11
-
pure cambogia ultra Reviews
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from Nitroxin 14-11-18 (火) 0:13
-
Nitroxin
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。
- trackback from Natural Garcinia Trim Plus Review 14-11-21 (金) 16:20
-
Natural Garcinia Trim Plus Review
Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ) – べたろぐ。