TopMovable Typeカスタマイズカレンダー > 2005年3月
2005年3月28日

月送りカレンダー(横型・リアルタイム版)可変3カラム用

March 28,2005 11:58 PM
Tag:[, , ]
Permalink

最近投エントリーした「月送りカレンダー(横型・リアルタイム版)」は固定カラムしか考慮しておりませんでした(というのは喜怒哀楽さんより頂いたコメントで判明)。可変3カラムの場合は左右カラムの上部開始位置が絶対値指定のため、これも制御する必要があります。
ということで可変3カラムにも対応できるように修正しました(この方法が妥当かどうかは別として)。詳細は下記のエントリーを参照ください。

月送りカレンダー(横型・リアルタイム版)

併せて util.js もバージョンアップしました。

Comments [8] | Trackbacks [3]
2005年3月16日

月送りカレンダー(横型・リアルタイム版)

March 16,2005 11:33 PM
Tag:[, , , ]
Permalink
横型カレンダー月送りカレンダーの横型・リアルタイム版です(画像は完成イメージ)。これまでにエントリーしたタイプと設定内容が若干異なるのため別エントリーにしました。
PHPが利用できることが前提です。スタイルは公開テンプレート(2カラム)のデザインに合わせています。3カラム版等、他のテンプレートをお使いの方はテンプレート・スタイルシートのサイズに関する設定を適宜変更してください。なお今回のデザインは体験手記レポート部さんのサイトを参考にさせて頂きました。ありがとうございました。
以下設定方法です。
注:本エントリーではPHP化が必要なため、現在は JavaScript によるカスタマイズを推奨しています。詳細は下記のエントリーまたはカレンダーアーカイブをご覧ください。

0.カレンダー用ディレクトリ設定

Movable Type のバージョンが 3.2-ja 以降の場合、管理メニューの「設定」→「公開」の「アーカイブの設定」にチェックをいれて、その下に表示されたフォームに下記の内容を設定します。

アーカイブURL:http://ブログURL/archives/
アーカイブパス:アーカイブURLまでのパス

例えば当サイトであれば

アーカイブURL:http://www.koikikukan.com/archives/
アーカイブパス:/home/koikikukan/public_html/archives

という具合になります。

バージョンが 3.1x-ja 以前の場合は、管理メニューの「ウェブログの設定」→「基本設定」の「ローカル・アーカイブ・パス」と「アーカイブのURL」に、上記と同様、

ローカル・アーカイブ・パス:アーカイブURLまでのパス
アーカイブのURL:http://ブログURL/archives/

を設定します。

1.カレンダー用アーカイブテンプレートの設定

バージョンが 3.2-ja 以降の場合、管理メニューの「テンプレート」→「アーカイブ」→「テンプレートを新規作成」をクリック。3.1x-ja 以前の場合、管理メニューより「テンプレート」→「アーカイブに関連したテンプレート」で「新しいアーカイブテンプレートを作る」をクリック。 次画面で下記を設定してください。

  • テンプレート名:カレンダー(名称は何でもOKです)
  • このテンプレートにリンクするファイル:(設定不要)
  • テンプレートの内容:下記


設定が終わったら「保存」をクリックしてください。

2.カレンダー用スタイルシートの設定

バージョンが 3.2-ja 以降の場合、管理メニューの「テンプレート」→「インデックス」→「テンプレートを新規作成」をクリック。3.1x-ja 以前の場合、管理メニューより「テンプレート」→「インデックステンプレート」右の「新しいインデックステンプレートを作る」をクリック。 次画面で下記を設定してください。

  • テンプレート名:カレンダー用スタイルシート(名称は何でもOKです)
  • 出力ファイル名:calendar.css
  • このテンプレートにリンクするファイル:(設定不要)
  • テンプレートの内容:下記


設定が終わったら「保存」をクリックし、次の画面で「このテンプレートを再構築する」をクリックしてください。

3.カレンダーテンプレートを月別アーカイブに関連付け

バージョンが 3.2-ja 以降の場合、予め、管理メニューの「設定」→「公開」の「アーカイブ・マッピング」の項目の右側にある「マッピングを新規作成 」をクリックして下記の設定を実施してください。 バージョンが3.1x-ja 以前の場合は、管理メニューより「ウェブログの設定」→「アーカイブの設定」で「新しく、テンプレートとアーカイブを関連付ける」より下記の設定を実施してください。

アーカイブの種類:月別
テンプレート:カレンダー(←1項で設定した「テンプレート名」です)

「追加」をクリック後、その下の「アーカイブ」欄にある「月別」に、1項で付与した「テンプレート名(ここでは"カレンダー")」が追加されていればOKです。
次に同じ「アーカイブ」欄の「月別」の「カレンダー」の右側にある「アーカイブ・ファイルのテンプレート(3.1x 以前)」または「出力フォーマット(3.2-ja 以降)」に下記を設定してください。

アーカイブ・ファイルのテンプレート(3.1x-ja 以前):下記
<$MTArchiveDate format="calendar/%Y/%m/index.php"$>
出力フォーマット(3.2-ja 以降):下記
calendar/%y/%m/index.php

これがカレンダー用のディレクトリおよびファイル名となります。
設定後、ページ下にある「変更を保存」をクリックしてください。

4.各テンプレートの修正

カレンダーを利用するテンプレート(メインページ・カテゴリーアーカイブ・日別アーカイブ・個別エントリーアーカイブ等)のタイトル設定の下に下記のタグ(青色部分)を追加してください。テンプレートの拡張子は .html のままで問題ありません。

<!-- タイトル開始 -->
<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2><$MTBlogDescription$></h2>
</div>
<!-- タイトル終了 -->
 
<div id="globalnavi">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" width="698" height="20" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>

またサイドバーに設定されているカレンダータグ(赤字部分)を削除してください。コメントアウトをされても構いませんが、その場合でも再構築の対象になります(つまりその分再構築時間がかかります)ので、削除されることをお勧めします。

<div class="side">
<div class="calendar">
<table border="0" cellspacing="4" cellpadding="0" align="center" summary="投稿した日にリンクする月別のカレンダー">
      :
    (省略)
      :
</span></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>

5.スタイルシート設定

スタイルシート(styles-site.css)に、カレンダー外側のスタイルを示す設定(青色部分)を追加してください。リストは .description の下に追加した例です。

/* サイト説明文 */
.description {
    color: #999999;
    font-size: 12px;
}
 
#globalnavi {
    text-align: center;
    padding-bottom: 5px;
    border-bottom : 1px solid #666699;
} 

ここまでの設定が終わったらすべてを再構築して、カレンダーがタイトル下に表示されることを確認してください。

ここまでの設定で一応表示されるようになりますが、Mozilla系ブラウザでは iframe のサイズ認識がIE系ブラウザより若干狭くなるため、カレンダーの表示が欠けてしまいます。HTMLタグまたはスタイルシートの設定で回避できれば良いのですが、現状はその方法が不明ですので、JavaScriptを使用して回避することにします。その方法を6?8項で説明します。なお、iframe の幅(4項の height 属性)をやや大きい値で設定しておけばこの設定は不要です。

6.util.jsのダウンロード

下記の download をクリックして「スクリプトのページ」にジャンプし、一番下にある util.js のリンクをクリックして、ローカル・サイト・パスにアップロードしてください。なお今回のカスタマイズには 1.011.02 以上が必要ですのでご注意ください。

download

7.スクリプト設定

JavaScriptを起動することによってブラウザによる表示の違いを吸収します。固定3カラムの場合は7.1のみ、可変3カラムの場合は7.1と7.2を実施してください。

7.1 iframe幅を調整するスクリプトを追加

iframeタグの幅を調整します。4項で設定したMTタグのすぐ下に下記の設定(青字部分)を追加してください。

<div id="globalnavi">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" width="698" height="19" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>
 
<script type="text/javascript">
<!--
setAttributeByTagNameAndAttribute(1, 'iframe', 0, 'height', '27');
-->
</script>

setAttributeByTagNameAndAttribute 関数は指定したタグの属性値を変更するためのものです。タグ名で指定するため、複数のタグが取得されるケースを考慮して何番目のタグかを指定できます。
赤字に示したパラメータでタグ等を指定します。左から、

  • ブラウザ種別(0:IE系/1:Mozzila系)
  • タグ名(iframe タグ)
  • タグの出現順(ページの中で最初に出現する場合は"0")
  • 属性名(height 属性)
  • 属性値(27)

です。リストはMozilla系のブラウザに対して設定を有効にする例です。IE系のブラウザに対して設定を有効にしたい場合は、最初のパラメータに "0" を指定してください。他の ifame タグ(広告等)が今回設定したタグの位置より前に出現する場合は、例で設定している "0" を "出現順 - 1" に変更してください。例えばカレンダーの iframe タグが2番目に出現するのであれば設定値は "1" になります。

7.2 top からの表示開始位置を調整するスクリプトを追加

可変3カラムの左右サイドバーの開始位置(縦方向)は絶対値指定です。つまりブラウザによってカレンダーの表示幅が変化することで左右カラムの開始位置がずれたように見えてしまうため、このずれを調整します。
左カラム終了および右カラム終了タグの後ろにそれぞれ下記の設定(青字部分)を追加してください。

    :
</div>
<!-- 左サイドバー終了 -->
 
<script type="text/javascript">
<!--
setStyleById(1, 'links-left', 'top', '125px');
-->
</script>
    :
    :
</div>
<!-- 右サイドバー終了 -->
 
<script type="text/javascript">
<!--
setStyleById(1, 'links-right', 'top', '125px');
-->
</script>
    :

setStyleById 関数は指定した id 属性のスタイルを変更するためのものです。赤字に示したパラメータでスタイルおよび値を指定します。左から、

  • ブラウザ種別
  • id 属性名(links-left/links-right タグ)
  • スタイル(top)
  • 値(125px)

です。リストはMozilla系のブラウザに対して設定を有効にする例です。IE系のブラウザに対して設定を有効にしたい場合は、最初のパラメータに "0" を指定してください。

8.JavaScriptのインクルード

4項で修正したテンプレートの <head>~</head> の間に下記を追加してください。

<script type="text/javascript" src="<$MTBlogURL$>util.js" charset="utf-8"></script>

9.注意事項

毎月1日、カレンダーが存在しない状態でブラウザの更新を行ったりコメント投稿があると正常に表示されなくなります(File Not Found になります)のでご注意ください。なおカレンダーを生成するにはエントリーの投稿が必要です(一旦公開投稿すればエントリーを後で削除してもカレンダーは残ります)。 この不具合を解消する場合は、月送りカレンダー・毎月1日に表示されない不具合を改善を参照してください。

2005.03.20 追記
カレンダーテンプレートの </span> の制御に修正もれがありましたので修正しました。Luna's*PaPaさん、ご指摘ありがとうございました。

2005.03.28 追記
可変3カラム使用時の説明を追加しました。またスタイルシートの #globalnavi に text-align: center; を追加しました。

2005.04.03 追記
月跨り時の動作について注意事項を追記しました。

2005.06.05 追記
月跨り時の不具合を改善する記事へのリンクを追記しました。

2005.06.23 追記
記事の内容についての不備等を見直しました。

2005.06.27 追記
日付の枠が右寄りになる不具合を修正しました。

2005.08.23 追記
calendar.css について再構築を行うことを追記しました。

2005.10.31 追記
3.2-ja 用の記述を追加しました。

Comments [97] | Trackbacks [34]
2005年3月11日

リアルタイムカレンダー(横型)

突然ですがリアルタイムカレンダーに横型用を作りました。下記のエントリーに追加しましたのでご利用ください。

リアルタイムカレンダー(改) リアルタイムカレンダー(画像表示版)

なお table タグを使わないケースを想定して書いてます。動作は一応確認しておりますが不具合等ございましたらご連絡ください。

Comments [4] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3