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

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

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

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

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

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

そう!「border-radius」です!

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

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

これに以下のCSSを

以上。

ここからがダイジ!

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

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

まとめ

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

更新

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

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク