アイキャッチ画像は、ブログを訪れてくれたユーザーの一番最初に目に入るもの。記事のテーマに合ったセンスの良い画像選びも大事ですが、一目で内容が分かるキャプションを付けておくと、より記事を読んでもらいやすくなります。
ただ、Illustratorなどを使って画像に直接キャプションを加工してしまうとフォントを変えたいときや画像のサイズ修正などをする時に面倒！ というわけで、今回はレスポンシブデザインのはてなブログに、CSSだけで上下中央揃えのキャプションをつける方法をご紹介します。
1.白ボーダー＋キャプション
HTML
<div id="row-1st"><img src="ここに画像のURL" /> <div id="row-1st-in"> <p>CAPTION</p> </div> </div>
CSS
#row-1st {
position: relative;
}
#row-1st img{
width:100%;
}
#row-1st-in {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border: 2px solid #fff;
> div {
width: 90%;
max-width: 300px;
margin: 0 auto;
font-size: 300%;
line-height: 1.7;
}
}
#row-1st-in p{
color:#fff;
font-size:180%;
padding:15px 20px;
line-height: 1;
font-family: YuGothic,"Yu Gothic","游ゴシック","游ゴシック体","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}
これが基本となるHTMLとCSSです。自由度が高いので、CSS側で指定すればかなりアレンジできて便利ですよ。以下に２つほど、簡単なアレンジ例を上げてみます。
2.黒背景＋キャプション
HTML
<div id="row-2st"><img src="ここに画像のURL" /> <div id="row-2st-in"> <p>CAPTION</p> </div> </div>
CSS
#row-2st {
position: relative;
}
#row-2st img{
width:100%;
}
#row-2st-in {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border: 2px solid #000;
background-color:#000;
opacity: 0.6;
> div {
width: 90%;
max-width: 300px;
margin: 0 auto;
font-size: 300%;
line-height: 1.7;
}
}
#row-2st-in p{
color:#fff;
font-size:180%;
padding:15px 20px;
line-height: 1;
font-family: YuGothic,"Yu Gothic","游ゴシック","游ゴシック体","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}
キャプションの黒背景に、opacityタグを使って半透明を指定しています。現在は0.6ですが、数値を変えれば濃さを調整できます。
3.角丸＋キャプション
HTML
<div id="row-3st"><img src="ここに画像のURL" /> <div id="row-3st-in"> <p>CAPTION</p> </div> </div>
CSS
#row-3st {
position: relative;
}
#row-3st img{
width:100%;
}
#row-3st-in {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border: 2px solid #fff;
border-radius: 300px;
-webkit-border-radius: 300px;
-moz-border-radius: 300px;
> div {
width: 90%;
max-width: 300px;
margin: 0 auto;
font-size: 300%;
line-height: 1.7;
}
}
#row-3st-in p{
color:#fff;
font-size:180%;
padding:15px 20px;
line-height: 1;
font-family: YuGothic,"Yu Gothic","游ゴシック","游ゴシック体","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}
CSSで上下中央になるように指定しているので、画像の大きさを変えてもキャプションの位置はズレません。このバージョンでは、角丸にするため border-radius 300pxを指定しています。数値を変えれば角丸の角度を変更できるので、お好みで調整してみてください。
参考サイト