指定した画像に陰をつける(MovableType)

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

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

(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>

陰をつけない通常の状態
mt-edit-screen.jpg

陰をつけた場合

mt-edit-screen.jpg

« フォーマット後のデータ復活 | PDFを一太郎やWord文書へ変換 »
リンクソース
■記事用リンクソース:

■Wiki用リンクソース(PukiWiki):

■Wiki用リンクソース(MediaWiki):

■短縮URL: