記事中の画像に縁や枠をつけるCSS設定

記事に画像を貼る場合、見栄えに気を配って画像を加工する方も多いと思いますが、画像を一枚一枚加工する作業は数が多くなると意外と面倒なものですよね。

私は、以前までコンテンツ部分の背景と同化しないようにする事と、画像の文字を読みやすくするために、コントラストで少し暗く調整していたのですが、それすらも面倒になってきたので、最近はCSSで画像に枠をつける設定に変更しました。

CSSで設定しておけば、画像をそのまま貼るだけでそれなりの見栄えになります。以前、「マウスオーバーしたときにリンクを1px右下にずらす」という記事を書きましたが、それと併用しても良いと思います。

画像に枠をつけるCSS設定例

img {
border: 4px solid #DFDFDF;
padding: 3px;
background-color: #FFF;
}

画像の外側にpaddingで余白を取って、そこに背景色を指定して、さらにその外側にborderで色をつけています。当サイトの画像が今この状態になっています。白背景の画像の場合、白い枠が見えなくなりますので、background-colorを#F3F3F3などの薄いグレーにしても良いでしょう。

paddingとborderの幅についてはお好みに合わせて調整してください。また、imgで指定してしまうと、全ての画像に対して枠が付いてしまいますので、それが嫌な場合には、コンテンツ部分の画像に対してのみ指定したり、ブラウザから挿入した画像にのみ指定してもOKです。

ちなみに当サイトでは以下のように指定しています。

img.size-full ,img.size-medium ,img.size-large ,a img.size-medium ,a img.size-large {
border: 4px solid #DFDFDF;
padding: 4px;
background-color: #F3F3F3;
}

これで、WordPressの管理画面からアップロードした画像のみに対して、枠が付くようになります。

同じような形で、paddingとborderの値や色を変えると異なる感じの枠ができます。

img {
border: 4px solid #DFDFDF;
padding: 1px;
background-color: #B6B6B6;
}

画像に1pxのフチを付けてその外側に4pxのグレーの枠をつけています。これでさらに外側に1pxのフチをつけたかったのですが、CSSだけでは実現する事ができないようです。画像をDIVで囲ったりしないでCSSのみで、フチ ⇒ 枠 ⇒ フチを実現できる設定があったら教えて頂けると幸いです。

ブログは一手間を施すだけで、だいぶ印象が変わってきますので、今まで画像をべたっと張っていたという場合には、枠を付けて格好良くしてみましょう。枠ではなく影をつけたいと言う場合には、色々な方法がありますので、「画像 CSS 影」などのキーワードで検索してみましょう。