5分でできる！画像に枠線を追加し目立たせる方法

みなさんこんにちは。イマイチTwitterの使い方が分からないてつ@sdblog35です。

画像に枠線を付けたいと思ったことありませんか？

WordPressのサイトに画像を貼った時、記事と画像の境目が分からず見づらい時ってありますよね。
特に当サイトみたいに背景が白で画像も白の場合は、書いた本人ですら境目の判断がつかないなんてことが。
今回は、画像と記事との境目をハッキリとさせることができる、画像に枠線を追加する方法をご紹介します。
※作業前に必ずバックアップを取り自己責任で実施してください

記事を見やすくするのもブロガーにとっては大事な作業のひとつですからね。
カスタマイズはものすごく簡単なので誰でもできちゃいます。しかも短時間でできるのでサクッとやっちゃいましょう！

5分でできる！画像に枠線を追加し目立たせる方法

まずはBefore Afterをお見せします。

このカスタマイズを行えば、枠線と影が付くようになります。
しかも、枠線を付けたい画像にだけ適用することができるのでとても便利です。

カスタマイズの流れとしては、CSSカスタマイズ　→　(記事中に)画像を貼る　→　画像を編集　です。
画像を編集と聞くと難しいように聞こえますが、編集画面で単語を追加するだけ。

CSSカスタマイズ

まずは、style.cssを開きましょう。
私は子テーマを使っているので子テーマのstyle.cssに記述します。

該当のstyle.cssを開き、以下のコードを追加しましょう。

/* 画像に枠線を付ける */
img.wakusen {
 border:solid 1px #a9a9a9;
 box-shadow: 10px 10px 10px #a9a9a9;} 
}

記事中に画像を貼る

続いて、記事中に画像を貼ります。
通常通り画像を貼り付ければOK。

画像を編集する

枠線を追加したい画像をクリックしましょう。
そうすると、ツールバーが表示されるので鉛筆マークをクリックします。

画像の編集画面が表示されるので、上級者向け設定をクリックし展開します。

画像CSSクラスにwakusenと入力し更新ボタンをクリック。
この入力した単語wakusenは、さきほどstyle.cssに追加したコードの「img.wakusen」のwakusenです。
style.cssに設定した情報を特定の画像だけに適用すると、その画像だけ適用される仕組みですね。
また、このwakusenという単語は自由に変えてもらって大丈夫なので、分かりやすい単語にしましょう。