CSS3で画像におしゃれなキャプションを表示してみる

今年に入ってwordpressのテーマを変更したのですが、トップページの記事一覧に表示されているアイキャッチ画像にカテゴリのキャプションが表示されるようになりました。
あまり気にしたことがなったですが、UI的には分かりやすくて良いと思ったので色々実験してみました。
ちなみにアイキャッチ画像の一括設定で紹介したプラグインを使うと過去の記事までまとめて設定してくれるのでお勧めです。

基本のおさらい

[写経] HTML5&CSS3 ステップアップブック 1と[写経] HTML5&CSS3 ステップアップブック 2の復習です。

図版はHTML5で追加になったfigureを使って行えるようになりました。
なんのこっちゃよく分かってないので試しに書いてみることにします。
写真はCHEKAな生活(私のもう一つのブログ)から流用しました。

<figure>
   <img alt="図版" width="300px" src="img.jpg" />
   <figurecaption>キャプション</figurecaption>
</figure>

実際の画面がこちら

figurecaptionでマークアップした部分をスタイルしてく方が無難なようです。

cssでスタイリング

まず背景色、文字色、フォントなどをまねてみた

figurecaption{
	background-color:#38b7ee;
    color : #ffffff;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
	font-weight: bold;
	padding: 5px 10px;
}

実際の画面がこちら

画像に重ねてみた

figurecaptionのpositionをabsoluteにするために、figureにposition:relativeを設定します。
この設定が抜けるとwindowのpositionが親positionとしてポジションニングされてしまいます。

figure{
   position:relative;
}

figurecaption{
	background-color:#38b7ee;
    color : #ffffff;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
	font-weight: bold;
    left : 0;
	padding: 5px 10px;
    position:absolute;
}

実際の画面がこちら

色々組み合わせてみた

ここまで出来たら後はfontのプロパティで色々見た目を変えて好みを見つけます。
＊普通はデザインカンプの時点で決まっていると思いますが・・

figurecaption{
	background-color:rgba(255, 255, 255, 0.5);
    color : #ffffff;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
	font-weight: bold;
    left : 0;
	padding: 5px 10px;
    position:absolute;
    text-shadow:4px 4px 4px rgba(0,0,0,.5);
}

実際の画面がこちら

ちょっとした事でUIの伝わり方が変わってしまうので、自分が良いと感じたデザインはどんどん取り入れていきたいですね！