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

2013/9/17 css, WordPress

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

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

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

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

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

そう！「border-radius」です！

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

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

Default
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
32
33
34
35
36
37
38
39
40
<table id="wp-calendar">
<caption>2013年7月</caption>
<thead>
<tr>
<th scope="col" title="月曜日">月</th>
<th scope="col" title="火曜日">火</th>
<th scope="col" title="水曜日">水</th>
<th scope="col" title="木曜日">木</th>
<th scope="col" title="金曜日">金</th>
<th scope="col" title="土曜日">土</th>
<th scope="col" title="日曜日">日</th>
</tr>
</thead>
 
<tfoot>
<tr>
<td colspan="3" id="prev"><a href="#" title="2013年6月の投稿を表示">&laquo; 6月</a></td>
<td class="pad">&nbsp;</td>
<td colspan="3" id="next"><a href="#" title="2013年8月の投稿を表示">8月 &raquo;</a></td>
</tr>
</tfoot>
 
<tbody>
<tr><td><a href="#" title="">1</a></td><td>2</td><td>3</td><td>4</td><td><a href="#" title="">5</a></td><td>6</td><td>7</td>
</tr>
<tr>
<td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td><a href="#" title="">13</a></td><td>14</td>
</tr>
<tr>
<td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td>
</tr>
<tr>
<td><a href="#" title="">22</a></td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td>
</tr>
<tr>
<td>29</td><td>30</td><td>31</td>
<td class="pad" colspan="4">&nbsp;</td>
</tr>
</tbody>
</table>

これに以下のCSSを

Default
1
2
3
4
5
6
7
8
9
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;」と思いますので

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

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

まとめ

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

更新

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

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

, , 下山 光揮

スポンサーリンク