画像には輪郭をつけろ！コピペできるCSSも紹介します

執筆者

2013年にブロガーとして独立。運営ブログは月間125万PVを達成。「伝える力」を向上させるためのオンラインサロンを運営し、700名以上にブログの書き方を指導する。著書は『効率化オタクが実践する光速パソコン仕事術』（KADOKAWA）、『読まれる・稼げるブログ術大全』（日本実業出版社）。

サイトやブログで使う画像に輪郭を付けていますか？

え?!　どういう意味っスか？

次の画像の周りには「輪郭」が入っていますよね？

これ、あたりまえのように見えますがすごく大切だよというお話をします。

画像に輪郭がないと境目がわからない

では、悪い例として「画像に輪郭がない例」を紹介しましょう。

画像とそうじゃない部分の境目がわからないっス！

そうなのです。サイトの背景が真っ白で画像の端っこも真っ白だと、境目がわからなくなりモヤッとします。

背景に色があるなら問題ないんですが、問題なのはこの例のように背景が白抜きであるときです。

では輪郭をつけてみましょう。

境目が明確になりましたね！

この輪郭がないだけで、読み手にとってちょっとしたイライラになります。

CSSで画像の周りに輪郭を入れるだけで解決

とはいえ、画像に毎回「枠線」を入れるのは面倒ですよね。

画像を加工して輪郭を入れるとか、やり方もわからないっス！

でも大丈夫です。次のCSSを追記すれば全画像を一発で指定できます（CSSを追記するやり方はこちら）。

.entry-content figure img { border : solid gray 1px; }

これを追記するだけで、記事領域にある「すべての画像」にグレーの枠線ができますよ。

ただし、使っているWordPressテーマによってはこれだけでは輪郭が入りません。

CSSをアレンジすれば陰影もつけられる

わたしの場合は上部から光が当たって立体的に見えるように色を調整し、影をつけています。

こんな感じで。

同じデザインにしたい場合は、下記のCSSをどうぞ！

.entry-content figure {
    padding: .5em;
    margin-bottom: 4em;
    background: #f7f7f7;
    border: 1px solid #DADADA;
    border-top: 1px solid #757575;
    box-shadow: 0 1px 2px rgba(100, 100, 100, 0.3) inset;
    text-align: center;
}
.entry-content img {
    border: 1px solid #DADADA;
    border-bottom: 1px solid #757575;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}