TopMovable Typeカスタマイズカレンダー > 2006年9月
2006年9月22日

月送りカレンダー(簡易版・横型・休日表示付き)

September 22,2006 1:39 AM
Tag:[, , ]
Permalink
月送りカレンダー(簡易版・横型・休日表示付き)月別アーカイブページに表示された横型カレンダーに月送り用のリンクをつけるカスタマイズです。
このカスタマイズは「月送りカレンダー(簡易版・休日表示付き)」を横型用にアレンジしたものです。ご利用に際しては「月送りカレンダー(簡易版)」も併せてご覧ください。

注:本カスタマイズは日付アーカイブテンプレートのみが対象です。

1.休日表示用カレンダースクリプトのダウンロード

下記のリンク先にある dayChecker.js をクリックして休日表示用カレンダースクリプトをダウンロードしてください。

download

2.休日表示用カレンダースクリプトのアップロード

ダウンロードした dayChecker.js を index.html と同じディレクトリにアップロードしてください。

3.テンプレートの修正1(スクリプトのインクルード)

テンプレートの <head>~</head> の間に下記のタグを追加します。

<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

4.テンプレートの修正2(カレンダー表示タグの設定)

日付アーカイブテンプレート編集画面を開き、横型カレンダーを表示したい部分に下記のカレンダー表示用タグを追加してください。

<div id="calendar" title="<$MTArchiveDate format="%Y/%m"$>">
<span class="calendarHead">
<MTArchivePrevious><a href="<$MTArchiveLink$>">&#65308;</a> </MTArchivePrevious><$MTArchiveDate format="%B %Y" language="en"$><MTArchiveNext> <a href="<$MTArchiveLink$>">&#65310;</a></MTArchiveNext> |
</span>
<MTCalendar month="this">
<MTCalendarIfEntries><span><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><span><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank><MTElse></span></MTElse></MTCalendarIfBlank>
</MTCalendar>
</div> 
 
<script type="text/javascript">
function setWeekendAndHoliday(y,m) {
    var element = document.getElementById("calendar");
    var title = element.getAttribute("title");
    var year = title.split("/")[0];
    var month = title.split("/")[1];
    if(!(year == y && month == m)){
        return;
    }
    var spans = element.getElementsByTagName("span");
    var day;
    for (i = 0; i < spans.length; i++) {
        if (!(spans[i].getAttribute('class') == 'calendarHead' ||
            spans[i].getAttribute('className') == 'calendarHead')) {
            if(spans[i].innerHTML.indexOf("href") != -1){
                day = spans[i].getElementsByTagName("a")[0].innerHTML;
            } else {
                day = spans[i].innerHTML;
            }
            if (isHoliday(year, month, day)) {
                if (isToday(year, month, day)) {
                    spans[i].setAttribute('class', 'tholiday');
                    spans[i].setAttribute('className', 'tholiday');
                } else {
                    spans[i].setAttribute('class', 'holiday');
                    spans[i].setAttribute('className', 'holiday');
                }
            } else if(isSaturday(year, month, day)) {
                if (isToday(year, month, day)) {
                    spans[i].setAttribute('class', 'tsaturday');
                    spans[i].setAttribute('className', 'tsaturday');
                } else {
                    spans[i].setAttribute('class', 'saturday');
                    spans[i].setAttribute('className', 'saturday');
                }
            } else if (isToday(year, month, day)) {
                spans[i].setAttribute('class', 'today');
                spans[i].setAttribute('className', 'today');
            }
        }
    }
}
setCurrentDate();
setWeekendAndHoliday('<$MTArchiveDate format="%Y"$>','<$MTArchiveDate format="%m"$>');
</script>

参考までに、タイトルバナー下に上記リストを挿入する場合の設定位置を示します。

デフォルトテンプレートの場合

      :
<div id="banner">
   <div id="banner-inner" class="pkg">
      <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
      <h2 id="banner-description"><$MTBlogDescription$></h2>
   </div>
</div>
 
---- ここに設定 -----
 
<div id="pagebody">
   <div id="pagebody-inner" class="pkg">
      :

公開テンプレートの場合

      :
<!-- タイトル -->
<div id="banner">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<div id="banner-description"><$MTBlogDescription$></div>
</div>
 
---- ここに設定 -----
 
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
      :

5.CSS修正

下記のCSSを styles-site.css に追加してください。
ここでは公開テンプレートに設定する場合のスタイルを示しますが、デフォルトテンプレートでも適用可能です。

#calendar { 
    margin-top: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid #666699;
    font-size:10px;
    text-align: center; 
} 
.calendarHead { 
    color:#444444; 
    padding-right: 5px;
} 
.today { 
    display: inline;
    padding: 0 1px;
    border : 1px solid #444444; 
} 
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}
.tholiday {
    border: 1px solid #444444;
    color: #e50003;
}
.tholiday a:link,
.tholiday a:visited {
    color: #e50003;
}
.tsaturday {
    border: 1px solid #444444;
    color: #0000ff;
}
.tsaturday a:link,
.tsaturday a:visited {
    color: #0000ff;
}

デフォルトテンプレートの場合は赤色部分を削除するといい具合になります。

#calendar { 
    margin-top: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid #666699;
    font-size:10px;
    text-align: center; 
} 
      :

公開テンプレートご利用の方は、styles-site.css に設定されている下記の設定を削除してください。

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #444444;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
.calendar {
    text-align: center;
    color: #444444;
    background: none;
}
.calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
.calendar th {
    padding-bottom: 3px;
    font-size: 8px;
    width: 23px;
}
.calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}
.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}
.holiday {
    color: #e50003;
}
.saturday {
    color: blue;
}
Comments [2] | Trackbacks [1]
2006年9月16日

月送りカレンダー(簡易版・休日表示付き)

September 16,2006 12:10 AM
Tag:[, , ]
Permalink

月別アーカイブページに表示されたカレンダーに、簡単に月送り用のリンクをつけるカスタマイズです。
このカスタマイズは「月送りカレンダー(簡易版)」に休日表示付きリアルタイムカレンダーを付与した改善版です。
またカスタマイズは日付アーカイブテンプレートのみが対象です。

1.休日表示用カレンダースクリプトのダウンロード

下記のリンク先にある dayChecker.js をクリックして休日表示用カレンダースクリプトをダウンロードしてください。

download

2.休日表示用カレンダースクリプトのアップロード

ダウンロードした dayChecker.js を index.html と同じディレクトリにアップロードしてください。

3.テンプレートの修正1(スクリプトのインクルード)

テンプレートの <head>~</head> の間に下記のタグを追加します。

<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

4.テンプレートの修正2(カレンダー表示タグの設定)

カレンダーを表示したい部分に下記のカレンダー表示用タグを追加してください。

4.1項および4.2項のリストを追加した後、管理画面にある「設定」→「公開」の順にクリックし、次ページの下にある「アーカイブのマッピング」で「日別」の左側にチェックをつけて保存し、再構築してください。これを行わないとカレンダーが表示されませんのでご注意ください。

4.1 デフォルトテンプレートの場合

<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="module-calendar module">
<h2 class="module-header"><MTArchivePrevious><a href="<$MTArchiveLink$>">&#8810;</a> </MTArchivePrevious>
<$MTCalendarDate format="%B %Y"$>
<MTArchiveNext> <a href="<$MTArchiveLink$>">&#8811;</a></MTArchiveNext></h2>
<div class="calendar">
<table id="calendarTable" summary="<$MTCalendarDate format="%Y/%m"$>">
<tr>
<th abbr="Sunday" class="sunday">Sun</th>
<th abbr="Monday">Mon</th>
<th abbr="Tuesday">Tue</th>
<th abbr="Wednesday">Wed</th>
<th abbr="Thursday">Thu</th>
<th abbr="Friday">Fri</th>
<th abbr="Saturday" class="saturday">Sat</th>
</tr>
 
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>
<!-- script -->
</MTIfArchiveTypeEnabled>

4.2 公開テンプレートの場合

<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTCalendarDate format="%Y/%m"$>">
<caption class="calendarhead">
<MTArchivePrevious><a href="<$MTArchiveLink$>">&#8810;</a> </MTArchivePrevious>
<$MTCalendarDate format="%B %Y"$>
<MTArchiveNext> <a href="<$MTArchiveLink$>">&#8811;</a></MTArchiveNext>
</caption>
<tr>
<th abbr="Sunday" class="sunday">Sun</th>
<th abbr="Monday">Mon</th>
<th abbr="Tuesday">Tue</th>
<th abbr="Wednesday">Wed</th>
<th abbr="Thursday">Thu</th>
<th abbr="Friday">Fri</th>
<th abbr="Saturday" class="saturday">Sat</th>
</tr>
 
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>
<!-- script -->
</MTIfArchiveTypeEnabled>

5.テンプレートの修正3(スクリプト追加)

休日表示カレンダースクリプトを起動するためのスクリプト

<script type="text/javascript">
function setWeekendAndHoliday(y,m) {
    var element = document.getElementById("calendarTable");
    var summary = element.getAttribute("summary");
    var year = summary.split("/")[0];
    var month = summary.split("/")[1];
    if(!(year == y && month == m)){
        return;
    }
    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('<$MTArchiveDate format="%Y"$>','<$MTArchiveDate format="%m"$>');
</script>

を、4.1項または4.2項の赤色で示した

<!-- script -->

の部分に挿入してください(赤色の行は削除してください)。

6.CSS修正

下記のセレクタを styles-site.css に追加してください。

6.1 デフォルトテンプレートの場合

初めてカレンダーをご利用になる場合はすべて追加し、すでにご利用の場合は today / sunday,holiday / saturday のみ追加してください。

.calendar {
    margin: 5px 0;
    text-align: center;
}
.calendarhead {
    padding-bottom: 5px;
    font-size: 9px;
    letter-spacing: 0.2em;
}
.calendar table {
    padding: 0;
    border-collapse: collapse;
}
.calendar th {
    padding-bottom: 3px;
    font-size: 9px;
    width: 23px;
}
.calendar td {
    padding: 2px 0;
    font-size: 10px;
    line-height: 120%;
}
.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;
}

6.2 公開テンプレートの場合

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

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

また現在設定されているCSSより、下記の color プロパティ(赤色)を削除してください。これは本日と土日祝日が重複した時に土日祝日の色を優先させるためです。

.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}
Comments [12] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3