小粋空間  -  a cheap joke and a play on words site

休日表示付リアルタイムカレンダー for livedoor ブログ

livedoor ブログのカレンダーに土・日・休日・本日を表示するカスタマイズです。ここでは公開テンプレートを利用したカスタマイズをご紹介していますが、他のテンプレートでも利用可能です。 スクリーンショットは公開テンプレートに設定した完成例です。また実験サイトにも設置しておりますので、動作をお試しください。

１．テンプレートの設定

１．１ livedoor Blog（無料版）の場合

トップページ／個別記事ページ／カテゴリアーカイブ／月別アーカイブの各テンプレートの </body> の前に下記のリストを貼り付けます。

<script type="text/javascript">
var currentYear;
var currentMonth;
var currentDay;
function setCurrentDate() {
  data = new Date();
  currentYear = data.getYear();
  currentYear = (currentYear < 2000) ? currentYear + 1900 : currentYear;
  currentMonth = data.getMonth() + 1;
  currentDay = data.getDate();
}
function isToday(year, month, day) {
  if (year == currentYear && parseInt(month,10) == currentMonth && day == currentDay) {return true;}
  return false;
}
function isSaturday(year, month, day) {
  var week = new Date(year, month - 1, day).getDay();
  if (week == 6) {return true;}
  return false;
}
function isHoliday(year, month, day) {
  var week = new Date(year, month - 1, day).getDay();
  if (week == 0) {return true;}
  switch(parseInt(month,10)) {
  case 1:
  if (day == 1) {return true;}
  if (day == 2 && isSunday(year, month, 1)) {return true;}
  if (day == (getFirstMonday(year, month) + 7)) {return true;}
  break;
  case 2:
  if (day == 11) {return true;}
  if (day == 12 && isSunday(year, month, 11)) {return true;}
  break;
  case 3:
  if(year > 1979 && year < 2100) {
    if (day == parseInt(20.8431 + 0.242194 * (year - 1980) - parseInt((year - 1980) / 4))) {
      return true;
    }
  }
  break;
  case 4:
  if (day == 29) {return true;}
  if (day == 30 && isSunday(year, month, 29)) {return true;}
  break;
  case 5:
  if (day == 3 || day == 4 || day == 5) {return true;}
  if (day == 6 && (isSunday(year, month, 3) ||
    isSunday(year, month, 4) ||
    isSunday(year, month, 5))) {
    return true;
  }
  break;
  case 7:
  if (day == (getFirstMonday(year, month) + 14)) {return true;}
  break;
  case 9:
  if (day == (getFirstMonday(year, month) + 14)) {return true;}
  if(year > 1979 && year < 2100) {
    if (day == parseInt(23.2488 + 0.242194 * (year - 1980) - parseInt((year - 1980) / 4))) {
      return true;
    }
  }
  break;
  case 10:
  if (day == (getFirstMonday(year, month) + 7)) {return true;}
  break;
  case 11:
  if (day == 3 || day == 23) {return true;}
  if (day == 4 && isSunday(year, month, 3)) {return true;}
  if (day == 24 && isSunday(year, month, 23)) {return true;}
  break;
  case 12:
  if (day == 23) {return true;}
  if (day == 24 && isSunday(year, month, 23)) {return true;}
  break;
  }
  return false;
}
function isSunday(year, month, day) {
  var week = new Date(year, month - 1, day).getDay();
  if (week == 0) {return true;}
  return false;
}
function getFirstMonday(year, month) {
  var monday;
  for(monday = 1; monday < 8; monday++) {
    if(new Date(year, month - 1, monday).getDay() == 1) {break;}
  }
  return monday;
}
function setWeekendAndHoliday() {
  var year = 0;
  var month = 0;
  var elements = document.getElementsByTagName("div");
  for (i = 0; i < elements.length; i++) {
    if(elements[i].getAttribute("className") == 'calendarhead' ||
      elements[i].getAttribute("class") == 'calendarhead') {
      var href = elements[i].childNodes[0].getAttribute('href');
      year = href.replace(/^.*(\d\d\d\d)-\d\d.html$/gi, "\$1");
      month = href.replace(/^.*\d\d\d\d-(\d\d).html$/gi, "\$1");
      month = parseInt(month,10) + 1;
      if (month == 13) {
        year = parseInt(year,10) + 1;
        month = 1;
      }
    }
  }
  if (!(year && month)) {return;}
  var table = document.getElementsByTagName('table');
  var element;
  for (i = 0; i < table.length; i++) {
  if(table[i].getAttribute("className") == 'caltbl calendartable' ||
    table[i].getAttribute("class") == 'caltbl calendartable'){
    element = table[i];
    var spans = element.getElementsByTagName("span");
    var day;
    for (i = 0; i < spans.length; i++) {
      if (spans[i].parentNode.nodeName == "TD") {
        if(spans[i].innerHTML.indexOf("href") != -1){
          day = spans[i].getElementsByTagName("a")[0].innerHTML;
        } else {day = spans[i].innerHTML;}
        if (isHoliday(year, month, day)) {
          spans[i].setAttribute('class', 'holiday');
          spans[i].setAttribute('className', 'holiday');
        } else if(isSaturday(year, month, day)) {
          spans[i].setAttribute('class', 'saturday');
          spans[i].setAttribute('className', 'saturday');
        }
        if (isToday(year, month, day)) {
          spans[i].parentNode.setAttribute('class', 'today');
          spans[i].parentNode.setAttribute('className', 'today');
        }
      }
    }
  }
  }
}
setCurrentDate();
setWeekendAndHoliday();
</script>

１．２ livedoor Blog PRO / livedoor Blog BUSINESS の場合

上記リストから script 要素の開始・終了タグと

setCurrentDate();
setWeekendAndHoliday();

を削除したものを外部ファイル「dayChecker.js」という名称で保存・アップロードしてください。

また、トップページ／個別記事ページ／カテゴリアーカイブ／月別アーカイブの各テンプレートの <head>～</head> の間に下記のタグを貼り付けます。

<script type="text/javascript" src="[アップロードしたURL]/dayChecker.js"></script>

さらに、

<script type="text/javascript">
setCurrentDate();
setWeekendAndHoliday();
</script>

を、トップページ／個別記事ページ／カテゴリアーカイブ／月別アーカイブの各テンプレートの </body> の前に設定します。

２．CSS修正

下記のセレクタをスタイルシートに追加してください。

２．１ 公開テンプレートの場合

下記のセレクタ（青色）を追加してください。

.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

２．２ 他のデザインの場合

.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

2006.01.08 追記
1月分のカレンダー表示が正常に行えないバグがありましたのでスクリプトを修正しました。

function setWeekendAndHoliday() {

if (month == 1) {year = parseInt(year,10) + 1;}

if (month == 13) {year = parseInt(year,10) + 1; month = 1;}

<IfDateChanged>
<h2 class="date"><$ArticleDate$></h2>
</IfDateChanged>

<IfDateChanged>
<h2 class="date" id="<$ArticleDateTag$>"><$ArticleDate$></h2>
</IfDateChanged>

.today {
    display: block;
    border: 1px solid #444444;
}

.saturday, .saturday a:link, .saturday a:visited,
.sunday, .holiday, .holiday a:link, .holiday a:visited {
    font-size:11px;
}