WordPress記事の画像に影をつけて浮いてるように見せる方法【CSSサンプル】

WordPressの記事に画像を挿入して公開した際に、デフォルトのままだと画像と文章が一体となっていてわかりにくい場合があります。（WordPressテーマによって異なる）

画像に影をつけると、画像がまるで浮いているように見えます。

今回は、CSSを編集することで、画像に影をつける方法をご紹介します。

※CSSにコードを貼り付ければ、自動的にimgタグのついた画像に影がつきます。値を変えることでお好みの影をつけることができます。別にclassを指定することもできます。

画像に影をつける

対応するCSSファイルに下記のコードを記述します。

box-shadowを使って指定した要素に影をつけます。

/*画像に影をつける*/
img.alignnone {
    box-shadow: 1px 1px 5px #000;
}

・１つ目の値

よこ方向の影。正の値は右、負の値は左に影がつきます。

・２つ目の値

たて方向の影。正の値は下、負の値は上に影がつきます。

・３つ目の値

影の広がり指定。大きくすることで影の範囲が広くなります。

・４つ目の値

色指定#000の代わりにrgba(0,0,0,1)のような記述でも表現できます。

上下左右の影をつける

img.alignnone {
    box-shadow: 1px 1px 5px #000, -1px -1px 5px #000;
}

上下左右の影の別の書き方

img.alignnone {
    box-shadow: 0 0 5px #000;
}

このサイトをフォローする!

@evahks