Movable Type

｢月送りカレンダー｣を設置してみました。

また、お仕事がらみで｢NagaBLOG｣を実験台に使っちゃいました。
今回は、｢月送りカレンダー｣です。

MovableType標準のままだと、その月のカレンダーしか表示しないので前月の過去エントリーを見る事ができなかったのでいつかやろうと思っていたものです。設置してみると、やっぱり便利ですね。お勧めのカスタマイズですよ。今回は｢mavericyard*｣さんの｢月送りカレンダー｣を参考にして作成させて頂きました。やり方がちょっと複雑なのと、けっこう自分なりにCSS関係の表記をいじったので、エントリーしておきます。

手順
1. まず、FTPソフトを使ってサーバ上のarchivesディレクトリの中にcalendar という名前のフォルダを作ります。
2. ブラウザーから編集画面にアクセスして、｢テンプレートの編集｣に入り、新しいインデックステンプレートを作ります。
3. テンプレートの名前を｢style-calendar｣、出力ファイル名を｢calendar.css｣とします。

body {
  font-family:"ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Osaka", "Arial", "Helvetica", "sans-serif";
  color: #333333;
  text-align: center;
  background-color: #FFFFFF;
  margin:0px;
  padding:0px;
  }
  * {
  line-height:130%;
  }
  h1,h2,h3 {
  font-family:"ヒラギノ角ゴ Pro W6", "ＭＳ Ｐゴシック", "Osaka", "Arial", "Helvetica", "sans-serif";
  font-weight: bolder;
  font-style:normal;
  margin: 0px;
  padding: 0px;
  }
  strong,em {
  font-family:"ヒラギノ角ゴ Pro W6", "ＭＳ Ｐゴシック", "Osaka", "Arial", "Helvetica", "sans-serif";
  font-style:normal;
  font-weight: bolder;
  }
  caption {
  font-family:"ヒラギノ角ゴ Pro W6", "ＭＳ Ｐゴシック", "Osaka", "Arial", "Helvetica", "sans-serif";
  font-size: 12px;
  font-style:normal;
  font-weight: bolder;
  margin: 0px 0px 3px;
  padding: 0px;
  }
  a,
  a:link {
  color: #000066;
  text-decoration: none
  }
  a:visited {
  color: #9999FF;
  text-decoration: none
  }
  a:focus,
  a:hover,
  a:active {
  color: #CC0000;
  text-decoration: underline
  }
table.calendar {
  width: 150px;
  height: auto;
  margin: 0px 10px 0px;
  padding: 0px;
  }
  table.calendar tr,
  table.calendar th {
  font-size:10px;
  font-weight:normal;
  line-height:130%;
  text-align: center;
  width: auto;
  height: auto;
  margin: 0px;
  padding: 2px;
  }

4. 次に、｢テンプレートの編集｣に行って、新しいアーカイブテンプレートを作ります。
5. テンプレートの名前を｢Calendar｣にします。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta name="generator" content="https://movabletype.org/" />
<title><$MTBlogName$></title>
<link rel="shortcut icon" href="<$MTBlogURL$>favicon.ico">
<link rel="stylesheet" href="<$MTBlogURL$>calendar.css" type="text/css" /> 
<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>
</head>
<body >
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" summary="投稿されたエントリーへのリンク付き月間カレンダー" class="calendar">
<caption>
<MTArchivePrevious>
<a href="<MTBlogURL>archives/calendar/<MTArchiveDate format="%Y/%m/index">.htm"> &lt;&lt; </a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y"$> 
<MTArchiveNext>
<a href="<MTBlogURL>archives/calendar/<MTArchiveDate format="%Y/%m/index">.htm"> &gt;&gt; </a>
</MTArchiveNext>
</caption>
<tr>
<th abbr="日曜日" align="center">日</th>
<th abbr="月曜日" align="center">月</th>
<th abbr="火曜日" align="center">火</th>
<th abbr="水曜日" align="center">水</th>
<th abbr="木曜日" align="center">木</th>
<th abbr="金曜日" align="center">金</th>
<th abbr="土曜日" align="center">土</th>
</tr>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td align="center">
<MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" title="[<$MTEntryTitle$>]" target="_top">
<$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<$MTCalendarDay$>
</MTCalendarIfNoEntries>
<MTCalendarIfBlank> </MTCalendarIfBlank>
</td>
<MTCalendarWeekFooter>
</tr>
</MTCalendarWeekFooter>
</MTCalendar>
</table>
</div> 
</body>
</html>

6. 次に｢ブログの設定｣から｢アーカイブの設定｣に入ります。新しく追加ボタンを押して、アーカイブの種類を｢Monthly｣にセット、テンプレートを｢Calendar｣にセットして実行します。
7. 保存が終わると、｢Monthly｣アーカイブの所に｢Calendar｣テンプレートが追加されているので、その右の｢アーカイブファイルのテンプレート｣欄の書き込み欄に下記の内容を記入します。この時、横のラジオボタンは｢Date-Based Archive｣のままにしておいて下さい。

<$MTArchiveDate format="calendar/%Y/%m/index.htm"$>

8. 最後に｢Main Index｣のお好きな場所(デフォルトのカレンダーがあった場所)に下記のコードを入れます。そして、｢サイトの再構築｣で完成です。

<iframe name="cal-iframe" src="<$MTBlogURL$>archives/calendar/<$MTDate
format="%Y/%m/index"$>.htm" width="160" height="110" scrolling="no" frameborder="0" marginwidth="0" marginheight="0"></iframe>

※注意 CSSと、HTML部のwidth、heightの設定は設置するサイトに応じて変更を忘れないで下さいね。後、性分でCSSには直接必要のない記述もしています。

こう書くとけっこう面倒そうですが、実際に作業してみると簡単にできるので挑戦してみて下さい。
使ってみると便利ですよ。

後、デザインテンプレートもかなりいじってます。いつもの如くデザインは変わっていません。テキストブラウザーで見たときにエントリーが最初に来るようにしたのと、エントリータイトルが2行になったときの対策が主ですが、レイアウトのCSS度のアップと効率化も同時に行っています。といってもまだまだ改良の余地有りですけど…。

--追記--
日別カテゴリーが、再構築中にサーバの500エラー(CGI・SSIの異常終了)を引き起こすので、熟慮の末、外しましたので、現在｢Naga BLOG｣では使用していません。

Naga Blog

Movable Type

｢月送りカレンダー｣を設置してみました。

About this entry