HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

画像の上にテキストを乗せる

いちまい  にまい。そして、つづき

 
[C:]background-image で画像を指定。
background-repeat を no-repeat にして繰り返しを抑制する。
画像にあわせて height を指定する(画像サイズ)。
内側に入るブロックは p タグでくくる。
pタグの padding で上下位置を合わせる。
左右の位置も padding で調節する。
[/C]
<div style="background-image:url('img/aaaa.png');background-repeat:no-repeat;height:75px;">
 <p style="padding: 30px 0px;">
  <span style="color:#ff0000">いちまい</span>
  <span style="color:#0000ff">にまい。そして、つづき</span>
 </p>
</div>
<div class="clr"></div>
[S: color:#cc0000;]※background-repeat:no-repeat を忘れずに!
※表示上改行をいれているが、ワードプレスなど自動編集されるエディタを使っている場合は、
改行を取っ払った方が操作しやすい。[/S]  
 
 
これは、基本的に見出しなどの原理と同じで、padding をつかうことで見出しにも応用する。

いちまいにまいつづき

スポンサーリンク

<div style="background-image:url('img/aaaa.png');background-repeat:no-repeat;height:75px;">
 <p style="padding: 30px 0px 30px 80px;">
  <span style="color:#ff0000;font-size:30px;">いちまいにまい</span>
  <span style="color:#0000ff">つづき</span>
 </p>
</div>
<div class="clr"></span>
[S: color:#cc0000;]※background-repeat:no-repeat を忘れずに!
※表示上改行をいれているが、ワードプレスなど自動編集されるエディタを使っている場合は、
改行を取っ払った方が操作しやすい。[/S]

スポンサーリンク

カテゴリー