ページ上部に画像を入れて、画像上に文字を入れることも多いでしょう。SEOの観点からは、画像文字よりもテキスト文字の方が有利です。しかし配色によっては、テキストに透過背景色を設定する方が読みやすくなる場合もあるでしょう。
画像に重ねた複数行のテキスト文字に対し、CSSで背景色を指定して透過にする方法は、大きく3通りの方法があります。
- 全体を四角く透過背景にする・block要素
- inline要素で透過背景
- inline-block要素で透過背景
この3つの方法を順番に説明していきます。
テキスト文字全体を含む四角い透過背景
これは、テキストを含むブロックレベル要素に対して背景色を設定した場合の方法です。
ここにテキスト文字を書いています。
途中で改行すると、行によって文字の長さがまちまちになります。
しかし背景色を適用しているのは <p> タグ内部のインライン要素ではありません。
ブロックレベル要素である <p> 自体に背景色を適用しています。
このように、ブロックレベル要素に背景色を指定すると、四角くなります。今回のソースは以下の通りです。
HTML
<div class="head_img_1">
<p>ここにテキスト文字を書いています。<br>
途中で改行すると、行によって文字の長さがまちまちになります。<br>
しかし背景色を適用しているのは <p> タグ内部のインライン要素ではありません。
ブロックレベル要素である <p> 自体に背景色を適用しています。</p>
</div>
CSS
div.head_img_1 {/*背景画像を含むdiv*/
border: 1px solid #F0F0F0; /*ボーダーは薄いグレー*/
width: 487px; /*幅は画像幅と同じ*/
height: 352px; /*高さは画像幅と同じ*/
padding: 0; /*パディングを0に指定*/
margin: 10px; /*マージンは10pxに*/
background: url(http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/FreeFloralDesignVectorGraphic-reflect-y.jpg); /*背景画像を指定*/
}
div.head_img_1 > p { /*背景画像の内側の段落（パラグラフ・paragraph）のタグ*/
margin-top: 120px; /*上からのマージン*/
margin-left: 80px; /*左からのマージン*/
margin-right: 10px; /*右からのマージン*/
padding: 8px; /*この指定で、背景色が文字の8px外側までになる。*/
color: #001800; /*文字色の指定*/
background: rgba(255,255,255,0.5); /*赤緑青と透過率の設定・白で透過率0.5*/
}
全体を四角く背景色という方法は、画像をどこかで一直線に区切ってであれば、効果的に使うこともできます。内側の <p> の3方向にmargin: 0;を指定して、幅か高さを画像サイズと一致させる場合のことです。
インライン要素全体に背景を指定・失敗例
では今度は、 <p> タグで括られたインライン要素全体を <span> タグで包んで、<span> タグに対して背景色と透過率を指定してみます。インライン要素に指定できるpaddingは、上下方向は1行1行の上下方向で、左右方向はタグで括る最初と最後の部分だけになります。 <br> タグでの改行や、長くて1行に入らず自動改行する部分では、左右方向のpaddingは適用されません。
<span>の始まりの部分は左側にpaddingがあります。
しかし、改行部分にはpaddingは適用されません。
上の2行は <br> タグで改行しましたが、この行は長く書いているので、幅の関係で途中で自動的に改行されます。どちらの改行の場合も、改行部分にはpaddingは適用されません。
そして </span> の直前もpaddingが適用されます。
このように、各行の両端にpaddingを指定したい場合は、各行ごとに <span> タグなどで括る必要があります。今回のソースコードは以下の通りです。
HTML
<div class="head_img_2">
<p><span><span>の始まりの部分は左側にpaddingがあります。<br>
しかし、改行部分にはpaddingは適用されません。<br>
上の2行は <br> タグで改行しましたが、この行は長く書いているので、幅の関係で途中で自動的に改行されます。どちらの改行の場合も、改行部分にはpaddingは適用されません。<br>
そして </span> の直前もpaddingが適用されます。</span></p>
</div>
SCC
div.head_img_2 { /*画像を背景とする<div>*/
border: 1px solid #CCCCCC;
width: 500px;
height: 375px;
padding: 0;
margin: 10px;
background: url(http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/C00297-001N-reflect-y-0.125.jpg);
}
div.head_img_2 p { /*内側の<p>*/
margin-top: 150px;
margin-left: 80px;
margin-right: 10px;
text-align: right;
}
div.head_img_2 span { /*インライン要素全体を囲む <span>*/
padding: 4px; /*パディングを指定（今回は上下左右同じ値）*/
font-size: 14px;
line-height: 34px; /*フォントサイズとpaddingに合わせて行間を設定する。*/
color: #100800; /*文字色の指定*/
background: rgba(255,255,255,0.5); /*背景色と透過の指定*/
}
上下方向のパディングとフォントサイズに合わせて、行間の設定を行っておかないと、透過背景の部分が重なる場合があります。ここはインライン要素に上下方向のパディングを設定する場合特有の問題です。
1行ごとにdisplay: inline-block;とし、背景を指定
今回は1行ごとに<span>で括ります。
充分に長いと、<br>タグがなくても自動的に改行されます。
短いと、
横並びに
なります。
<br> を使うと、
短くても改行されます。
逆に1行に長い文章を入れてみましょう。横に長くてはみ出す分は、自動的に改行されます。背景の色の変わり方を見ると、ブロックレベル要素と同じように四角くなっているのがわかります。
そして縦方向の背景は、paddingにline-heightが加わります。この部分だけ個別に、line-heightを他より大きくしました。また別々のinline-block同士では、marginが適用されます。
これがインラインブロック要素です。
1行ごとに背景を分けて、かつ、一つの括りの中で改行することの無い長さに調節すれば、1行ずつ文字の部分だけに透過背景を作ることができます。もちろん、上下左右にきちんとpaddingが反映されます。インラインブロックを使ったソースコードは以下の通りです。
HTML
<div class="head_img_3">
<p>
<span>今回は1行ごとに<span>で括ります。</span>
<span>充分に長いと、<br>タグがなくても自動的に改行されます。</span>
<span>短いと、</span>
<span>横並びに</span>
<span>なります。</span><br>
<span><br> を使うと、</span><br>
<span>短くても改行されます。</span>
<span>逆に1行に長い文章を入れてみましょう。横に長くてはみ出す分は、自動的に改行されます。背景の色の変わり方を見ると、ブロックレベル要素と同じように四角くなっているのがわかります。</span>
<span style="line-height:22px;">そして縦方向の背景は、paddingにline-heightが加わります。この部分だけ個別に、line-heightを他より大きくしました。また別々のinline-block同士では、marginが適用されます。</span>
<span>これがインラインブロック要素です。</span>
</p>
</div>
CSS
div.head_img_3 {
border: 1px solid #CCCCCC;
width: 492px;
height: 330px;
padding: 0;
margin: 10px;
background: url(http://kitabaru.sakura.ne.jp/html-css-coding/wp-content/uploads/2014/07/han0205-049-reflect-y-0.25.jpg);
}
div.head_img_3 p {
margin-top: 2px;
margin-left: 40px;
margin-right: 10px;
text-align: right;
}
div.head_img_3 span {
display: inline-block; /*インラインブロックに指定*/
padding: 2px 4px; /*上下方向は2pxで、これにline-heightの値が加わる。左右方向は4px*/
font-size: 14px; /*フォントサイズは14px*/
line-height: 18px; /*行間がフォントサイズより上下に2pxずつ大きく、paddingと合わせると4px*/
margin: 4px 2px; /*他のインラインブロックとのマージン。上下は重なり・左右は合算*/
color: #101000;
background: rgba(255,255,255,0.5);
}
上下方向の背景は、paddingの値にline-heightの分を加えた値になります。
マージンは、上下方向については、重なり合います。上と下とで別々の値を指定した場合は、大きい方になります。一方で左右方向のマージンについては、左の値と右の値を足し合わせた値になります。スマホ等幅の狭い端末からのアクセスに備える場合は、左右方向のマージンを0として、細切れにする方法もあるでしょう。ただしこの場合はpaddingの分だけ隙間ができますから、句点や読点の部分で区切るなど工夫が必要となるでしょう。
おわりに
画像のalt属性よりもテキスト文字の方がSEO上有利になりますが、フォントなどで特にこだわりがない場合は、画像背景の上にテキスト文字を重ねる方がいいでしょう。そして配色の関係で読みにくい場合は、透過背景を使えばいいことになります。透過背景の使い方としては、全体を四角く囲むか、各行ごとに四角く囲むのがいいでしょう。特に後者の方法は便利なので、覚えておくと、何かと便利だと思います。
