横型カレンダーの設置 # 19,Dec,2006 Tuesday - 15:07 # |[ブログカスタマイズ]テンプレート

ダラダラと長いサイドバーへの対策として横型カレンダーを設置しました。

実際、カレンダーって見ないですよね？
本来のカレンダーの使い方をしている人なんて、ほとんどいないんじゃないかなぁ？

それで、横型でも良いかと思いました。
この方がずうーっと省スペース！

ただ、土曜日と日曜日には色をつけたかったかも。。。

でも、やり方わからない。。。orz

まずは、HTMLに以下の記述をします。

実際に入れたい場所を選んで記述すれば良いです。
私の場合は、タイトルブロックの下へ記述してます。

<div id="CalendarBlock">
<div class="Calendar">
<a href="<!--$plugin_calendar_prev_link-->">＆laquo;</a>　　※1
<spacer size="10" type="horizontal">　　※2
<!--$plugin_calendar_now_year-->.
<!--$plugin_calendar_now_mon-->.
<spacer size="10" type="horizontal">　　※2
<!--plugin_calendar_date-->
<!--$calendar_date_day-->＆nbsp;
<!--/plugin_calendar_date-->
<a href="<!--$plugin_calendar_next_link-->">＆raquo;</a>　　※3
</div>
</div>

※1…前月にリンクしている記号ですが、お好きなものでOKです
※2…デザインのバランスが取れなかったのでスペースを挟んでますが、もっとスマートな設定があると思います（汗
※3…翌月にリンクしている記号ですが、お好きなものでOKです

横型カレンダーを配置したブロックのid="CalenderBlock"とカレンダーそのもののclass="Clender"の表示設定をスタイルシートで行います。
記述は以下の通りです。

/**************************
横型カレンダーのデザイン設定
**************************/
#CalendarBlock {
width: 580px;
height: auto;
margin: 0 0 0 220px;
padding: 5 0 5 0px;
background-color: #fff;
overflow:visible;
}

.Calendar {
color: #000;
font-weight: nomal;
font-style: nomal;
font-size: 10px;
font-family:Helvetica,monospace;　　※1
}

※1…フォントは好みで設定して下さい。無くてもOKです。

上記のスタイルシートの記述の数値を変えれば、おおよそのブログにマッチするはずです。