画面をキャプチャーした画像をブログで使うとき、画像と本文の境目がわかりづらいときがあります。陰をつけたりすればわかりやすいのですが、画像加工をするのも面倒です。
そこで、スタイルシートで陰をつけたいと思います。ただし、貼り付けてある画像すべてではなく、指定したときに有効になるようにします。
(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>
陰をつけない通常の状態
