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;
}

2006/08/09(水)1.1 全体のdiv構造

adiary 1.00β7

adiaryの全体のdiv要素の入れ子の構造は以下のようになっています。
div.sidebar, div.section, div.editの構造は各ドキュメントを作成予定です。

  • body
    • div.adminmenu
    • div.page-title
    • div.hatena-body
      • div.sidebar
        • div.hatena-module
          • div.hatena-moduletitle
          • div.hatena-modulebody
          • div.calender
            • div.hatena-modulebody
      • div.main
        • div.day
          • h2
          • div.body
            • div.section body-header
            • div
            • div.section
            • div.day-additional
              • div.comment
                • div.caption
                • div.commentshort
                  • div.commentbody (記事1件表示時)
              • div.refererlist / div.tb
                • div.caption
                • ul.tb
        • hr.footer
        • div.footer
        • div.edit (システムモードのみ)

2006/08/08(火)2.3 フッタ

adiary 1.00β7

adiaryのバージョンとか使用しているスケルトンの情報などが表示される部分です。

親要素

  1. body
  2. div.hatena-body
  3. div.main

要素

hr.footer

フッタ部の水平線を定義します。

div.footer

フッタ部を定義します。背景色や背景画像を利用している場合は多くの場合リンクや文字が見づらくなる為、これらが見づらくならないように再定義する必要があります。
あと、display: none;を設定するとadiaryの作者様に怒られます(笑)

2006/08/06(日)4.1.2 アンカー

adiary 1.00β6

アンカーは以下の要素で定義されています

親要素(共通)

  1. body
  2. div.hatena-body
  3. div.main
  4. div.day
  5. div.body
  6. div.section

親要素

アンカー要素

span.sanchor

アンカーを定義します

セクションアンカーのみ定義する場合: h3 span.sanchor
サブセクションアンカーのみ定義する場合: h4 span.sanchor