かえでのWebログ

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

adiary用テーマ「lfdiary」Rev0.91をリリースしました。

[album:adiary/theme:lfdiary091.jpg]
ダウンロードはこちら

更新履歴 (Rev0.90_test1 -> 0.91)

開発環境をadiary snapshot 2006/09/01版(1.00β9test1)に。
最新版で表示が崩れないように変更しました。

新機能

• ストライプなテーブルに対応
• テーブル拡張クラスに対応
  • table.no-stripe
  • table.curb
• フォント装飾のためのクラス定義
  • .it, .italic
  • .bf, .bold
  • .u, .underline

表示関連の修正

• 土曜日かつ祝日の場合に背景色が赤くなるように対応
• 日記帳タイトル部を変更しました
• フッタ部にバージョン情報を表示
• 他、いろいろ修正

関連記事

詳細は以下の記事をご覧下さい

• lfdiary Rev0.90test1リリース

その他

lfdiaryテーマはFirefoxでの表示をお勧めします。

標準

チェス盤ライクに

ユーザースタイルシート

div.body table tr.odd td.odd {
	background-color:	white;
}

div.body table tr.odd td.even {
	background-color:	#d8ddff;
}

div.body table tr.even td.odd {
	background-color:	#d8ddff;
}

div.body table tr.even td.even {
	background-color:	white;
}

テーブルのソース

::curb
|::|odd|even|odd|even|odd|
|1|2|3|4|5|
|6|7|8|9|10|
|11|12|13|14|15|
|16|17|18|19|20|
|21|22|23|24|25|

adiary用テーマ「うみ」Rev1.00RC2をリリースしました。
ダウンロードはこちら

更新履歴 (Rev1.00RC1 -> RC2)

開発環境をadiary snapshot 2006/09/01版(1.00β8+)に。

新機能

• テーブル拡張クラスに対応
  • table.no-stripe
  • table.curb
• フォント装飾のためのクラス定義
  • .it, .italic
  • .bf, .bold
  • .u, .underline

curbクラステーブルの例

no-stripeクラステーブルの例

表示関連の修正

• 土曜日かつ祝日の場合に背景色が赤くなるように対応
• span.sanchor(セクションアンカー)の右側にマージンを取るようにした(0em -> 0.2em)
• 小見出しの左側パディング変更 (0em -> 0.25em)
• サイドバーの一項目ごとのマージンを修正(2em -> 1em)
• 日記帳タイトルについてたアレを外しました
• トラックバック部の表示調整(IE)
• システムメッセージの表示調整(IE)

関連記事

詳細は以下の記事をご覧下さい

• うみ Rev0.90test1リリース
• うみ Rev0.90test2リリース
• うみテーマのIEでの問題
• うみ Rev1.00RC1リリース

その他

うみテーマはFirefoxでの表示をお勧めします。

私が今後作成するテーマで採用しようと思っているテーブル関連のクラスです。

テーマ側でこれらのクラスが定義されていなくても害にはならないと思われますので、従来との互換性も問題ないと思われます。
独自拡張ですが、将来的にadiaryでオフィシャルに採用されるといいのですが。

table.no-stripe

β8以降でサポートされた奇数行と偶数行で背景色を変えることができるテーマで、あえて変えたくない場合に明示的にno-stripeクラスを指定することで従来のようなテーブルを描くことができるようにする。

table.curb

テーブルの外周をボーダーで囲いたい場合に指定する。