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

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

 

 

Follow me!

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

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

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

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

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

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

1 個のコメント

  • コメントを残す

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

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