CSS3で画像におしゃれなフレームを表示してみる

画面キャプチャをブログ画像として利用する事が多いのですが、今のテーマは画像が素のまま表示されて文字の区切りが微妙な場面が多いです。
JetpackプラグインをWordPressに導入すると「カスタムCSS」が使えるようなので、今回は画像に対してフレームボーダーを追加してみます。

全ての画像に適用されるのも微妙なので、トップページと記事画面の画像のみに限定してカスタムCSSを追加してきます。

cssでスタイリング

まず初期状態の確認

素のまま表示されているのが分かると思います。

・トップページ

・記事ページ

少し分かり難いですね。

ボーダーだけ追加

影響範囲を限定してボーダーを追加してみました。

.featured-thumbnail img,.article img{
	border : 3px solid #999;
}

・トップページ

・記事ページ

cssが適用されていることが確認できました。
フレーム風に調整してみましょう。

フレーム風に調整する

まずベタに影をつけます。
box-shadow : [横方向のズレ] [縦方向のズレ] [ボカシ] [色]

.featured-thumbnail img,.article img{
	border : 3px solid #999;
	box-shadow : 3px 3px 3px #666;
	-webkit-box-shadow : 3px 3px 3px #666;
	-moz-box-shadow: 3px 3px 3px #666;
}

・トップページ

・記事ページ

っぽくなってきました。
どんどん行きましょう！
枠線が太いので1pxにして見やすくするためにpaddingをつけました。

.featured-thumbnail img,.article img{
	border : 1px solid #999;
	box-shadow : 3px 3px 3px #666;
	-webkit-box-shadow : 3px 3px 3px #666;
	-moz-box-shadow: 3px 3px 3px #666;
	padding : 5px;
}

・トップページ

・記事ページ

ちょっとした一手間で変更できるのはWordpressの良い所ですね！