Home > べたろぐ。 > Web > Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ)

Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ)

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;
    }
表示例
kukky さんちのキムチ

ここで使った猫の写真は、So-net blog:HDV/ハイビジョン/ネコ年は来ないの Studio Kukky さんちの猫、キムチです。 勝手に出演させちゃいました。

以下、追記。

スタイルシートをやや修正。

  • 記事本文中のみに影響範囲を限定するため、各セレクタの親に .text を追加
  • 流し込み解除するセレクタを変更
  • 画像がアンカーではない場合も想定し、.image a としていたセレクタを .image に変更
  • 画像がアンカーの場合は、マウスオーバーでアンカーであることがわかるように装飾を変更

さらに追記。

  • 流し込み解除のセレクタとして .text > a.posted を追加(けっこう重要)

さらに追記。

  • 流し込み解除のセレクタを .posted のみに絞りました。これがあることで最低限のレイアウト崩壊を防げると思います

関連するかもしれない記事

Comments:0

Comment Form
Remember personal info

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 で画像にドロップシャドウ) – べたろぐ。

Home > べたろぐ。 > Web > Seesaa BLOG で CSS Drop Shadows (CSS で画像にドロップシャドウ)

最近のコメント
Search
Feeds
Meta

Return to page top