Blogger Calendar

もうすぐ、マルコ式ネット白書を書き始めて１年が経ちます。
既に１８０記事を超えているので、過去の記事を探すのが大変になってきました。
そこで、ようやくカレンダーを導入しようと考えて、Google先生に「Blogger カレンダー」という質問をしてみました。
すると、クリボウのBlogger入門というサイトで 詳しく解説されていたので早速、手順に従って導入。
結果はご覧の通り、見事カレンダーの設置ができた訳です。

JavaScriptCalendar を利用する
ふたつめは、JavaScriptCalendar（JSCalendar）を Blogger で使用する方法。Blogger に導入するのに参考にするのは、こちらのページ。

このカレンダーを導入すると、カレンダーから全てのページにアクセスできるようになる代わりに、月別アーカイブページが利用できなくなります。最初に知っておいてください。

それでは導入の方法を見ていきます。手順がたいへん多かったので、少し内容をまとめて手順を減らしています。

１．Blogger 管理画面「設定 ＞ フォーマット」から、「Date ヘッダー フォーマット」を「2006-02-10」形式にします。また、管理画面「設定 ＞ アーカイブ中」から、「アーカイブの頻度」を「日別」にします。

２．このページ右下の「1.0（download）」というリンクをクリック、ミラーサーバーを選んで JSCalendar をダウンロードし、解凍、出来たファイルを全て任意のサーバーにアップロードします。サーバーが用意できない場合も次に進んでください。

３．Blogger 管理画面「テンプレート」より、テンプレート head 要素内に、次のコードを貼り付けます。

<style type=”text/css”>@import url(“<$BlogURL$>/skins/aqua/theme.css”);</style>
<script type=”text/javascript” src=”<$BlogURL$>/calendar.js”></script>
<script type=”text/javascript” src=”<$BlogURL$>/lang/calendar-en.js”></script>
<script type=”text/javascript” src=”<$BlogURL$>/calendar-setup.js”></script>
<script type=”text/javascript”><!–

function calendar()
{
var archive = document.getElementById( ‘archive’ );
if( archive )
{
archive.style.display = ‘none’;
var notes = {};
var links = archive.getElementsByTagName( ‘a’ );
if( !links.length ) return;
var i, j, node, date, y, m, d;
for( i=0; i<links.length; i++ )
{
node = links[i];
date = node.innerHTML.split(‘-‘); // YYYY-MM-DD
y = parseInt( date[0], 10 ); if(!notes[y]) notes[y] = {};
m = parseInt( date[1], 10 ); if(!notes[y][m]) notes[y][m] = {};
d = parseInt( date[2], 10 ); notes[y][m][d] = node.href;
}
var dates = document.getElementsByTagName( ‘h2’ ), thisDate;
for( i=0; i<dates.length; i++ )
if( dates[i].className == ‘date-header’ )
{
var ymd = dates[i].innerHTML.split(‘-‘); // YYYY-MM-DD
thisDate = new Date( parseInt( ymd[0], 10 ),
parseInt( ymd[1], 10 )-1,
parseInt( ymd[2], 10 ) );
break;
}
top.notes = notes;
Calendar.setup(
{
weekNumbers : false,
step : 1, // show every year in the year menus
date : thisDate, // selected by default
flat : ‘calendar-container’, // div element
range : [ parseInt(links[0].innerHTML), y ],
showOthers : true, // show whole first/last week of month
flatCallback : dateChanged, // what to do on date selection
dateStatusFunc: disableDateP // which dates to show/hide how
});
}
}
// Returns true for all dates lacking a note, false or a css style for those having one.
// Exception: today does not return true, even if it lacks a note. (improves navigation)
function disableDateP( date, y, m, d )
{
var now = new Date;
if( (y == now.getFullYear()) &&
(m == now.getMonth()) &&
(d == now.getDate()) )
return false;
return noteFromDate( date ) ? false : true;
}
function noteFromDate( date )
{
var note = top.notes[date.getFullYear()] || {};
note = note[date.getMonth()+1] || {};
return note[date.getDate()];
}
function dateChanged( calendar )
{
if( calendar.dateClicked )
{
var note = noteFromDate( calendar.date );
if( note )
window.location = note;
}
}//–></script>
<style type=”text/css”><!–
#archive {display: none;}
#calendar-container {width:200px;}
–></style>

４．body 要素の開始タグを次のコードに変えます。

<body onload=”calendar()”>

５．現在アーカイブを表示している部分（archive-list クラスの div 要素もしくは ul 要素）を、次のコードに差し替え、設定を保存、ブログ全体を再構築します。

<div id=”archive”>
<ul class=”archive-list”>
<BloggerArchives>
<li><a href=”<$BlogArchiveUrl$>”><$BlogArchiveName$></a></li>
</BloggerArchives>
</ul>
</div>
<div id=”calendar-container”></div>

これで、JSCalendar の導入が完了です。

一応、クリボウのBlogger入門からの引用です。本来のものは赤字の部分に自分のサイトのURLを入れなければならない設定をしなければなりませんでしたが、面倒なので、Blogger側で設定したURLを呼び出すように、書き換えました。
これでも動作はちゃんとできますので、このままヘッダ部分に入れ込んでも大丈夫です。

ご参考までに・・・

返信を残す

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。