【Wordpress】 CSSで記事内の画像に枠や影をつける方法

こんにちは、所長のにゃまんです。

ブログに貼り付ける画像に影を付けたい時ありませんか。

こんな感じ。

画像自体を加工して影を入れる方法もありますが、面倒ですね。

WordPressの場合は、「Shadows」というプラグインが有名ですが、今回はプラグインを使わずCSSで影をつけてみようと思います。

影を表示する方法

imgそのものに追加してしまうと全ての画像に影がついてしまうので、classで指定します。

まずCSSに、下記を追加。

.shadow_img {
    box-shadow: 4px 4px 20px -8px rgba(0, 0, 0, 0.5);
}

あとは、記事内に貼り付けたimgタグのクラスの中に「shadow_img」を追加して完了です。

<img class="shadow_img">

こんな感じになります。

box-shadowの値を変えて、影の色や方向、広がり、ぼかし具合を調整できます。

値が０より大きくなるほど、影が右側に出てきます。
逆に０より小さくなると、左側に影が出ます。

【左側に影を付けた例】

box-shadow: -15px 0px 20px -8px rgba(0, 0, 0, 0.5);

値が０より大きくなるほど、影が下方向に出てきます。
逆に０より小さくなると、上方向に影が出ます。

【下側に影を付けた例】

box-shadow: 0px 15px 20px -8px rgba(0, 0, 0, 0.5);

値が大きくなるほど、ぼかし具合が大きくなります。（範囲も広くなります）
逆に値が小さくなるほど、ぼかし具合が小さくなりくっきりします。
マイナス側には指定できません。

【ぼかしを大きくした例】

box-shadow: 0px 15px 40px -8px rgba(0, 0, 0, 0.5);

値が０より大きくなるほど、影が広がります。
逆に０より小さくなると、影が小さくなります。

【広がりを大きくした例】

box-shadow: 0px 15px 20px 10px rgba(0, 0, 0, 0.5);

R(赤)、G(緑)、B(青)を、0～255の数値で指定します。

【影の色を赤にした例】

box-shadow: 0px 15px 20px -8px rgba(255, 0, 0, 0.5);

0から1までの数値で指定します。
例えば、「0.5」や「0.78」のように小数点以下が指定できます。
値が1に近いほど透明度が下がり濃くなります。

【透明度を0.8に設定した例】

box-shadow: 0px 15px 20px -8px rgba(0, 0, 0, 0.8);

影を作るbox-shadowですが、内側に影を作ることもできます。

方法ですが、値の一番最後に「inset」を追加してあげるだけです。

ただ、img要素そのものにはinsetが効かないので、pタグなどで囲って、after擬似要素で画像の上に影を追加してあげる必要があります。

box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.5) inset;

box-shadowを使えば、画像加工することなくオシャレでカッコよく見せることができます。

一度CSSで設定してしまえば、あとは影を付けたい画像にclassを追加するだけなので簡単ですね。