[WordPress CSS]WordPressのカレンダーウィジェットを可愛くする（おじさんが）

桜島が大変なことになってますね！
ネットでは鹿児島市民にとっては日常でしょ？とか言われていますが、そんなことないですよ！
若干、500回爆発記念で5000mの噴煙てとこでプチお祭りです下山です。（※ボクの中だけでのお祭りです。）

さてさて毎度CSSに頼りっきりですが、今回もCSSネタです。

女子受けするサイトを作れコラッ。
ということに頑張りました。

そもそも41のオッサンにお願いすることではないと思うんだ。

コンセプトは角丸。角丸を排除したフラットデザインが流行る中、角丸です。
もうお気づきですね。

そう！「border-radius」です！

まずはデモもどうぞ。
WordPressのカレンダーを可愛くする

WordPressのウィジェットでカレンダーを表示すると以下のようなhtmlになります。

	
2013年7月
	

	

		
月
		
火
		
水
		
木
		
金
		
土
		
日
	
	

	

	

		
« 6月
		
 
		
8月 »
	
	

	

	
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
26
27
28
	
	

		
29
30
31
		
 
	
	

これに以下のCSSを

table#wp-calendar th, table#wp-calendar td, table#wp-calendar caption {
	border:1px solid #f03;
	text-align:center;
	padding:5px;
	border-radius:15px;
}
table#wp-calendar caption {background:#f30; color:#fff;}
table#wp-calendar th {color:#f03;}
table#wp-calendar td.pad {border:none;}

以上。

ここからがダイジ！

thやtdの角を丸くする場合、tableに「border-collapse:collapse;」が指定してあると「border-radius」は効きません。
ほとんどのサイトが「border-collapse:collapse;」と思いますので

table#wp-calendar {border-collapse:separate;}

を追加してあげるとしっかり可愛い角丸テーブルの出来上がりです。

まとめ

CSSってブラウザ毎での解釈が違っててイライラしちゃいますけど、それよりもプロパティ間の相違関係が結構複雑なんですよね。
この辺りを理解していくと楽しくなるかもね。

更新

プレフィックスを外しました。2013-09-17