かえでのWebログ

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

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

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

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で利用できるプロパティも制限されるし。何故みんなそんなにも時代遅れでバグだらけなブラウザが好きなんだ？

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ハックです。

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

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

現在、素材待ち

みたいのを作りたくなってきた。
で、どうやって実現するかというと、デフォルトのデザインだとサイドバーこんな感じになっているはず。

<div class="sidebar">
<@s.text_side0>
<module name="infomation" title="Infomation">
<module name="calendar" title="カレンダー" 
Sunday="日" Monday="月" Tuesday="火" Wednesday="水" 
Thursday="木" Friday="金" Satday="土">

<module name="recent_diary">
<module name="recent_comment">
<module name="recent_trackback">
<module name="category_list">

<module name="search" title="検索" size="12" submit="検索">
<@s.text_side1>
<module name="system-info" title="System info">
</div> <!-- End of sidebar -->

これに新たにdiv.sidebar-rightとdiv.sidebar-leftというDIVで括ることで実現しようと思う。

具体例

<div class="sidebar">

<div class="sidebar-left">
<module name="calendar" title="カレンダー" 
Sunday="日" Monday="月" Tuesday="火" Wednesday="水" 
Thursday="木" Friday="金" Satday="土">
<module name="recent_diary">
<module name="recent_comment">
<module name="recent_trackback">
</div> <!-- end of sidebar-left -->

<div class="sidebar-right">
<@s.text_side0>
<module name="infomation" title="Infomation">
<module name="search" title="検索" size="12" submit="検索">
<module name="category_list">
<@s.text_side1>
<module name="system-info" title="System info">
</div> <!-- end of sidebar-right -->

</div> <!-- End of sidebar -->

この場合サイドバーは以下のように表示される

左サイドバー

• カレンダー
• 最近の記事
• 最近のコメント
• 最近のトラックバック

右サイドバー

• サイドバー上部拡張(@s.text_side0)
• Infomartion
• 検索
• カテゴリ一覧
• サイドバー下部拡張(@s.text_side1)
• System Info.