忍者ブログ
<< | 2017年06月 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | >>

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Posted by  at 21:01:12 JST | Category: 
Comments [] | Trackbacks [] | del.icio.us はてなブックマーク icon technorati icon AddClips

忍者ブログ版休日表示カレンダー

現在このサイトでは横並びのカレンダーと通常の形状のカレンダーを表示させていてちょっとヘンな状況だったりしますが、これには訳がありまして、これ、ちゃんと休日を表示するカレンダーだったりします。


今この記事を書いている8月は祝祭日が無いので全然目立ちませんが、7月や9月等を表示させるとちょっと感動しますよ。


この休日の色表示に関しては、BlogPeopleでもリンクさせて頂いております、小粋空間さんで公開されているJavascriptを改造して利用させて頂いております。

参考にさせて頂いた記事は休日表示付リアルタイムカレンダー for FC2ブログ休日表示付きリアルタイムカレンダー(月送り・横型) for Movable Typeです。本当に有難うございました。


通常の形状の物はFC2ブログ用として公開されている物、横型の物はMovableType用として公開されている物を夫々一部手直しして利用させて頂いております。


今回忍者ブログ版と銘打っていますが、当方では未確認ですがFC2ブログ等でもHTMLの独自タグの部分を手直しして頂ければ理論上導入可能な筈ですので、宜しければご参考にして頂ければと思います。


また、当方はJavascriptに関しては完全にド素人ですので、おかしな記述・説明等を行っている部分もあるかと思いますが、それらの事で何かお気付きの点や指摘事項等がありましたらお気軽にコメント欄等でご指摘頂けます様にお願い致します。


詳細な導入方法や関数仕様等につきましては小粋空間さんの当該記事や関連記事に詳しく記載されていますのでここでは割愛させて頂き、修正したポイント等のみを抜粋してご説明させて頂きます。ここでは一から説明しない事でここの記述だけでは理解し辛い部分があるかと思いますが、当方のオリジナルのネタでは無く、かなりの部分を小粋空間さんにて公開されている記事等を参考にさせて頂いておりますので、オリジナルを尊重すべくこの様な形態を採らせて頂いています。何卒ご了承下さい。


尚、当方の記事の記載内容に起因する、ビギナーレベルの疑問、質問等を小粋空間さんに直接お問い合わせされる様な行為はお控え頂きたく思います。


【Javascriptの修正部分等】

・通常型カレンダーと併用可能にする為、横型カレンダーの設定用関数名を変更。 (setWeekendAndHoliday → setLCWeekendAndHoliday)。

・通常型カレンダーの設定用関数 (setWeekendAndHoliday) にて、tableに設定されているsummaryを読み取る処理をHTML上で出現する最初の1番目のtableだけを決め打ちで処理するのでは無く、全てのtableのsummaryを読み取り、その上でsummaryの設定値がYYYY/MM形式の場合のみ処理する様に修正。

・通常型カレンダーの設定用関数 (setWeekendAndHoliday) にて、当年/当月の値をパラメータ渡しにする様に変更。

・dayChecker関数の呼び出し部分を夫々の設定用関数内に記述する様に変更。


修正の一番の肝は2番目の部分で、この変更を行わないと現在使用しているテンプレートの様にHTMLでの記述順が中央の記事か書かれたカラムが先に書かれて、その後に左右のサイドバー部分が書かれる様に記述されている場合等で、かつコメント記入欄等の様な部分でtableレイアウトを用いている場合に、記事の詳細表示等を行うと通常型カレンダーがHTMLのマークアップ順で必ずしも1番目のtableとはならず、その結果としてカレンダーの色の設定が行われない不具合が見受けられましたので、その対処として全てのtableについて処理対象とする様に修正しました。


ちなみに今このブログで双方の形状のカレンダーで週末に記事が書き込まれている場合に色が設定される/されないの差異がありますが、この事は今の所まだ私も詳しく調べていないのでなんとも言えませんが、恐らく小粋空間さんの関連記事の78番目のコメントでirukaさんが指摘されている修正を行う事で回避される筈だと思います。私も近く修正する予定です。もしかして別の部分で私の設定にミスがあるのかも知れませんが。


以下に忍者ブログにおける夫々の形状のカレンダーのHTMLサンプルソースを記載します。


【横並び型休日表示カレンダーのHTML記述】

<!-- 横並び型休日表示カレンダー開始 -->
<div id="line_calendar">
<a href="<!--$plugin_calendar_prev_link-->" title="<!--$plugin_calendar_prev_year-->年<!--$plugin_calendar_prev_mon-->月の記事一覧表示へ"><<</a> | <a href="<!--$g_url-->Date/<!--$plugin_calendar_now_year--><!--$plugin_calendar_now_mon-->/" title="<!--$plugin_calendar_now_year-->年<!--$plugin_calendar_now_mon-->月の記事一覧表示へ"><!--$plugin_calendar_now_year-->年<!--$plugin_calendar_now_mon-->月</a> | <!--plugin_calendar_date--><span class="day"><!--$calendar_date_day--></span> <!--/plugin_calendar_date-->| <a href="<!--$plugin_calendar_next_link-->" title="<!--$plugin_calendar_next_year-->年<!--$plugin_calendar_next_mon-->月の記事一覧表示へ">>></a>
</div>
<script type="text/javascript">
<!--
setLCWeekendAndHoliday(<!--$plugin_calendar_now_year-->,<!--$plugin_calendar_now_mon-->);
//-->
</script>
<!-- 横並び型休日表示カレンダー終了 -->

【通常型休日表示カレンダーのHTML記述】

<!-- 休日表示カレンダー開始 -->
<div class="calendar">
<table summary="<!--$plugin_calendar_now_year-->/<!--$plugin_calendar_now_mon-->">
<caption class="calendarhead"><a href="<!--$plugin_calendar_prev_link-->" title="<!--$plugin_calendar_prev_year-->年<!--$plugin_calendar_prev_mon-->月の記事一覧表示へ"><<</a> | <a href="<!--$g_url-->Date/<!--$plugin_calendar_now_year--><!--$plugin_calendar_now_mon-->/" title="<!--$plugin_calendar_now_year-->年<!--$plugin_calendar_now_mon-->月の記事一覧表示へ"><!--$plugin_calendar_now_year-->年<!--$plugin_calendar_now_mon-->月</a> | <a href="<!--$plugin_calendar_next_link-->" title="<!--$plugin_calendar_next_year-->年<!--$plugin_calendar_next_mon-->月の記事一覧表示へ">>></a></caption>
<tr>
<th abbr="Sunday"><span class="calendar"><span class="holiday">Sun</span></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><span class="saturday">Sat</span></span></th>
</tr>
<!--plugin_calendar-->
<tr>
<td class="day"><!--$calendar_sun--></td>
<td class="day"><!--$calendar_mon--></td>
<td class="day"><!--$calendar_tue--></td>
<td class="day"><!--$calendar_wed--></td>
<td class="day"><!--$calendar_thu--></td>
<td class="day"><!--$calendar_fri--></td>
<td class="day"><!--$calendar_sat--></td>
</tr>
<!--/plugin_calendar-->
</table>
</div>
<script type="text/javascript">
<!--
setWeekendAndHoliday(<!--$plugin_calendar_now_year-->,<!--$plugin_calendar_now_mon-->);
//-->
</script>
<!-- 休日表示カレンダー終了 -->

以下に当方にてカスタマイズした夫々の形状のカレンダーの色設定スクリプトを記載します。


【横並び型休日表示カレンダーの色設定スクリプト】

// 休日表示カレンダー色設定スクリプト
// 横型カレンダー用 MT用改
function setLCWeekendAndHoliday( year, month ) {
    var element = document.getElementById( 'line_calendar' );
    var spans = element.getElementsByTagName( 'span' );
    var day;
    for ( i = 0; i < spans.length; i++) {
        if ( ( spans[i].getAttribute( 'class' ) == 'day' || spans[i].getAttribute( 'className' ) == 'day' ) ) {
            if ( spans[i].innerHTML.indexOf( "href" ) != -1) {
                day = spans[i].getElementsByTagName( "a" )[0].innerHTML;
            } else {
                day = spans[i].innerHTML;
            }
            var dc = new dayChecker();                      // dayChecker()を実行
            if ( dc.isHoliday( year, month, day ) ) {
                if ( dc.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 ( dc.isSaturday( year, month, day ) ) {
                if ( dc.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 ( dc.isToday( year, month, day ) ) {
                spans[i].setAttribute( 'class', 'today' );
                spans[i].setAttribute( 'className', 'today' );
            }
        }
    }
}

【通常型休日表示カレンダーの色設定スクリプト】

// 休日表示カレンダー色設定スクリプト
// 通常型カレンダー用 FC2用改
function setWeekendAndHoliday( y, m ) {
    var elements = document.getElementsByTagName( "table" );
    // 配列順序0のみを決め打ちで処理するのを止めて、summary内容をチェックして処理する方法に変更。
    for ( j = 0; j < elements.length; j++ ) {
        var element = elements[j].getAttribute( "summary" );
        var year = element.split( "/" )[0];
        var month = element.split( "/" )[1];
        if ( !( year == y && month == m ) ) {
            continue;
        }
        var spans = elements[j].getElementsByTagName( "td" );
        var day;
        for ( i = 0; i < spans.length; i++) {
            if (spans[i].getAttribute( "class" ) == "day" || spans[i].getAttribute( "className" ) == "day" ) {
                if ( spans[i].innerHTML.indexOf( "href" ) != -1 ) {
                    day = spans[i].getElementsByTagName( "a" )[0].innerHTML;
                } else {
                    day = spans[i].innerHTML;
                }
                var dc = new dayChecker();                      // dayChecker()を実行
                if ( dc.isHoliday( year, month, day ) ) {
                    if ( dc.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 ( dc.isSaturday( year, month, day ) ) {
                    if ( dc.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' );
                    }
                }
                if ( dc.isToday( year, month, day ) ) {
                    spans[i].setAttribute( 'class', 'today' );
                    spans[i].setAttribute( 'className', 'today' );
                }
            }
        }
    }
}

上記の2関数で呼び出しているdayChecker()は小粋空間さんで頒布されているdayChecker.js内に含まれている関数です。

上記の2関数は2006.08.03公開のdayChecker.js Ver1.05に合わせて動作確認しております。

dayChecker.jsにつきましては直接小粋空間さんから入手頂き、上記2関数をdayChecker.js内に追記して頂いて外部関数化して、それを<head>~</head>内から読み込ませる方法を取るのが最も良いのかと思います。

その上でカレンダー表示のHTMLタグの直後で色設定のJavascriptを実行してやる事で、ページを読み込んだ際にカレンダー自体の表示処理と色の設定処理が微妙にずれる事を極力防ぐ事が出来ます。

また、CSSでの各設定につきましては小粋空間さんにて記載されている通りの設定を頂く事で対応可能ですので、そちらをご参照下さい。

PR
Posted by suna77777 at 01:00:00 JST | Category: カスタマイズ
Comments [0] | Trackbacks [1] | del.icio.us はてなブックマーク icon technorati icon AddClips
コメント
コメントの投稿





コメント文字色:
絵文字入力:

トラックバック
小粋空間: 休日表示付リアルタイムカレンダー for FC2ブログ 休日表示用カレンダースクリプトdayChecker.jsファイルを ダウンロード 徒然日記―忍者ブログ版休日表示カレンダーの詳細表示 dayChecker.jsファイル一番最後にスクリプト追記 HTML記述など忍ブロ用の紹介がされてます ニンブロラボ. カレンダーの休日表示に 詳しいやり方が紹介されてます 通常型休日表示カレンダーは何故か休日に書いた記事の色が出てきませんでした それで、横型カレンダー...
Tracked on 2007.03.02 Friday 20:21:39 JST
from kisatonomori blog
トラックバックURL



投稿されたトラックバックは管理者の承認後に表示されます。

現在、当ブログでは英文のみのトラックバックは受け付けておりません。

Presently, with this blog has not accepted trackbacks only of English.

track word
track word ブログ SEO    
 
カレンダー
<< | 2017年06月 | >>
Sun Mon Tue Wed Thu Fri Sat
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30
プロフィール
HN:suna77777
性別:男性
職業:システムエンジニア
趣味:自作PC ネット閲覧 ペット飼育等

suna77777のテクノラティプロフィール

gmail

共有テンプレートご利用の方へ
拙作の共有テンプレートをご利用頂き誠にありがとうございます。
このブログにて拙作の共有テンプレートをご利用頂く上での注意事項やご説明、カスタマイズポイントの解説等のコンテンツを用意しておりますので、お目通し頂けます様、お願い申し上げます。

★★★ 現在公開中のテンプレート ★★★

Comfort Liquid 3column
Comfort Liquid 3column

見易さ・使い易さ等を重視した幅可変レイアウトの3カラムのテンプレートです。
プラグインの配置は左カラムが1、右カラムが2、最上部が3、中央カラムの記事の直上が4、中央カラムの記事の直下が5です。
通常、プラグインは左カラムと右カラムに配置して、他の部分にはフリーエリアを用いてアフィリエイトバナーを張り付けたりブログパーツを張り付けて使用する事を想定しています。
質問事項や不具合報告、要望事項等がありましたら当該記事のコメント欄、若しくは上記のメールアドレスまでお気軽にご連絡下さい。

★★★ ご連絡 ★★★

10/5にこれまでに見受けられた不具合等を修正したVer.1.3をリリースしました。
既に既存バージョンをお使い頂いている方にはお手数をお掛けしてしまい大変恐縮ですが、新たにVer.1.3をダウンロードし直して頂き、可能な限り差し替えてご利用頂けます様、お願い申し上げます。

★★★ Ver.1.1での修正内容 ★★★

1.IE7.0にてブログ内検索プラグインの表示が崩れる事象を修正。
2.エントリーナビゲーション/ナビゲーションバーの階層構造を適正化。
3.link relでのフィードの記述順を修正。

★★★ Ver.1.2での修正内容 ★★★

1.DOCTYPE宣言行の記述ミスを修正。
2.MacIEへの対策を強化。(MacIEでは一部を除きletter-spacingを適用しない様に修正)
3.ブログタイトルと説明文の表示に関する修正。(右マージンを適切に設定)
4.CSS内のコメントを修正。(line-breakとword-breakのコメントを修正)
5.タイトルの修正。(Liquidのスペルを修正)

★★★ Ver.1.3での修正内容 ★★★

1.InternetExplorerにてbrタグにletter-spacingが設定されていると連続する改行表示が正しく行われない事への対処。
アーカイブ
2008年2006年2006年2006年2006年2006年
最新記事
2008年02月01日2006年12月14日2006年12月06日2006年11月28日2006年11月21日2006年11月14日2006年11月06日2006年10月30日2006年10月23日2006年10月16日2006年10月09日2006年10月01日2006年10月01日2006年09月30日2006年09月29日2006年09月26日2006年09月25日2006年09月23日2006年09月21日2006年09月18日2006年09月16日2006年09月16日2006年09月12日2006年09月12日2006年09月09日
最新コメント
Comfort Liquid 3columnについてComfort Liquid 3columnのバージョンアップと2カラム版のリリースについてComfort Liquid 3columnについてComfort Liquid 3columnのバージョンアップと2カラム版のリリースについてComfort Liquid 3columnのバージョンアップと2カラム版のリリースについてComfort Liquid 3columnのバージョンアップと2カラム版のリリースについてComfort Liquid 3columnのバージョンアップと2カラム版のリリースについてComfort Liquid 3columnのバージョンアップと2カラム版のリリースについてComfort Liquid 3columnのバージョンアップと2カラム版のリリースについてComfort Liquid 3columnのバージョンアップと2カラム版のリリースについてとりあえずXHTML化してみました。suna(BlogPet)きょうは日本語を検索したいなぁ(BlogPet)Comfort Liquid 3columnについて英文を主体としたサイトで用いる場合の対処法(BlogPet)プラグインをXHTMLに準拠させる修正方法についてComfort Liquid 3columnについてComfort Liquid 3columnについてComfort Liquid 3columnについてこんな機能が欲しい in 忍者ブログ忍者ブログでリキッドレイアウトのテンプレートを作る場合の注意事項忍者ブログでリキッドレイアウトのテンプレートを作る場合の注意事項
最新トラックバック
忍者ブログ版休日表示カレンダー日本語検索可能な Technorati Searchlet の設置方法忍者ブログでリキッドレイアウトのテンプレートを作る場合の注意事項
BlogPeople
TBP 忍者ブログ
TBP blogカスタマイズ
フィード

RSS2.0フィード

del.icio.usに追加 テクノラティ お気に入りに追加

Add to Google

My Yahoo!に追加

Add to Windows Live


ATOMフィード

RSS0.91フィード

RSS1.0フィード

RSS2.0フィード

各種ブックマーク登録
 
Google 検索
Google 日本
 

Yahoo! JAPAN 検索
Yahoo! JAPAN
 
  


Live Search
Live Search
Technorati 検索
Technorati (US)
 

Blog Pet
QRコード
QRコード
feed meter
人気ブログランキング
ステータス
SEO Stats
カウンター
AdminControlMenu: AdminMenu | NewEntry | EditComment | EditTrackback