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]

2006/09/06(水)記事部に画像を使用する場合のテーマ作成時のメモ

lfdiaryのように記事部に画像を使用する場合。

div.day

最下部に表示する画像を持ってきます

div.day {
	background-image:	url("div_day_bottom.gif");
	background-position:	bottom left;
	background-repeat:	no-repeat;
}

div.day h2

最上部に表示する画像を持ってきます

div.day h2 {
	background-image:	url("div_day_h2.gif");
	background-position:	top left;
	background-repeat:	no-repeat;
}

div.body, div.comment, div.tb

記事部の真ん中で繰り返される画像を持ってきます

div.day div.body, div.day div.comment, div.day div.tb {
	background-image:	url("div_day_body.gif");
	background-position	top left;
	background-repeat:	repeat-y;
}

IE向けの修正

IEでdiv.dayで定義した背景画像がdiv.bodyで定義した背景画像に上書きされてしまうのでIE向けに再定義

div.tb ul, div.edit

div.tb ul, div.edit{
	_background-image:	url("div_day_bottom.gif");
	_background-position:	bottom left;
	_background-repeat:	no-repeat;
}

修正 2006/09/13

div.bodyで定義した背景画像が表示されないのはdiv.day-additionalとの境界の認識が狂っている為だとわかりました(バグ)
尚、上記の手法だとTBがない場合に背景画像が表示されません。

これらの問題を解決させる為に、div.bodyのpaddingとdiv.day-additionalとの境界をはっきりとさせるため、IE向けに以下を追加します

div.day-additional{
	_padding-bottom: 1px;
}