CSSで画像に影をつける方法について!ブログの見た目を綺麗に

こんにちは、グッチです。

今までは画像に影をつけるときにはWordPressの『Shadows』のプラグインを使用していました。

ですが、パソコンで見たときには問題なく影がつき画像も表示されるのですが、スマホで確認した際に、画像は自動で縮小されずにはみ出して表示されていました。

これではダメだと思い、下記のサイトを利用して1回1回画像に影をつけていたのですが、これはものすごくめんどくさい。
無料!画像加工サービス

ということで、今ではCSSにコードを加えて指定した画像に影をつけています。

今回はプラグインを使わずにCSSで画像に影を付ける方法を紹介していきます。

 

画像に影をつけるコード

CSSで画像に影をつけるのは非常に簡単です。

まずは、スタイルシートに下記のcssコードを追加します。


.shadow {
	margin-top: 5px; /* 画像の上の余白*/
	display: inline-block; 
	box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); /*横方向 下方向 ぼかし 広がり 色 */
}

あとは、影をつけたい画像のimgタグ内で、先ほどスタイルシートに加えたコードをクラス(class)で指定すれば画像に影がつきます。


<img class="shadow" src="画像URL">

WordPressであれば、記事を書く際にビジュアルとテキストがありますが、『メディアを追加』から画像を呼び出しているのであれば、その後テキストに変更してimgタグ内に下記のコードを追加すればOKです。


class="shadow"

 

終わりに

以上で、プラグインを使用せず、CSSで画像に影をつける方法の説明を終わります。

画像単体では寂しいなと思う人は、ぜひ影をつけるなり、文字を加えるなりして加工してみるといいかも。

少し加工するだけで印象はガラッと変わりますし、ブログの見た目も(多少は)綺麗になると思いますので。

ちなみに、このブログの画像は画像編集ソフトなどは使わずにエクセルやワードで文字を入れたり矢印を入れたりして編集しています。

「画像に文字入れたいなー」と思っている場合はエクセルでサクッと編集してみてください。

1 個のコメント

  • コメントを残す

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

    次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>