【レスポンシブ】CSSだけで画像に上下中央揃えのキャプションを実装する方法

WordPressアイキャッチ

アイキャッチ画像は、ブログを訪れてくれたユーザーの一番最初に目に入るもの。記事のテーマに合ったセンスの良い画像選びも大事ですが、一目で内容が分かるキャプションを付けておくと、より記事を読んでもらいやすくなります。

ただ、Illustratorなどを使って画像に直接キャプションを加工してしまうとフォントを変えたいときや画像のサイズ修正などをする時に面倒! というわけで、今回はレスポンシブデザインのはてなブログに、CSSだけで上下中央揃えのキャプションをつける方法をご紹介します。

SPONSORED LINK

1、白ボーダー+キャプション

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 Pゴシック","MS PGothic",sans-serif;
}

これが基本となるHTMLとCSSです。自由度が高いので、CSS側で指定すればかなりアレンジできて便利ですよ。以下に2つほど、簡単なアレンジ例を上げてみます。

1、黒背景+キャプション

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 Pゴシック","MS PGothic",sans-serif;
}

キャプションの黒背景に、opacityタグを使って半透明を指定しています。現在は0.6ですが、数値を変えれば濃さを調整できます。

1、角丸+キャプション

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 Pゴシック","MS PGothic",sans-serif;
}

CSSで上下中央になるように指定しているので、画像の大きさを変えてもキャプションの位置はズレません。このバージョンでは、角丸にするため border-radius 300pxを指定しています。数値を変えれば角丸の角度を変更できるので、お好みで調整してみてください。

▼参考サイト

レスポンシブな背景画像にコンテンツを重ねて表示させる3つの方法

SPONSORED LINK

あわせて読みたい



トップへ戻る