桜島が大変なことになってますね!
ネットでは鹿児島市民にとっては日常でしょ?とか言われていますが、そんなことないですよ!
若干、500回爆発記念で5000mの噴煙てとこでプチお祭りです下山です。(※ボクの中だけでのお祭りです。)
さてさて毎度CSSに頼りっきりですが、今回もCSSネタです。
女子受けするサイトを作れコラッ。
ということに頑張りました。
そもそも41のオッサンにお願いすることではないと思うんだ。
コンセプトは角丸。角丸を排除したフラットデザインが流行る中、角丸です。
もうお気づきですね。
そう!「border-radius」です!
まずはデモもどうぞ。
WordPressのカレンダーを可愛くする
WordPressのウィジェットでカレンダーを表示すると以下のようなhtmlになります。
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月の投稿を表示">« 6月</a></td> <td class="pad"> </td> <td colspan="3" id="next"><a href="#" title="2013年8月の投稿を表示">8月 »</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"> </td> </tr> </tbody> </table> |
これに以下のCSSを
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;」と思いますので
1 |
table#wp-calendar {border-collapse:separate;} |
を追加してあげるとしっかり可愛い角丸テーブルの出来上がりです。
まとめ
CSSってブラウザ毎での解釈が違っててイライラしちゃいますけど、それよりもプロパティ間の相違関係が結構複雑なんですよね。
この辺りを理解していくと楽しくなるかもね。
更新
プレフィックスを外しました。2013-09-17