背景と同色の画像は境界線が曖昧になりがちだが、そんな時は画像に影を付けると見やすくなる。影を付けるにはプラグイン等使わなくてもCSSだけで簡単に実現できる。
はじめに
CSSで影を作るにはbox-shadowプロパティを使用する、指定可能な値は下記になる。
- inset
- 影をボックスの内側に表示（画像なのでここでは使用しない）
- none
- 影を表示しない
- 単位付き実数
- 右方向への距離
- 下方向への距離
- ぼかす範囲
- 上下左右に拡張する距離
- 色
box-shadowの使い方
下記画像にbox-shadowを指定して、どのように変化するか試してみる。デフォルトの状態では記事の背景色と画像の背景色が同じのため、どこまでが画像かはっきりしない。
まず右側に2pxの影を#dddの色で付ける。
box-shadow: 2px 0px #ddd;
下側にも2pxの影を付ける。
box-shadow: 2px 2px #ddd;
ぼかしを付けないと単なる縁になって影には見えないので、5pxのぼかしを付ける。
box-shadow: 2px 2px 5px #ddd;
全体に影を付けるため、上下左右に2px拡張する。
box-shadow: 2px 2px 5px 2px #ddd;
後は好みの影になるように、線の太さやぼかし量を調整するだけだ。
box-shadow: 3px 5px 5px 5px #aaa;
特定の画像に影を付ける
box-shadowプロパティの使い方がわかったら、次は実際に記事の画像に影を付けてみる。
特定の画像にだけ影を付ける場合は、テキストモードにして画像のimgタグにbox-shadowを指定してやれば良い。影を付けたい画像のimgタグのstyle属性値としてbox-shadowを設定するだけだ。
<img style="box-shadow: 2px 2px 2px #999">...</img>
全ての画像に影を付ける
上記のやり方では全ての画像に影を付けるのに大変な手間がかかる、そこで全ての画像に一括して影を付けるには、テーマの編集からスタイルシートを編集して、記事中のimgにbox-shadowを指定する事になる。
style.cssの.entry-content img要素にbox-shadowプロパティを設定する。
.entry-content img {
box-shadow: 2px 2px 5px 2px #ddd;
}
上のやり方で全ての画像に影を付けた時に、特定の画像にだけ影を付けたくないという時には、影を付けたくない画像のimgタグにnoneを指定すれば良い。
<img style="box-shadow: none">...</img>
コメント