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




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

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

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

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

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

そう!「border-radius」です!

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

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

2013年7月
« 6月   8月 »
1234567
891011121314
15161718192021
22232425262728
293031  

これに以下の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

タイトルとURLをコピーしました