Movable Type 備忘録

 

 スケジュール表を作る

すべての人に必要なものとは思いませんが、スケジュール表の作り方について問い合わせがありましたので、カンタンにサンプル作ってみました。
わたしのサイトでは、月別アーカイブとして使用していました。

特にプラグインとか、スクリプトが必要ということもなく、MovableType(ムーバブルタイプ)の基本的なタグのみでできます。 カンタンに言うと、カレンダーをカスタマイズすればできます。

スケジュール表の作り方

以下にスケジュール表用のXHTMLを記します。

以下はCSSになります。

月別アーカイブのテンプレートをベースに、このXHTMLを埋め込んで月別アーカイブでマッピングすれば、月別のスケジュール表が作れます。 たとえば、出力ファイル名を%y/%m/schedule.htmlとすれば、2006/08/schedule.html というファイルが作れられます。

CSSは基本的にはそのまま使えますが、各自のお好みで調整してください。

月別アーカイブにマッピングする

月別アーカイブ・マッピングは以下の手順で行います。

  • テンプレートを新規作成します。

    MovableType(ムーバブルタイプ)管理画面からブログのテンプレート一覧を表示します。そして、画面上にある「アーカイブ」をクリックします。

    「テンプレートを新規作成」をクリックして、上記テンプレートのコードをカスタマイズした、各自のスケジュール・テンプレートを貼り付けます。 テンプレート名には分かりやすい名前、たとえば"月別スケジュール"などと適当に記入します。 一通り入力したら画面下の「保存」ボタンをクリックします。

  • 月別アーカイブにマッピングします。

    左サイドバーにある「設定」をクリックして、画面上にある「公開」をクリックします。 そうすると、画面下の方にマッピング一覧が表示されます。
    そして「マッピング新規作成」をクリックしてください。

    アーカイブの種類には「月別」を選択して、テンプレートには先ほど作った"月別スケジュール"を選択し、「追加」ボタンをクリックします。
    そうすると、月別の欄に新しく"月別スケジュール"と表示されます。

    最後に出力フォーマットから「カスタマイズする」を選択して、%y/%m/schedule.htmlと入力します。 入力後、「変更を保存」ボタンをクリックして、月別アーカイブのみ再構築しれば完成です。

以上でスケジュール表のテンプレートを月別アーカイブにマッピングすることができます。 各自の月別アーカイブのテンプレートをベースに、上記テンプレートを貼り付ければカンタンに作れます。

  • Edit
  • Permalink
  • Comments(9)
  • Trackbacks(1)

 Trackback Pings(1)

from ももち ど ぶろぐ ２

とりあえず、Movable Typeでスケジュール表をつくってみた。 「MovableType備忘録: スケジュール表を作る」

Tracked on September 22, 2007

 Comments(9)

#1: Posted by ぷーこ [RES]

こんばんは☆
今日はこちらのカスタマイズを参考に
月別アーカイブを作ってみました！
とっても見やすくなって大満足ですＯ(≧▽≦)Ｏ
カレンダー表示だと一目瞭然ですねｗ
ありがとうございます♪

Posted on May 10, 2007
#2: Posted by bzbell [RES]

>>1 ぷーこ さん

こんにちわ^^

> とっても見やすくなって大満足ですＯ(≧▽≦)Ｏ

よかったぁ(●´∀｀●)

わたしのとこでは不定期投稿だけど、ぷーこさんとこみたいにほぼ毎日投稿してるサイトは一覧になって見易いですよね♪

もし、日別アーカイブは今までのテンプレートで表示したい･･･という場合には、ご連絡ください (￣∇￣)/

Posted on May 10, 2007
#3: Posted by タニ [RES]

はじめまして。
ＭＴ勉強中でして
こちらのテンプレートを参考にスケジュール表を作ってみました。

スケジュール自体の表示はできたのですが、
テーブルで表示させたとき、何も無い日（空白時）はセルが現れず、
歯抜けな状態になってしまい、何が悪いのか検討がつきません。

お手数ですが、原因がわかれば、お教えいただけますか？

Posted on June 4, 2007
#4: Posted by bzbell [RES]

>>3 タニ さん

はじめまして^^

> テーブルで表示させたとき、何も無い日（空白時）はセルが現れず、

それはテーブルのボーダー属性が設定されてないんだと思います。
スタイルシートにて以下の属性を設定してみてください。 

table, th, td {
border-style: solid;
border-width: 1px;
}

これでテーブルのボーダーが表示されるのではないでしょうか。

Posted on June 4, 2007
#5: Posted by タニ [RES]

早速のご返答ありがとうございます。

結論といたしましては、テーブルのスタイルが原因ではなく、
td内に処理する内容がない（情報が無い）ため、テーブルのセルが現れなかったようです・・・。
（ＨＴＭＬの基本的なところでこけていました。orz）

エントリー出力用（っていうのかな）td内にスペース（ ）を入れると、問題なくセルが現れました。


お手数をおかけいたしました。ありがとうございます。

Posted on June 4, 2007
#6: Posted by bzbell [RES]

>>5 タニ さん

こんにちわ^^

そうでしたか (;￣∇￣A
でも、解決してよかったです♪

Posted on June 4, 2007
#7: Posted by ダリ [RES]

はじめまして。こちらのサイトでMTの勉強をさせていただいております。
早速、スケジュール表のサンプルスクリプトを入れさせていただき作ってみました。
特に問題なく設置できたのですが、土・日のセルの色を変えるには判定させる為の
JavaScript等が必要になりますでしょうか。ご教授願えればと思います。
宜しくお願いいたします。

Posted on August 17, 2007
#8: Posted by bzbell [RES]

>>7 ダリ さん

こんにちわ^^

> 土・日のセルの色を変えるには判定させる為のJavaScript等が必要になりますでしょうか。

いえ、土日の色変更程度なら JavaScript は不要ですよ (￣∇￣)b
たとえば、わたしのサイトの月別アーカイブなどでは以下のように XHTML と CSSを変更してます。 

<h2 class="schedule-header"><$MTArchiveDate format="%B %Y"$>のスケジュール</h2>
<div class="schedule-content">
<table summary="<$MTArchiveDate$>のスケジュール" cellspacing="0" cellpadding="2" class="calenar">
<tr>
<th colspan="2">日付</th>
<th>スケジュール</th>
</tr>
<MTCalendar month="this">
<MTCalendarIfBlank>
<MTElse>
<tr class="<$MTCalendarDate language="en" format="%a"$>">
<td class="day"><$MTCalendarDate format="%e"$></td>
<td class="week"><$MTCalendarDate format="%a"$></td>
<td class="summary">
<MTCalendarIfEntries>
<ul>
<MTEntries sort_order="ascend">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><span class="time"> <$MTCalendarDate language="en" format="%p %I:%M"$></span></li>
</MTEntries>
</ul>
</MTCalendarIfEntries>
</td>
</tr>
</MTElse>
</MTCalendarIfBlank>
</MTCalendar>
</table>
</div><!-- schedule-content -->

太字の部分を追加しています。
それに対してスタイルシートでは以下のように指定します。 

table.calenar tr.Sat {
background-color: #eaf4fc;
}
table.calenar tr.Sun {
background-color: #fef4f4;
}

以上です (￣∇￣)/

Posted on August 17, 2007
#9: Posted by ダリ [RES]

早々にご返答いただきありがとうございます！
早速追加した所、無事に土・日の色変更ができました。
御丁寧な解説で、とても勉強になります。
今後とも宜しくお願いいたします。

#ありがとうございました。

Posted on August 17, 2007

 Post a Comment

コメント用フィード