画面をキャプチャーした画像をブログで使うとき、画像と本文の境目がわかりづらいときがあります。陰をつけたりすればわかりやすいのですが、画像加工をするのも面倒です。

そこで、スタイルシートで陰をつけたいと思います。ただし、貼り付けてある画像すべてではなく、指定したときに有効になるようにします。

(1) まず、スタイルシート(styles-site.css)に陰をつける設定をします。

.add-border img{

border-top: 3px solid #CCC;

border-left: 3px solid #CCC;

border-bottom: 3px solid #666;

border-right: 3px solid #666;

}

(2) そして、陰をつけたい画像にクラスを設定します。

<div class="add-border">

<img ……>

</div>

陰をつけない通常の状態

陰をつけた場合