2006/09/10(日)[Tips] スイッチやセクションアンカーを画像にしたい場合
色々勘違いしていた部分がありましたので書き直し(06/12/10)。
a.switchやspan.sanchorが対象です。
adiaryβ15においてFirefox, IE6で正しく表示できることを確認、Opera9で一部問題があるがそれなりに意図した表示ができることを確認しています。
CSSソース
div.body h3 span.sanchor {
font-size: 0;
padding: 16px 23px 0 0;
width: 0;
line-height: 0;
background-image: url("petal-large.gif");
background-position: bottom right;
background-repeat: no-repeat;
}
解説
font-size
スイッチとかセクションアンカーは▼だったり■のような記号で通常表示されますので、まずこの文字を表示しないようにします。
font-size: 0とすることでブラウザで使用可能な最小サイズになります。
注：Operaでは9pxがブラウザで規定されている最小フォントサイズ(デフォルト値)のようで、これ以下にはなりません。
padding
この部分でセクションアンカー部の最小ブロックのサイズを指定するため利用する背景画像よりも大きい値とします。
width/line-height
width/line-heightでセクションアンカー部で文字部分（■）の幅と高さを指定します。
ただし、Operaではブラウザの設定により規定されている文字サイズ分取られてしまいます。(Opera 9.02で確認)
background-image関連
background-imageの値に表示したい画像のパスを与えます。
background-positionではbottom rightとして下さい。rightとする理由はOpera等で消しきれなかった文字が画像にかかるのを防ぐ為です。
background-repeatで、繰り返さないようにno-repeatを与えておきます。
表示例
ここまでで以下のように表示できます。
(わかりやすくする為以下を追加
color: blue;
border: 1px solid blue;)
- Firefox 1.5.0.8
[album:adiary/theme:sanchor_fx.jpg:large] - IE6SP1
[album:adiary/theme:sanchor_ie6.jpg:large] - Opera9.02
[album:adiary/theme:sanchor_op9.jpg:large]
Opera9のための修正
Operaでは文字を完全に消すことができない使用の為、文字の背景となる部分の色を指定・マージンの調整が必要となります。
color: #fef; #文字部分の背景と同じに margin-left: -1em; #マージンの調整 _margin-left: 0; #IEのマージンの調整
ここまでやるとOperaで以下のように表示できます。
(わかりやすくする為にborder: 1px solid blue;を追加)
[album:adiary/theme:sanchor2_op9.jpg:large]