CSSの一括指定で記事内の画像すべてにシャドウをつけちゃおうぜ！
というわけで今回は便利なCSSジェネレーターサイトの紹介と、WordPressのカスタマイズについてです。
CSSで一括指定してしまえば、画像すべてにシャドウをつけるのも簡単！
twenty fourteenは白背景なので、白バックの画像を貼ると分かりにくいんですよね。
なのでさりげなーくシャドウをつけたいと思います。
まずはサイトの紹介。
便利なCSSジャネレータは複雑なCSSコーディングも一発でできるので、作業時間も短縮できますね。ブクマ必須！！
- サイト名：
- layerstyles.org
- サイトリンク：
- [browser-shot width=”600″ url=”http://www.layerstyles.org/”]
こちらのサイトはPhotoShopのレイヤースタイル画面を模しているので、使い易いです。
プレビューを見ながら、シャドウの位置や大きさ、濃さを指定できます。
DropShadow
InnerShadow
Background
Border
BorderRadius
を設定でき、Backgroundではグラデーションの設定も可能。
今回はシャドウを位置はそのまま、ブラーをさりげなくかけてみました。
左下に「CSS Code」という部分が現れるので、クリックしましょう。
出てきたコードをコピーしちゃえばもう完成！
-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でシャドウをつけて、画像に書き出してたのに。。。
便利な時代になったものです。
ちなみに、既存サイトのリニューアル案件を頂くと、元の画像にシャドウがついてて、シャドウが２重になる現象が発生するので気をつけてくださいね（笑