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

2008年1月23日 | MovableType | コメント (0)

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

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

(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

[253 Viewd (RSS: 0)] [Edit]
記事情報
  • 投稿日:
  • 更新日:
リンクソース
■記事用リンクソース:

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

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

■短縮URL:
コメントの追加









名前、アドレスをブラウザに記憶させますか?


※投稿には、名前とメールアドレスが必要です。
※メールアドレスは、表示されません。
※コメントにはタグは使えません。
※コメント中のURLは自動的にクリッカブルに変換します。





画像の中に見える文字を入力してください。



同カテゴリの人気記事
マイブログアンテナ
Feeds
EarlGrey Tearoom
メアド
counter
Powered by Movable Type