FC2ブログのテンプレート工房

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)";

関連記事

• FC2ブログ拍手の位置を変更 (2009/09/28)
• なんでもスクロールを横に２つ並べる (2009/09/26)
• スクロールバー色分け用解説図 (2009/09/23)
• 横カレンダーの今日「当日」のスタイルを変えて装飾する (2009/09/22)
• 検索フォームの検索ボタンを画像にする (2009/09/21)
• コメント欄の不必要な項目を消す (2009/09/12)
• 日別表示画面の便利ナビに日付を表示 (2009/09/12)