クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

> Blogger にもカレンダー

Blogger にもカレンダー

Posted at: 2006-02-10 10

追記: Blogger のカレンダー機能については、
クリボウの Blogger 入門: Blogger にもカレンダー
にまとめてあります。最新の情報はそちらをご覧下さい。

Blogger にはカレンダー機能がありません。なので、カレンダーをどうしてもブログに貼り付けたいという場合には、自分でテンプレートをカスタマイズする必要があります。今回はその方法を2つ紹介しますので、お好きな方を試してみて下さい。
※色々な部分を変更するので、テンプレートは必ずメモ帳などにバックアップしておいてください。


Bloglendar を利用する

ひとつめは、Bloglendar を利用する方法。Blogger だと6な人さんや青天白日さん、NET DYNAMIC さんなどが利用されています。Bloglendar を Blogger に導入するのに参考にするのはこのページ。
では導入の方法を見ていきます。

1.Blogger 管理画面「設定 > フォーマット」より、「Date ヘッダー フォーマット」を「Friday, February 10, 2006」形式にします。

2.このファイルをダウンロード、解凍し、できた3つのファイルを任意のサーバーにアップロードします。

3.Blogger 管理画面「テンプレート」より、テンプレート head 要素内に、次のコードを貼り付けます。
<script type="text/javascript" charset="<$BlogEncoding$>" src="http://tools.kuribo.info/bloglendar/bloglendar.js">
</script><script type="text/javascript" charset="<$BlogEncoding$>" src="http://tools.kuribo.info/bloglendar/bloglendar-main.js">
</script><link rel="stylesheet" type="text/css" href="http://tools.kuribo.info/bloglendar/bloglendar.css" />
赤字の部分には、ファイルをアップロードしたディレクトリを入力します。

4.テンプレートタグ <BlogDateHeader> を見つけ出し、直下に blogDate クラスの div 要素を挿入します。元々 <BlogDateHeader> 内に書いてあるコードはそのままにしておきます。
<BlogDateHeader>
<div class="blogDate" title="<$BlogDateHeaderDate$>"></div>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>

5.テンプレート中、カレンダーを表示させたい位置に次のコードを書き入れて、ブログ全体を再構築します。
<div id="bloglendar"><!-- Bloglendar here --></div>
以上で Bloglendar の導入完了です。


JavaScriptCalendar を利用する

ふたつめは、JavaScriptCalendar(JSCalendar)を Blogger で使用する方法。Blogger では Envy Inc. さんが使われています。(実はこのカレンダーの存在自体も Envy さんに教えてもらったのです。ありがとうございます。)
JSCalendar を Blogger に導入するのに、参考にするのはこのページ。
ちなみに、このカレンダーを導入すると、月別のアーカイブが利用できなくなることを知っておいてください。
それでは導入の方法を見ていきます。手順がたいへん多かったので、少し内容をまとめて手順を減らしています。

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

2.このページ右下の「1.0(download)」というリンクをクリック、ミラーサーバーを選んで JSCalendar をダウンロードし、解凍、出来たファイルを全て任意のサーバーにアップロードします。

3.Blogger 管理画面「テンプレート」より、テンプレート head 要素内に、次のコードを貼り付けます。
<style type="text/css">@import url("http://tools.kuribo.info/jscalendar-1.0/skins/aqua/theme.css");</style>
<script type="text/javascript" src="http://tools.kuribo.info/jscalendar-1.0/calendar.js"></script>
<script type="text/javascript" src="http://tools.kuribo.info/jscalendar-1.0/lang/calendar-en.js"></script>
<script type="text/javascript" src="http://tools.kuribo.info/jscalendar-1.0/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>
赤字の部分には、ファイルをアップロードしたディレクトリを入力します。

4.body 要素の開始タグを次のコードに変えます。
<body onload="calendar()">

5.現在アーカイブを表示している部分(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 の導入が完了です。


スポンサードリンク:
お願い:
「この記事役に立った!」と思ったら、ぜひフィード登録をお願いします。 

Comments:10

  1. いつもお世話になります。クリボウさんに説明していただいて助かりました。
    JSCalendarに関する補足なのですが、導入した場合はエントリを増やすたびに全構築が必要になります。ちょっと面倒ですね。

    Bloglendarとの最大の違いは、該当する月のみのカレンダーを表示するのではなく、ナビゲーションを使用することでエントリがある月や年にカレンダー内で簡単に移動できることではないかと思います。最初は月別アーカイヴがなくなるのが嫌だったのですが、この機能のおかげで今のところはあまり不自由を感じていません。
    ただ、実際にBlogを訪れる方にとってどちらがわかりやすく便利なのかは意見が分かれそうですね。

    ReplyDelete
  2. はじめまして、クリボウさん。

    私もつい最近ブログを始めまして、テンプレートのデザインで気に入ったのがあったので、Bloggerにしました。全くの初心者で、例えばカテゴリーがないとかカレンダーはといった感じで、悩んでいました。

    クリボウさんのサイトを知り、必要な情報が満載で、とてもありがたく思っております。これから、手引きにして勉強していきたいと思っています。お世話になりますが、よろしくお願い致します。

    ReplyDelete
  3. いつもおせわになってます。
    ちゃめ=kamimuraです。
    「ちゃめのBlog」に早速付けてみました。
    最初に紹介された方ですね。

    なかなか気に入っています。
    でも、「ちゃめのBlog」の投稿回数が激減したのが一目瞭然になってしまいました(笑)。
    モチベーションになっていいかも?ですね。

    ReplyDelete
  4. クリボウさん、こんにちは。
    ご丁寧な解説、大変感謝しております。
    おかげさまで、簡単にカレンダーを設置することができました!

    最近bloggerでブログを始めましたが、
    今後ともクリボウさんにはお世話になりそうです。
    次はカテゴリー分けについて、勉強させて頂きます。

    ReplyDelete
  5. > envy さん
    実験でやってみたときには、エントリを増やしても再構築は必要なかったんですが…何か再構築の必要な条件みたいなものがあるんでしょうかね?
    JSCalendar のいいところは、トップのカレンダーから全ての記事にジャンプできる点ですね。Bloglendar はトップやアーカイブページ内でそもそも表示される記事にしかとべませんから…。カレンダーをとるか、月別アーカイブをとるか…。たしかに意見は分かれそうですね。

    ReplyDelete
  6. > ちゃめさん
    たしかに、カレンダーにしてみると、更新頻度がわかりやすくなりますね。ブログ運営にちょっとした張り合いが出て来て、いいかもしれませんね。

    > Toru さん
    > Maple Panda
    コメントありがとうございます。うちのブログの記事がお役に立てたようで、うれしいです。こちらこそよろしくお願いしますです。
    またコメントしてくださいね。

    ReplyDelete
  7. ログを見てますと、こちらのポストからけっこう人が来てますね。
    遅ればせながら、ご紹介どうもありがとうございます。

    JUGEMの方は、カレンダーはカレンダーでも、ひと味違うデザインになってますね。

    ReplyDelete
  8. はじめまして、HRKと申します。
    Bloggerでブログを始めようと思い、こちらのブログには大変お世話になっております。

    正式版となったBloggerにおいてなのですが、「Bloglendar を利用する」方法でカレンダーの作成ができません。具体的にはテンプレートの中にBlogDateHeaderタグがありません。何か情報をお持ちでしたら教えていただけませんでしょうか?
    よろしくお願いいたしますm(__)m

    ReplyDelete
  9. > HRK さん
    新 Blogger 用のカレンダーについては、別の記事にまとめてあります。導入も大分簡単になっています。ぜひお試しください。
    クリボウの Blogger Tips: Blogger beta にもカレンダー

    ReplyDelete
  10. はじめまして
    ウィジェットの追加で
    カレンダーを追加したのですが
    表示されません。

    お手数ですが
    お知恵を貸していただけますか。

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.