2006/12/06(水)テーマ開発の進捗

adiary::テーマ

今はこんな感じ。
[album:adiary/theme:mizuho090.jpg]
だいたいできたのだけど、タイトル部がちょっと寂しい気がするので考え中。

あと、サイドバー項目タイトルの置き換え案募集中。
淑女テーマをベースに現在以下のように置き換えています。

  • Information → お知らせ
  • 最近の記事 → 日記
  • 最近のコメント → ご連絡
  • 最近のトラックバック → お手紙
  • ジャンル別、記事 → 趣味
  • System Info → システムの状態
コメント（0件）

2006/12/05(火)IEの謎な継承とblock要素の謎な計算

adiary::テーマ

adiary記事タイトル部の構造は下記のようになっています。

  • h2
    • a.switch
    • a
      • span.date
    • a
      • span.title

作成中のCSS

[album:adiary/theme:mizuho_h2.jpg]
h2の内側にあるspan.date, span.titleをblock要素に変更し、上記の画像のように配置するためのCSSのソースは以下のようになります。

div.day h2 {
background-image:	url("article-top.png");
background-position:	top left;
background-repeat:	no-repeat;
margin:			0;
padding:		24px 32px 0 32px;
min-height:		38px;
_height:		62px;
}

div.day h2 a.switch { display: none; }

div.day h2 span.date {
display:		block;
background-color:	transparent;
width:			476px;
text-align:		center;
line-height:		20px;
margin:			0;
margin-top:		-20px;
padding:		0;
}

div.day h2 span.title {
display:		block;
width:			436px;
background-color:	#5eb4bb;
text-align:		center;
margin:			0;
padding:		0.3em 20px;
_width:			476px;
}

このソースをIE6に適用する

[album:adiary/theme:mizuho_h2_ie.jpg]
上記の画像のようにレンダリングされます。

  1. h2で指定した背景画像がspan.title部で呼ばれている
  2. h2で指定したブロックの内側のサイズ(height)が無視され後続のブロック(div.body)と隣り合ってしまっている

解決策

1つめの問題は
span.date{ _padding-bottom: 1px; }
とすることでh2で指定した背景画像が呼ばれなくなります。

2つめの問題は解決策を見つけることができませんでした。
仕方がないのでspan.title部のpaddingを大きく取りh2部のサイズを62px以上になるようにしましたが、根本的な解決にはなっていません。

愚痴

テーマ作成の度に上記のようなIEのバグに対する解決策を手探りで探すことになり非常に辛い。CSSで利用できるプロパティも制限されるし。何故みんなそんなにも時代遅れでバグだらけなブラウザが好きなんだ？

コメント（0件）

2006/12/04(月)[CSS] Operaで:before/:after疑似セレクタで背景画像が使えないバグ

adiary::テーマ

Opera9.02で

body {
background-image:	url("body-middle.png");
background-repeat:	repeat-y;
}

body:after {
display:		block;
background-image: 	url("body-bottom.png");
}

としても、body:after部分でbody-bottom.pngの背景画像が読み込まれずbody:after部分のブロックの背景画像は親要素であるbody-middle.pngが使われてしまいます。

しかし、bodyよりさらに上位の要素(この場合html)で背景画像が利用されているとbody:afterでbody-bottom.pngの背景画像が読み込めます。

;;html { background-image:	url(""); }
body:after {
display:		block;
background-image: 	url("body-bottom.png");
}

ちなみに、;;htmlはOpera9にのみ適応するCSSハックです。

コメント（0件）

2006/12/04(月)マルチサイドバーなテーマ作成中

adiary::テーマ

[album:adiary/theme:mizuho.jpg]
マルチサイドバー対応テーマ作成中。
このテーマを使うと、訪問者は強制的にお姉さまになれます（笑）
ちなみにゲストユーザーだとエルダー？

↑の画像の記事はCSS書いているときの愚痴です。
あまり気にしないで下さい。
あと、IE7(Trident Vエンジン)では透過PNG問題は解決されているらしい。

現在、素材待ち

コメント（0件）