今日はWordPressの見栄えをもう少しよくする計画。
テーマを変えて、phpファイルを直接コツコツ修正して日付表示なんかを直したあと、
About画面を作成しました。
今日はこのAbout画面で使用した、複数の画像を使用せず、
CSSをうまく使って複数の角丸見出しを作る方法を紹介します。
この方法はけっこう簡単なので、使い道が色々あります。
◆背景画像の準備
まずは背景画像を一つ作成。
自分で作成することもできますが、
[My cool button]
http://www.mycoolbutton.com/
このサイトで文字なしボタンを作ってサイズを変えれば、かなり使えます。
画像の幅は（だいたい）表示したい文字の長さ+20pxは必要です。
高さは全て表示するので、表示したい画面にあわせます。
◆HTMLの記述
<div>タグ内に<div>タグを記述します。内側の<div>の中に表示したい文字を書きます。
CSSの装飾をするので外側の<div>タグにidを指定します。
<div id='img_r'><div>Sample</div></div>
◆CSSの記述
二つの<div>について次のようなCSSを指定します。
#img_r{
background: url('背景画像のURL') no-repeat right top;
height:35px;
width:180px;
}
#img_r div{
background: url('背景画像のURL') no-repeat left top;
height:35px; /* 同じ高さ */
width:160px;
/* ここからは表示文字のための指定 */
color:#FFFFFF;
font-weight:bold;
padding:5px 0px 25px 2px;
text-align:center;
}
注意点として、内側の幅指定は外側の幅指定より小さくしなければいけません。
内側の方が外側よりも幅が大きいと角丸画像が隠れてしまうので。
このほかにサイトにあわせて、paddingやmarginを指定します。
画像の色に合わせて文字サイズや色を決めてそれも指定。
これだけの指定で、こんな見出しを作ることができます。
◆簡単な解説
<div>タグ2つで挟み込み、それぞれ背景画像を右から/左から固定して表示することで
文字サイズが変わっても、角の丸い画像の表示を維持することができます。
緑色の枠のほうは左側から背景画像を固定し、
青い枠のほうは右側から背景画像を固定するから、
結果として一つの角が丸い背景が完成するのだなぁ。