CSSで画像に枠線を付けて目立たせる方法

ども！パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。

ブログに画像を投稿すると背景色と同化して見えにくくなることってありませんか？

例えばこんな感じ。

このブログの編集画面を切り取ったスクショなんですけど、背景の白と同化して画像だということがわかりづらいです。

これを解決するため、そしてちょっとカッコよく画像を表示するためのテクニックをご紹介します。

画像に枠線を追加する方法

投稿する画像に枠線をつけるための方法は2つあります。

1. 画像自体を加工する
2. CSSで調整する

1. 画像自体を加工する

もっともオーソドックスな方法です。

画像そのものに編集ソフトで枠を追加します。

たとえば僕も使ってる “Monosnap” というフリーアプリを使うと超かんたんに枠線やメッセージ、矢印なんかを追加できます。

↑ Monosnap で枠線を追加しました。

でもいちいち編集するのはかなり手間だし、見た目も普通です。

2. CSSで調整する

次はCSSで調整する方法。

CSSを使い画像（img）に枠をつけるようにしてやれば簡単です。

こんな風に見えます。

どうでしょ？画像の周りに立体的な線があって背景とも区別がつくし、ちょっと浮かび上がってるようにも見えてかっこいいですよね！

Monosnap で編集したのと比べてみてもスタイリッシュに仕上がってます。

枠線を追加する具体的な設定

それではまずCSSの紹介です。

CSSをイジるその前に
これ以降はCSSに変更を加えます。下記を参考にして子テーマの導入とCSSを確実に反映させる方法を確認しておくことをおすすめします。

mukutto.com

子テーマを使おう！STORK（ストーク）に子テーマをインストールする方法

続きを読む>>

mukutto.com

CSSの変更が反映されない時の6つの対処法、教えます！

続きを読む>>

CSS

次のCSSをスタイルシートにコピペして保存してください。

/* 画像に枠線を付ける*/
img.aaa {    border: solid 1px #808080; /* 枠線のスタイル 太さ 色*/
box-shadow: 0px 0px 5px #808080; /* 影の水平方向の距離 垂直方向の距離 ぼかしの距離 色 */
}

画像で確認するとこんな感じです。

ワードプレスエディタ

次にワードプレスのエディタを開き、記事編集画面で画像を選択してオプションを開きます（鉛筆マーク）。

表示された画像詳細の項目の一番下、「上級者向け設定」の▼マークをクリックします。

その中に「画像CSSクラス」という項目があるのでそこに aaa と入力して更新ボタンをクリックします。これでお終い。

これでこの画像に対して枠線が追加されました。

プレビューなどで確認してみましょう。

いちいち手動で設定するのが面倒

今回紹介した方法って画像1つ1つにわざわざ手動で aaa を入力する必要があります。

たしかにCSSを使えば投稿した画像すべてに自動的に枠線を追加することも可能なんです。

でもそれをやっちゃうとpng（透過ファイル）を投稿した時にちょっと不便なんですよね。

たとえばこのブログのロゴマークがこれに決まりました！といって画像を紹介するとします。

これはpng（透過ファイル）を使ってるので背景は透明になりキレイに表示されてます。枠線が無いほうが見た目がいいんですね。

もしCSSで全ての画像に自動的に枠線が追加されるようにしているとこんな風になってしまいます。

まぁこれでも悪くはないかもしれませんが、自分が意図しないところで枠線が追加されてしまうのを防ぐために敢えて aaa を手動で入れるようにしました。

ワンポイントアドバイス

ちなみにCSSのこの部分を自分の好きな言葉に変更することができます。

僕は入力の手間をできるだけ省くように aaa で設定してますけど、わかりやすいように gazou とか image とか自分のわかりやすい言葉に変更しても大丈夫です。

あとは画像CSSクラスを設定する時にその言葉を入力すればちゃんと反映されます。

CSSは消さずに追加しよう！
CSSを変更すると以前のクラスで枠線を設定していたものが解除されます。

クラスを変更するのであればCSSの変更ではなく追加にしましょう。

まとめ

画像に枠線が追加されるだけでずいぶんと見た目が変わります。

読みやすいブログを目指すためにもこういう細かいところの設定はおろそかにできませんね。