カレンダー部分の元のCSS記述
#calendar {

width:201px;
margin:0px;
padding-bottom:10px;
}
#calendar table {
width:100%;
padding-bottom:10px;
}
#calendar th {
font-weight:normal;
text-align:center;
}
.calendarhead {
padding:10px 0px 15px 0px;
font-weight:normal;

color:#9d8e87;
}
.calendarhead a{
color:#9d8e87;
}
.calendarhead .calendarday a{
color:#9d8e87;
text-decoration:none;
font-weight:normal;
}
.calendarday {
padding:3px;
font-size:10px;

color:#9d8e87;
text-align:center;
}
.calendarday a {
font-weight:normal;
color:#9d8e87;
text-decoration:underline;
}

 このブログではカレンダーを使っていなかったので
 一時的に表示してみます。
 ぬお!何だこのソースは!
<th abbr="Sunday" align="center" class="calendarday">日</th>
<th abbr="Monday" align="center" class="calendarday">月</th>
<th abbr="Tuesday" align="center" class="calendarday">火</th>
<th abbr="Wednesday" align="center" class="calendarday">水</th>
<th abbr="Thursday" align="center" class="calendarday">木</th>
<th abbr="Friday" align="center" class="calendarday">金</th>
<th abbr="Saturday" align="center" class="calendarday">土</th>
</tr>
<tr>
<td align="center" class="calendarday">&nbsp;</td>
<td align="center" class="calendarday">&nbsp;</td>
<td align="center" class="calendarday">1</td>
<td align="center" class="calendarday">2</td>
<td align="center" class="calendarday">3</td>
<td align="center" class="calendarday">4</td>
<td align="center" class="calendarday">5</td>

 ただでさえ重いtableを使っているというのに
 セルひとつひとつに中央寄せ指定付き。
 もしかしてCSS指定ではalignが反映されないブラウザとかが
 あるのでしょうか……?
 いいです。ウチの閲覧者の90%はIEです。CSSで指定します!
 …っていうか想像していたよりIE率が低かった…
 2008年に入ってからの私の二次創作サイトのブラウザ解析
 解析

 <table border="0" cellspacing="0" cellpadding="0" summary="Calendar">
 ↓
 [HTML]
 <table summary="Calendar">
 [CSS]
 table指定に
 border-collapse: collapse; を追加
 THとTDにもtext-align:center;を追加

 <th abbr="○○day" align="center" class="calendarday">
 ↓
 [HTML]
 abbrタグはどうしようかなーと思ったものの日本語表記でないので残しました
 <th abbr="○○day">
 [CSS]
 #calendar thに.calendardayの指定を追加
 ▼こんな具合で。
#calendar th {
font-weight:normal;
text-align:center;
}
.calendarday {
padding:3px;
font-size:10px;
color:#9d8e87;
text-align:center;

}

#calendar th {
font-weight:normal;
text-align:center;
padding:3px;
font-size:10px;
color:#9d8e87;
}
.calendarday {
padding:3px;
font-size:10px;
color:#9d8e87;
text-align:center;
}
 後はtd class="calendarday"を
 calendar tdにまとめてしまうなどして文字数を減らしてみる。
 ソース
修正前
<div id="calendar">
<table border="0" cellspacing="0" cellpadding="0" summary="Calendar">

<caption class="calendarhead"><span class="calendarday"><a href="http://mimawaka.seesaa.net/archives/200803-1.html">&lt;&lt;</a></span> <a href="http://mimawaka.seesaa.net/archives/200804-1.html">2008年04月</a> <span class="calendarday">&gt;&gt;</span></caption>
<tr>
<th abbr="Sunday" align="center" class="calendarday">日</th>
<th abbr="Monday" align="center" class="calendarday">月</th>
<th abbr="Tuesday" align="center" class="calendarday">火</th>
<th abbr="Wednesday" align="center" class="calendarday">水</th>
<th abbr="Thursday" align="center" class="calendarday">木</th>
<th abbr="Friday" align="center" class="calendarday">金</th>
<th abbr="Saturday" align="center" class="calendarday">土</th>
</tr>
<tr>
<td align="center" class="calendarday">&nbsp;</td>
<td align="center" class="calendarday">&nbsp;</td>
<td align="center" class="calendarday">1</td>
<td align="center" class="calendarday">2</td>
<td align="center" class="calendarday">3</td>
<td align="center" class="calendarday">4</td>
<td align="center" class="calendarday">5</td>

</tr>
<tr>
<td align="center" class="calendarday">6</td>
<td align="center" class="calendarday">7</td>
<td align="center" class="calendarday">8</td>
<td align="center" class="calendarday">9</td>
<td align="center" class="calendarday">10</td>
<td align="center" class="calendarday">11</td>
<td align="center" class="calendarday">12</td>

</tr>
<tr>
<td align="center" class="calendarday calendarday-a"><a href="http://mimawaka.seesaa.net/archives/20080413.html">13</a></td>
<td align="center" class="calendarday calendarday-a"><a href="http://mimawaka.seesaa.net/archives/20080414.html">14</a></td>
<td align="center" class="calendarday">15</td>
<td align="center" class="calendarday calendarday-a"><a href="http://mimawaka.seesaa.net/archives/20080416.html">16</a></td>
<td align="center" class="calendarday">17</td>
<td align="center" class="calendarday">18</td>
<td align="center" class="calendarday">19</td>

</tr>
<tr>
<td align="center" class="calendarday">20</td>
<td align="center" class="calendarday">21</td>
<td align="center" class="calendarday">22</td>
<td align="center" class="calendarday">23</td>
<td align="center" class="calendarday">24</td>
<td align="center" class="calendarday">25</td>
<td align="center" class="calendarday">26</td>

</tr>
<tr>
<td align="center" class="calendarday">27</td>
<td align="center" class="calendarday">28</td>
<td align="center" class="calendarday">29</td>
<td align="center" class="calendarday">30</td>
<td align="center" class="calendarday">&nbsp;</td>
<td align="center" class="calendarday">&nbsp;</td>
<td align="center" class="calendarday">&nbsp;</td>

</tr>
</table>
</div>


修正後
<div id="calendar">
<table summary="Calendar">

<caption><a href="http://mimawaka.seesaa.net/archives/200803-1.html">&lt;&lt;</a> <a href="http://mimawaka.seesaa.net/archives/200804-1.html">2008/04</a> &gt;&gt;</caption>
<tr>
<th abbr="Sunday">dim</th>
<th abbr="Monday">lun</th>
<th abbr="Tuesday">mar</th>
<th abbr="Wednesday">mer</th>
<th abbr="Thursday">jeu</th>
<th abbr="Friday">ven</th>
<th abbr="Saturday">sam</th>
</tr>

<tr>
<td>*&nbsp;</td>
<td>*&nbsp;</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>

<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>

<tr>
<td><a href="http://mimawaka.seesaa.net/archives/20080413.html">13</a></td>
<td><a href="http://mimawaka.seesaa.net/archives/20080414.html">14</a></td>
<td>15</td>
<td><a href="http://mimawaka.seesaa.net/archives/20080416.html">16</a></td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>

<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>

<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>*&nbsp;</td>
<td>*&nbsp;</td>
<td>*&nbsp;</td>
</tr>
</table>
</div>
ちったぁ軽くなったと信じたい。
CSS。
#calendar {
font-family:Georgia,"Courier New",sans-serif;
padding-bottom:20px;
}
#calendar table {
width:100%;
border-collapse: collapse;
text-align : center;
font-size:10px;
color:#9d8e87;
background-color : #fff;
}
#calendar caption{
padding:10px 0px 15px 0px;
font-size : 12px;
}
#calendar th{
font-weight:normal;
padding:3px;
}
#calendar td {
padding:3px;
}

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。