読者です 読者をやめる 読者になる 読者になる

よなかのはなし

http://www.hiroseyonaka.com/

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

f:id:hiroseyonaka:20160908232433p:plain

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

 

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

 

 

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

f:id:hiroseyonaka:20160908232433p:plain

 

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、黒背景+キャプション

f:id:hiroseyonaka:20160908232710p:plain

 

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、角丸+キャプション

f:id:hiroseyonaka:20160908232948p:plain

 

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を指定しています。数値を変えれば角丸の角度を変更できるので、お好みで調整してみてください。