www.kkoba.com  » kkobaのblog

1. 目標

サイト右上のカレンダーが完成したもの。やりたかったことは以下の通り。

• エントリーがある月もない月も両方表示する
• エントリーがある月からは、月別アーカイブへリンクする
• 各月のエントリー件数を表示する

2. 利用するプラグインのインストール

以下の3つのプラグインをインストールした。

• ArchiveDateHeader
• ArchiveLoad
• ArchiveYear

3. テンプレートの作成

インデックステンプレートとして以下を作成し、出力ファイルを calendar.html とした。

<table>
  <MTArchiveList archive_type="Monthly">
    <MTArchiveDateHeader>
      <tr>
        <th><$MTArchiveDate format="%Y"$><br />年</th>
        <td>
          <table>
            <MTArchiveYear columns="6" order="descend">
              <MTArchiveYearRowHeader>
                <tr>
              </MTArchiveYearRowHeader>
                <MTArchiveYearIfEntries>
                  <MTArchiveLoad>
                    <td class="ifEntries">
                      <a href="<$MTArchiveLink$>"><$MTArchiveDate format="%m"$></a>
                      <div class="monthCount">
                        <$MTArchiveCount$>
                      </div>
                    </td>
                  </MTArchiveLoad>
                </MTArchiveYearIfEntries>
                <MTArchiveYearIfNoEntries>
                  <td class="ifNoEtries">
                    <$MTArchiveDate format="%m"$>
                    <div class="monthCount">
                      &nbsp;
                    </div>
                  </td>
                </MTArchiveYearIfNoEntries>
              <MTArchiveYearRowFooter>
                </tr>
              </MTArchiveYearRowFooter>
            </MTArchiveYear>
          </table>
        </td>
      </tr>
    </MTArchiveDateHeader>
  </MTArchiveList>
</table>

4. SSIでinclude

年間カレンダーを表示したいテンプレートに、以下のようにSSIでincludeした。

<div id="ycalendar">
  <!--
    #include virtual="<$MTBlogRelativeURL$>calendar.html"
   -->
</div>

5. スタイルシートへの追加

表示を整えるために、以下をスタイルシートに追加した。

#ycalendar {
    margin-bottom: 15px;
    padding: 0px;
    border: 1px solid steelblue;
    background-color: white;
    font-size: small;
}

#ycalendar table {
    margin: 0px;
    padding: 0px;
    border: none;
    border-collapse: collapse;
    background-color: white;
    width: 100%;
}

#ycalendar th {
    border: 1px solid silver;
    background-color: steelblue;
    color: white;
    text-align: center;
}

#ycalendar td {
    border: none;
    background-color: white;
    color: black;
    text-align: center;
}

#ycalendar .ifEntries {
    margin: 0px;
    padding: 0px;
    border: 1px solid silver;
    background-color: white;
    color: black;
    text-align: center;
}

#ycalendar .ifNoEtries {
    margin: 0px;
    padding: 0px;
    border: 1px solid silver;
    background-color: white;
    color: silver;
    text-align: center;
}

#ycalendar .monthCount {
    margin: 0px;
    padding: 0px;
    font-size: x-small;
    line-height: 100%;
}