WordPressの記事に画像を挿入して公開した際に、デフォルトのままだと画像と文章が一体となっていてわかりにくい場合があります。(WordPressテーマによって異なる)
画像に影をつけると、画像がまるで浮いているように見えます。
今回は、CSSを編集することで、画像に影をつける方法をご紹介します。
※CSSにコードを貼り付ければ、自動的にimgタグのついた画像に影がつきます。値を変えることでお好みの影をつけることができます。別にclassを指定することもできます。
もくじ
画像に影をつける
対応するCSSファイルに下記のコードを記述します。
box-shadowを使って指定した要素に影をつけます。
/*画像に影をつける*/ img.alignnone { box-shadow: 1px 1px 5px #000; }
・1つ目の値
よこ方向の影。正の値は右、負の値は左に影がつきます。
・2つ目の値
たて方向の影。正の値は下、負の値は上に影がつきます。
・3つ目の値
影の広がり指定。大きくすることで影の範囲が広くなります。
・4つ目の値
色指定#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; }
WordPress記事の画像に影をつけて浮かせて見せる方法【CSSサンプル】 | ビジネスクラフト BUSINESS CRAFT
2019年5月31日 10:19 AM
[…] い→ ワードプレス 記事の画像に影をつけて浮かせて見せる方法 […]