LOADING

Type to search

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

Share

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;
}

 

 

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

最後まで読んで頂きありがとうございます。

このブログを「いいな」と感じていただけましたら、

下のボタンをクリックしていただくととても嬉しいです^^

ブログランキングに参加しています。応援クリックよろしくお願いします!

にほんブログ村 為替ブログ FXの基礎知識へ

さらに下のボタンからSNSに拡散していただくととても嬉しいです!

嶋耕作(Kosaku Shima)
嶋耕作(Kosaku Shima)

自然を愛するFXトレーダー、雑食系作家です。たまにデザインの仕事もしています。仕事をしたくない時は、PUPG、人狼ジャッジメント、オースティンのゲームやアニメ、映画へ逃亡します。好きな食べ物は、寿司、ラーメン、タイ料理、トルコ料理、ラム肉。好きなスポーツは、バスケ、プール、散歩。好きな場所は、海、温泉、森、猫の肉球。お酒はほとんど飲みません。

  • 1

1 Comment

Leave a Comment

Your email address will not be published. Required fields are marked *

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Translate »