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

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

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

例えばこんな感じ。

Ex

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

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

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

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

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

1. 画像自体を加工する

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

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

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

Ex 2

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

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

2. CSSで調整する

次はCSSで調整する方法。

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

こんな風に見えます。

Ex

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

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

 

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

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

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

CSS

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

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

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

Css

ワードプレスエディタ

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

Edit

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

Details

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

Details2

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

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

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

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

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

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

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

Logo

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

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

Logo

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

ワンポイントアドバイス

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

Css2

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

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

Details3

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

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

Warning

まとめ

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

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

ゆーすけ(守屋祐輔)

ゆーすけ(守屋祐輔)

複業サラリーマン

会社員×ブログ×デザイン×講師×投資の5つの働き方・稼ぎ方を実践する複業サラリーマンブロガー ▼経験から学んだノウハウや考え方、自分の人となりがわかる記事をお届けします ▼主力複業のサイン作成では800人以上、5,500点以上の作成実績あり。

FOLLOW

カテゴリー:

\実体験に基づく情報/

ストレス・重圧から開放され、毎月がボーナス月で、強いやりがいを感じる私なりの複業に関する戦略・戦術を不定期でお届けします。普通の会社員が努力と継続で登ってきた階段です。あなたにもきっとできます。動く時は今しかありません。



複業しながらでも1日1冊の読書はできます。その読書術や私が読んで良かった本・学んだこと・活かしたことなど不定期でお届けします。読書は人生を豊かにします。本を読んで1つでも学びがあればいいのです。



関連記事