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

wordpress使い方




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

 

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

 

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

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

 

 

画像に影をつける

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

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

 

・1つ目の値

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

・2つ目の値

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

・3つ目の値

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

・4つ目の値

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

 

 

上下左右の影をつける

 

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

 

 




よく読まれている記事

wordpress使い方

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です