FCafe を運営するdanielさんが、カレンダーの今日「当日」を装飾した共有プラグイン「CalendArchive」を公開してくれています。
【参考記事】
FCafe カレンダー当日表示別法 このスクリプトを参考に、横カレンダーの今日「当日」のスタイルを変えて装飾するカスタマイズを紹介します。
このカスタマイズをする前に、横カレンダーを実装していることが前提になります。
ブログタイトル下に横カレンダーを入れる このHTMLに次の赤い箇所を加えてください。
<!--▼ 横カレンダー ▼--> <div class="line_calendar" id="line_calendar" > <a href="<%prev_month_link>"><%prev_year> <%prev_month></a> ≪ <!--calender2--> <span class="line_cal_day"><%days></span> <!--/calender2--> ≫ <a href="<%next_month_link>"><%next_year> <%next_month></a> </div> <!--▲ 横カレンダー ▲-->
そしてHTMLの</body>の上に、以下の記述を加えてください。
<script type="text/javascript"><!-- function line_calendarToday() { var D=new Date(); var T=">"+D.getDate()+"<"; if (D.getFullYear()==<%now_year> && D.getMonth()==<%now_month>-1){ var C=document.getElementById("line_calendar").getElementsByTagName("span"); for (i=0;i<C.length;i++) { if ( C[i].innerHTML.indexOf(T)>-1 || C[i].innerHTML == D.getDate() ) { /* ▼横カレンダーの「当日」のスタイル▼ */ C[i].style.background="#ffd700 "; /* 背景色 */ C[i].style.border="solid 1px #ffa500 "; /* 枠 (実線、太さ、色) */ C[i].style.color="#8b0000 "; /* 文字の色 */ C[i].style.padding="1px "; /* 文字から枠までの余白 */ /* ▲横カレンダーの「当日」のスタイル▲ */ }}}} line_calendarToday(); //--></script>
背景色等の各スタイル はお好みに合わせて設定してください。
スタイル設定が不必要なものがあれば、その行を削除してください。
このカスタマイズによりカレンダーを見て今日が何日なのか解りやすくなると思います。
【2009/09/25 追記】 上記 javascript を訂正しました。当日に記事を書くとスタイルが適用されない問題がありました。申しわけありません。以前の訂正前の javascriptは以下になります。<script type="text/javascript"><!-- function line_calendarToday() { var D=new Date(); if (D.getFullYear()==<%now_year> && D.getMonth()==<%now_month>-1) { var C=document.getElementById( "line_calendar" ).getElementsByTagName("span"); for (i=0;i<C.length;i++) { if ( C[i].innerHTML == D.getDate() ) { /* ▼横カレンダーの「当日」のスタイル▼ */ C[i].style.background="#ffd700 "; /* 背景色 */ C[i].style.border="solid 1px #ffa500 "; /* 枠 (実線、太さ、色) */ C[i].style.padding="1px "; /* 文字から枠までの余白 */ C[i].style.color="#8b0000 "; /* 日付の色 */ /* ▲横カレンダーの「当日」のスタイル▲ */ }}}} line_calendarToday(); //--></script>
【2009/10/21 追記】 背景に画像を設定したいときはこのように指定してください。C[i].style.backgroundImage="url(画像URL )";
関連記事