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

スポンサーリンク

The following two tabs change content below.

ゆーすけ(守屋祐輔)

ブログに加え、デザイン、カメラマン、執筆をこなすサラリーマン。通称パラレルブロガー。のんびりしてそうでホントにのんびり屋。プロフィールはこちら。運営サイト:サインを作るならご署名ネット。早起き・朝活情報の早起きのプロ。クラシックミニ専門サイトの32miniドットコム

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

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

例えばこんな感じ。

Ex

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

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

スポンサーリンク

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

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

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

1. 画像自体を加工する

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

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

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

Ex 2

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

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

2. CSSで調整する

次はCSSで調整する方法。

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

こんな風に見えます。

Ex

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

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

 

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

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

CSSをイジるその前に

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

子テーマを使おう!STORK(ストーク)に子テーマをインストールする方法

2017.03.07

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

2017.03.02

CSS

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

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

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

Css

ワードプレスエディタ

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

Edit

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

Details

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

Details2

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

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

反映されてないという人は古いキャッシュが残っている可能性があるため、こちらの記事を参考にして対策してみましょう。

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

2017.03.02

 

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

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

それって結局面倒じゃん!

と感じるかもしれないっす。

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

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

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

Logo

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

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

Logo

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

 

ワンポイントアドバイス

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

Css2

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

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

Details3
CSSは消さずに追加しよう!

CSSを変更すると以前のクラスで枠線を設定していたものが解除されます。

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

Warning

スポンサーリンク

まとめ

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

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

スポンサーリンク


スタイリッシュなサイン、作ります!



世界に1つだけのあなたのオリジナルサインをゆーすけが作成します。

ローマ字、日本語、カタカナ、芸能人のようなサインまで多種多様な用途に対応。

サービス開始からすでに170件以上のオーダーをいただいており、個人はもちろん、歌手、アイドル、俳優、プロスポーツ、経営層、出版、芸術など多種多様な業界からもご好評いただいています。

納品時には書き方のコツ資料、動画、サイン練習帳もお送りするので誰でも真似すればサインを書くことができます。

クレジットカードや書類にビシッとかっこいいサインが書けたら素敵ですね!