かえでのWebログ

検索条件

日付で絞り込み 7月(4) 8月(4) 9月(2)

全10件 (1/2ページ) 一覧表示に切り替え記事本文を表示

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]

コメント（0件）

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

adiary::テーマ開発用ドキュメント

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

コメント（0件）

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

adiary::テーマ開発用ドキュメント

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 (記事１件表示時)
        
        div.refererlist / div.tb
        
        div.caption
        
        ul.tb
    - hr.footer
    - div.footer
    - div.edit (システムモードのみ)