CSSで記事内の画像にシャドウをつけよう!!一括指定でな!

CSSの一括指定で記事内の画像すべてにシャドウをつけちゃおうぜ!

というわけで今回は便利なCSSジェネレーターサイトの紹介と、wordpressのカスタマイズについてです。

CSSで一括指定してしまえば、画像すべてにシャドウをつけるのも簡単!

icons-css

twenty fourteenは白背景なので、白バックの画像を貼ると分かりにくいんですよね。
なのでさりげなーくシャドウをつけたいと思います。

まずはサイトの紹介。
便利なCSSジャネレータは複雑なCSSコーディングも一発でできるので、作業時間も短縮できますね。ブクマ必須!!

サイト名:
layerstyles.org
サイトリンク:

こちらのサイトはPhotoShopのレイヤースタイル画面を模しているので、使い易いです。

プレビューを見ながら、シャドウの位置や大きさ、濃さを指定できます。
DropShadow
InnerShadow
Background
Border
BorderRadius
を設定でき、Backgroundではグラデーションの設定も可能。

css-shadow02

今回はシャドウを位置はそのまま、ブラーをさりげなくかけてみました。

css-shadow03

左下に「CSS Code」という部分が現れるので、クリックしましょう。
css-shadow04

出てきたコードをコピーしちゃえばもう完成!

-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.1);
box-shadow: 0 0 5px rgba(0,0,0,0.1);

これを、記事内の画像すべてに適用したいので、twenty fourteenの場合は

.entry-content img {
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.1);
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

でオッケーです!

あとはホバーしたときにシャドウを少し濃くしてみようと思います。

.entry-content a:hover img {
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.2);
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

このようにしてあげることで、ポップアップで拡大できる画像なのか、そうでないのかを区別することができますね。

昔はPhotoShopでシャドウをつけて、画像に書き出してたのに。。。
便利な時代になったものです。

ちなみに、既存サイトのリニューアル案件を頂くと、元の画像にシャドウがついてて、シャドウが2重になる現象が発生するので気をつけてくださいね(笑

コメントを残す

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