小粋空間  -  a cheap joke and a play on words site

今年も締め括りということで一言。

私がブログを開始したのが2004年5月で、今年も相変わらずテンプレート・カスタマイズ中心の記事をアップし続け、あっという間に1年が過ぎました。昨年にも増して大勢の皆様にアクセスを頂き、嬉しい限りです。

昨年から今年前半にかけて、ご近所ユーザの方々がカスタマイズで加熱するという雰囲気がありましたが、最近は落ち着いた感があり、ここに訪れてカスタマイズされた方が本来のカラーでブログを楽しまれているという印象です。
その流れとは別に、雑誌や本で当サイトの記事を紹介して頂ける機会を頂き、本当に感謝しています。

皆様には大変お世話になりました。来年もネタを探してテンプレート・カスタマイズ記事とダジャレを中心に書き続ける所存ですので、ご指導・ご鞭撻の程、どうぞよろしくお願い致します。

それでは2006年もどうぞよろしくお願い致します。そして良いお年をお迎えください。なお喪中のため、新年のご挨拶は失礼させていただきます。

WILLCOMのデータ通信用カードです。他にも何種類かありましたが本体価格が一番安かったので迷うことなく決定。ただいま帰省先からの接続に使っています。

とりあえず帰省前に環境設定しようと思い、昨日ノートPCにデータ通信カードを差し込んでインストールしようとしたところ、いきなりデバイスが認識されないという問題に遭遇しました。が、HPのサポートページを調べたところ「PCMCIA通信カードを認識しない」という問題が掲載されており、手順通りに実行することで正常に認識されました。

一通り設定が完了し、アンテナの感度も良好。で接続しようとしたら今度は接続できません。悩むこと数分。どうやらプリインストールされている Norton Internet Security が有効になっているのがいけなかったようで、一時的に無効にすることで正常に接続できました。
この Norton Internet Security が曲者というのは以前から知っていたのですが、きちんと設定していないせいもあってか、ネットワークの共有でも無効にしないと通信できません。ネットワーク関連でうまく動作しない場合はとりあえずこれを無効にすることでしょうか。

WILLCOM が用意しているデータ通信のタイプには 1x/4x/8x 等があり、1x は32kbps、4x は128Kbps となっており、プロバイダにそれぞれの接続用番号が用意されています。
私は 4x のネット25（月25時間まで定額）というコースですが、画像を圧縮する「Venturi」や「MEGAドライブ」という、店員さんの説明によると最大2MBまでの体感が可能？な60日間無料のオプションもついていて、そこそこ使えます。
なおプログラムのダウンロードでは、体感速度を早くするオプションをOFFにしないと正常にダウンロードできませんでした。

心配だったのは実家での感度だったのですが、通信カード用ユーティリティの情報では「最良」と表示され、一安心。
ということで、こまめに接続・切断を繰り返しながら運用しています。（笑）

リニューアルして

１．blogroll を div タグ等で括る

下記のように blogroll を表示するタグを div 要素で括り、id 属性 hogehoge を div 要素に記述してください。

<div id="hogehoge">
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/display.php?r=xxxxx"></script>
</div>

Serena Bach で定義型リスト（dl - dt - dd）を使っている場合は、下記のように dd 要素の中に div 要素を与えてください。

<dl class="xx">
<dt id="xxname">LIST</dt>
<dd id="xxlist">
<div id="hogehoge">
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/display.php?r=xxxxx"></script>
</div>
</dd>
</dl>

２．表示タグにスクリプトの追加

下記のスクリプト（青色部分）を、１項で修正したタグの下に追加してください。

<div id="hogehoge">
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/display.php?r=xxxxx"></script>
</div>
 
<script type="text/javascript">
<!--
id = 'hogehoge';
tag1 = '<a';
if (window.navigator.userAgent.indexOf("MSIE") != -1) {
    tag1 = tag1.toUpperCase();
}
tag2 = 'BlogRolling';
nodes = document.getElementById(id).innerHTML;
data = '';
list = nodes.split(tag1);
counter = 0;
for (i = 0; i < list.length; i++) {
    if(list[i].indexOf('<br><br>') != -1) {
        list[i] = list[i].replace(/<br>/,"");
    }
    if(list[i].indexOf(tag2) != -1) {
        data += '</div><div class="blogroll-powered-by">' + tag1 + list[i];
    } else {
        if(counter){
            data += tag1;
        }
        data += list[i];
    }
    counter++;
}
document.getElementById(id).innerHTML = data + '</div>';
//-->
</script>

赤色で示した

id = 'hogehoge';

ですが、hogehoge の部分に、１項で設定した id 属性と同じものを設定してください。

３．スタイルシートの設定

BlogList用のCSSとして、スタイルシートに下記を追加します。

.blogrollmain {
    overflow: auto;
    height: 200px;
}
 
.blogroll-powered-by {
    margin-top: 5px;
    margin-bottom: 0px;
}

スクロールバーの高さを変える場合は

.blogrollmain {
    overflow: auto;
    height: 200px;
}

の赤色部分を修正してください。

Movable Type のエントリーで table タグを記述すると、テーブルの直前にある段落と大きな余白が生じる場合があります。
例えば以下のようになります。

段落

上記サンプルの「段落」という文字と、次に表示されているテーブルの間は、エントリー本文では1回改行しているだけですが、表示させるとこれだけの間隔が空いてしまいます（注：ここで本当にそうやってしまうと、このエントリーが valid な HTML にならなくなるため、便宜上、br 要素を複数回繰り返し挿入し、見た目が同じになるようにしています）。

原因は、エントリーのオプションにある「改行設定」が「改行を変換する」になっている場合、table タグに含まれる改行に全て改行タグが設定されてしまい、その改行が table タグの直前で有効になってしまうためです。

上記の例では、エントリー編集画面では

段落
<table border="1" cellpadding="2" cellspacing="0">
<tr><td>あいうえお</td></tr>
<tr><td>かきくけこ</td></tr>
<tr><td>さしすせそ</td></tr>
</table>

となっていますが、保存すると、

<p>段落<br />
<table border="1" cellpadding="2" cellspacing="0"><br />
<tr><td>あいうえお</td></tr><br />
<tr><td>かきくけこ</td></tr><br />
<tr><td>さしすせそ</td></tr><br />
</table></p>

と、全ての行末に改行マーク（赤色）が挿入されてしまいます。青色はその前後が空行の場合に挿入される段落用の p タグです。

table に改行タグを挿入させない策がいくつかありますのでご紹介します。

１．テーブル中の改行をなくす

これが一番手っ取り早いですが、エントリーの編集でやや見づらくなるのが欠点です。
追記：書き忘れてましたが、table タグが p タグの中に存在すると XHTML検証エラーとなります（つまり上記のリストはNGです）ので、２項を推奨します。

２．table 開始タグの直前に空行をいれる

Movable Type がエントリーに改行を付与する制御の仕組み上、先頭行（その前が空行であること）が下記のいずれかのタグに該当すれば、そのタグが含まれる行から次に空行が現れるまで改行タグおよび段落タグを挿入しない仕組みになっています。

h1|h2|h3|h4|h5|h6|table|ol|dl|ul|menu|dir|p|pre|center|form|fieldset|select|blockquote|address|div|hr

つまり、table タグの直前行に文章を書かなければ、１項の作業を行わなくても正常に表示されるようになります。これも手っ取り早い方法ですが、直前行を空けるという制約があります。

３．プラグインを利用する

The blog of H.Fujimoto の壱さんが「改行を変換する」を改良するプラグインを提供されていますので、これを用いることで正常に出力することができます。

昨日のエントリーでお伝えしたとおり、当サイトで公開している Serene Bach テンプレートおよび sb テンプレートで、個別エントリーHTMLに複数のトラックバックがある場合、ページの表示が崩れるという不具合がありました。ご利用の方には大変ご迷惑をおかけして申し訳ございません。

現在公開中のテンプレートは不具合を修正済ですが、2005年12月25日以前に Serene Bach または sb テンプレートをダウンロードされて表示が崩れている場合は、テンプレートを再度ダウンロードされるか、以下に示す修正をお願い致します(正常に表示されていれば修正の必要はありません）。
ベースHTMLテンプレート+スタイルシートでお使いの場合（=個別エントリー用HTMLテンプレートをお使いでない場合）は１項、個別エントリー用HTMLテンプレートをお使いの場合は２項の作業を行ってください。

１．ベースHTMLテンプレート+スタイルシートでご利用の場合

１．１ div タグの削除

ベースHTMLテンプレートにあるトラックバック表示用タグから、下記のように div 閉じタグ（赤色）をひとつ削除してください。

　　　　　　：
<!-- BEGIN trackback -->
<h3 class="trackbacks-header">Trackbacks</h3>
<div class="trackbacks-content">
<div class="trackback">
<div class="trackback-content">{trackback_excerpt}</div>
<p class="trackback-footer">
{trackback_title} | {trackback_blog_name} | {trackback_time}
</p>
</div>
</div>
</div>
<!-- END trackback -->
　　　　　　：

１．２ スクリプトの追加

ベースHTMLテンプレートの最後にあるスクリプトに、青色部分を追加してください。

　　　　　　：
<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('h2');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
    work = elements[i].innerHTML;
    if(work == work_old){
        elements[i].style.display = 'none';
    }
    work_old = work;
}
elements = document.getElementsByTagName('h3');
work_old = '';
for (i=0; i<elements.length; i++) {
    work = elements[i].innerHTML;
    if(work == work_old){
        elements[i].style.display = 'none';
    }
    work_old = work;
}
//-->
</script>
　　　　　　：

２．ベースHTMLテンプレート+個別エントリー用HTMLテンプレート+スタイルシートでご利用の場合

２．１ div タグの削除

個別エントリー用HTMLテンプレートにあるトラックバック表示用タグから、下記のように div 閉じタグ（赤色）をひとつ削除してください。

　　　　　　：
<!-- BEGIN trackback -->
<h3 class="trackbacks-header">Trackbacks</h3>
<div class="trackbacks-content">
<div class="trackback">
<div class="trackback-content">{trackback_excerpt}</div>
<p class="trackback-footer">
{trackback_title} | {trackback_blog_name} | {trackback_time}
</p>
</div>
</div>
</div>
<!-- END trackback -->
　　　　　　：

２．２ スクリプトの追加

個別エントリー用HTMLテンプレートの最後の方に、スクリプト（青色部分）を追加してください。

　　　　　　：
</div><!-- /box -->
 
<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('h3');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
    work = elements[i].innerHTML;
    if(work == work_old){
        elements[i].style.display = 'none';
    }
    work_old = work;
}
//-->
</script>
 
</body>

現在公開中の Serene Bach テンプレートおよび sb テンプレートですが、個別エントリーHTMLのトラックバックで2件以上ある場合、表示が崩れる不具合がありました。
Serene Bach 版については、以前同様の指摘を頂き、修正したアーカイブを公開していたつもりでしたが、アーカイブを配置する際に新旧のアーカイブを間違えて配置していたようで、不具合が解消されたアーカイブをダウンロードできない状態になっておりました。大変申し訳ございません（←勘違いでしたらすいません）。

先ほど、Serene Bach / sb 両方のテンプレートアーカイブを作成して、リンクを設定し、公開リンクから再度ダウンロードしてそれぞれ正常に動作することを確認しました（正常に動作しない場合はご連絡ください）。ダウンロードのリンクに「20051225」が含まれているものが最新バージョンです。それ以前にダウンロードされた方については再度ダウンロードくださいますよう、よろしくお願い致します。

なお、既にテンプレートをカスタマイズされている方につきましては、修正点のみを別途お知らせする予定ですのでお時間ください。

Ajaxの書籍が、少ないながらも書店に並ぶようになってきました。

Ajax の大きなメリットは、クライアント-サーバ間でのデータのやりとりが非同期通信（サーバにリクエストを送ると、「リクエストを送ったよ」という素早いレスポンスがクライアントに返却されて、実際のレスポンスは後から返却される）で行われる、ということですが、やりとりされるデータ自身よりも、サーバとの通信によってブラウザが待ち状態にならないことが Ajax による大きな恩恵です。

たとえば通常の同期通信であれば、フォームにデータを入力して送信すると、リスエストをサーバに送り、レスポンスがページに反映されるまでユーザはブラウザを操作することができません。Ajax を使えば、フォームデータ送信直後に次のブラウジングを行うことができます。ここで重要なのは、Ajax のレスポンスはページの一部に反映されるということです。フォームデータの例では、入力したフォームデータの結果は（JavaScriptを利用して）ページの一部分だけを入れ替えるということです。

・・・という仕組みが今ひとつよく理解できていなかったので、下記の1冊を購入しました。

入門 Ajax posted with amazlet on 05.12.25 高橋 登史朗 ソフトバンククリエイティブ (2005/11/15) 売り上げランキング: 65,811 Amazon.co.jp で詳細を見る

内容は Ajax の基本的な説明や利用方法の他、文字コード・クロスブラウザやセキュリティ対策（クロスサイトスクリプティング・イジェクション）の注意事項がきめ細かく掲載されており、XMLHttpRequest部分についてはそれらを考慮した実用的なサンプルが掲載されています。

テキストを扱った基本サンプルでは、Perl/PHP/bsh/MySQL/SQLiteを利用した通信方法や、onclick・onmouseover等のイベント別のサンプルが詳細に記されており、ドラッガブルフロートやスライダー、ドラッグ＆ドロップといったビジュアルなサンプルも載っています。その他 XMLHttpRequest リファレンスや Google Maps のカスタマイズ方法とAPIクラスリファレンスもありますので、これ1冊あれば Ajax の動作を色々楽しめるのではないでしょうか。

当サイトで公開しているテンプレートのご利用者（コメント・トラックバック・BlogPeople等の登録で私が知ることができたもの）が500サイトを超えました。月並みではございますがご利用くださっている皆様には本当に感謝しております。この場をお借りして改めまして御礼申し上げます。ありがとうございます。m(__)m

上記で知り得たサイトについては「小粋なUserList（BlogRolling 使用）」に私が手動で日々登録しているのですが、途中で他のテンプレートに乗り換えられたり、URLが変更になったりすることも当然ある訳で、時々メンテナンスしながら登録ユーザ数をチェックしています。
小粋なUserListの詳細についてはテンプレートについてのページの中ほどの説明を参照ください。

これまでは mixi の「小粋なユーザコミュニティ」のメンバーの方々にチェックを分担してお願いしてましたが、今回はチェックツールを作りました。具体的には、まず BlogRolling のリストをツールに読み込ませ、サイトのトップページを取得します。そこからさらにCSS（styles-site.css等）を取得し、そこに記された著作権表示を認識してテンプレート利用状況を判断するようにしています（目視による最終チェックは必要ですが）。これによってチェック稼動がかなり削減されました。

ということで、500サイトをややオーバしておりますが、現時点でのご利用サイト様を紹介させて頂きます（BlogRollong 表示順です）。タイトルは登録時のタイトルを基本にしておりますが誤り等ございましたらご連絡ください。
登録漏れ等ありましたらご連絡頂ければ幸いです。またここに紹介されていない公開テンプレートご利用の方についても、ご連絡頂ければ適宜登録させて頂きます。

1. * cerise cafe *
2. **つれづれなるままに**
3. **読書日記**
4. **Silver Heart**
5. *kirara
6. + 馬グナカルタ +
7. + spirit ether blog
8. + spirit ether blog
9. ++ Bay Leaf ++
10. ++お花ダイスキ！++
11. ++Blog-ＭＥＬＬ++
12. ++猫な日々++
13. ++Open My Heart++
14. +みゅみゅうさ+
15. +occhiali di libellula+
16. -h@tezone-
17. ...: laugh so rough :...
18. /PEN/
19. /var/tmp/blog
20. 137g
21. 246log
22. 4REAL
23. 5587.chan.com
24. 77racing.com
25. : : useful days* ? : :
26. ::::fuumblog::::
27. ::miim::
28. =ハマルノカ=
29. =TA*KA blog=
30. a n i
31. AF系製薬 Web出張版
32. AMBITION&DESIRE
33. AmitoMidnight
34. angeli-x ++ monologue
35. 『ブタネコのトラウマ』 Ｂｌｏｇ版
36. あそび
37. あっぷるじゅ?す
38. あどべがの館
39. あふなびブログ
40. あらぐさ
41. いるうるいなさび
42. いろんなことが起こる
43. うたたね ひつじ
44. うだうだうだ
45. えすろぐ
46. えてぽんの部屋
47. おうち日記とアフィリエイト
48. おさんぽ ことり だより
49. おっさんのブログ（仮）
50. おでこちゃんの金魚飼育日記
51. お取り寄せ日記＠petit*asterisk
52. お気楽ブログ☆
53. お気楽草紙
54. きらきら＊ひかる It shines glitteringly.
55. くろねこ屋
56. たおふあＺ
57. ちっちっち
58. ちとGo!Go!
59. つのとカブいっしょに
60. てぃあら
61. とも。日記
62. とりあえずいっとけ!?
63. とりあえずいっとけ!? Tigers
64. とりとめなき日記
65. どうでもいいこと
66. にゃ?ごろ
67. にやりっ日誌-niyari official blog-
68. のんべサラリーマン
69. はいねぶ
70. ひばり座ブログ
71. ひびのつぶやき
72. ふたつとない日常　?Azumy's Standard Daytime
73. ぶーくろぐ
74. ぷちぷちつづり
75. ほげほげ情報ブログ
76. ほたるすたいる
77. ぼくたび　BLOG
78. ぼけぼけ☆こむ
79. ぽこたのきもち
80. まさやん日記
81. まんがboo(漫画部)
82. まんぼう亭
83. みた夢メモっちゃいけないか？
84. やしめしや
85. やっつけWeb
86. やむやむ
87. ゆきのきもち
88. ゆたんところ
89. よろずブログ
90. りとるこっと。blog
91. りゅうWalker Log
92. るしゃなーず・ごーすとうぃすぱー
93. わいるどで行こう
94. わたあめすもも
95. わたしのヒトリゴト　あさきぬ工房
96. アイドルの草鞋
97. アルの足跡
98. アルファ道場2005
99. アレルギー・アトピーでも楽しく暮らそう！
100. エンタマ
101. オナカン
102. オラっちの気ままな毎日
103. オラっちの気ままな毎日
104. カメラと一緒にパリでお散歩＊
105. ギャンブル三昧！
106. ケセラセラBrand-new！
107. コスメ＆ビューティー::銀座ショッピングストリート
108. コハルビヨリ。
109. ジンク・ホワイト
110. スイフトスポーツドットコム
111. スパムメール・バトルロワイヤル
112. ダイエットアラモード　*TIME*
113. ダンス図書館
114. チエコエトセトラ。
115. チカチカの羅針盤
116. チョコチッブログ
117. チョーオンパホーソーキョク
118. ツキヘノトビラ
119. デジタルカメラ.com
120. ドール・ヒステリア
121. ナイショの話
122. ナリモノイリ
123. ニート・ひきこもりのための経済的自立
124. ネタを探して2万マイル！？
125. ネットショップ・オペレーション・マニュアル
126. ハンサムウーマン道
127. ヒビノキロク
128. フラワーガーデン::銀座ショッピングストリート::
129. ボクはちゃんとビジネス本読んでます！
130. ポポタム！
131. ヤタさんの気まぐれ日記
132. ユートピアンのディストピア
133. ヨーキーな日々♪
134. ラパンdeドライブ宙-ケータイ大好き-
135. リラックマ・ショッピングモール
136. リリウムの寝言
137. レジェンダロッサの独り言
138. ■□ WAY OF LIFE □■
139. ▼■▼■● Vivid-style.com
140. ××ってやつは･･･
141. ○△□　たど船
142. ★ひとりごと日記★
143. ☆Starlit Sky☆
144. ☆昴流の旅日記☆
145. ♪poohな毎日♪
146. baddreamfancydresser
147. beads gallery h*h
148. BEAT ZONE
149. beautiful hobby life
150. Biei.Info|blog
151. BLAN*CAFE
152. Blog
153. blog _ notation of the wave
154. blog(吉田敏彦建築設計室)
155. blog::made in SAGA
156. Blog@Peaceman
157. Blogのような日記のような
158. Blue Mint
159. BLUE PALETTE
160. bo-peep.net/web
161. BorialisのBoroBoro日記
162. bublog
163. c+
164. cache*cache
165. Cafe*Blog
166. camera verde blog
167. candy-2 BLOG
168. Car Life Sentence
169. Caramelly*note
170. Carefree Field
171. CAROUSELAMBRA
172. ch@yalog
173. Channel * chris
174. Cherry-Radio
175. chieplus.net
176. cider@home
177. ClumsyKen
178. Cococcino Days*
179. Cocont*
180. CocoNuts Days
181. COLOR NO.A
182. comi☆Log.
183. cookietale
184. Cool Gaming weBlog
185. Coolog
186. cube*
187. cyber muimui
188. 無線LANテック
189. 無印スタイル
190. 特別支援教育とAT（支援技術）とICT
191. 独り言・・・
192. 猫派の読書空間
193. 痔.com
194. 砂風呂
195. 社会分析的ブログ
196. 秀丞写文庫
197. 私立大学職員の情報オフィス
198. 空の追憶
199. 空飛ぶカメ
200. 立夏黄経45度
201. 童貞Game...
202. 紅玉日誌
203. 縁側生活
204. 縁側talk
205. 繰り返す女
206. Daily note
207. daisuke's room
208. DayByDay
209. DAYS ...So Flowers
210. DB blog
211. DIGITALL!!
212. Document_Not_Bound...
213. DORA Blog
214. dotabata.net
215. dreaming purple blog
216. DxD
217. D'sDinner@Blog
218. Страх Кино
219. EgoEco Days...
220. eizo slash blog
221. ELECTRICSHEEPdogs!
222. emo.com
223. en ce momont...
224. Ensemble Hearts'
225. eSoteric・・・
226. Eternal Forest　?悠久の森?
227. everyday gokigen !?
228. ExcessiveWords
229. Exist a Reason
230. existence Uhheri Edition
231. EXPECT THE UNEXPECTED
232. E's World "Neo"
233. 適宜更新
234. 職人カタギ
235. 脳内物質大流室inBLOG
236. 重箱のスミ
237. 銀座ショッピングストリート
238. 銀座フワラーガーデン
239. 芽衣のひとりごと
240. 萌えABLEタイプ
241. 長靴をはいたシステムエンジニア
242. 藤丸
243. 院長室
244. 雑貨*Zakka*サーチねっとMEMO
245. 零式改
246. 青い自転車とどこまでも。
247. 螺子式少年
248. 馬に蹴られて
249. 読書マインドマップ公開所
250. 身近な Lifelong Learning
251. 黒スムチの親バカ日記
252. 黒鱒 - weblog
253. fang-lang.net
254. Feels good
255. Final One's Essence
256. flatcrew.net : column
257. FootPrint
258. Fourseasons
259. FreeStyle
260. Frumenty
261. Gachapin WALL
262. Gangalee Web Log
263. GF*days
264. ginzi.com/blog
265. GRACE! Diary
266. groovecube ver.3
267. grumble
268. happy hunting ground
269. Happy*Days
270. Harry's Blog
271. HATABOW.JP
272. HENO HENO
273. hidakaya Weblog
274. hilari blog
275. HiMAT
276. hiratsuka.memo
277. HiStyle
278. HONGKONG+fish Hyper×2
279. Hot cocoa
280. hotmilk
281. I LOVE NAVY
282. IdeOnline
283. IIS ECサイトレビュー
284. In Some Way
285. infocraft
286. INSIDE ADORE
287. is life delisious?
288. ITOH STYLE
289. It's my Life
290. ＊だらだら雑記＊
291. ：：　monamona*　：：
292. ：：： Sweet days ：：：
293. ＭＴおぼえがき
294. ＭａｋｋｙののほほんDiary♪
295. ＳecretＢａｓｅ Of ワンｓ
296. ＳＥと呼ばれている奴の気ままなブログ
297. ?風を追いかけて?
298. Just myself
299. K-Jirow BLOG
300. kanemotipapa's日々相場雑感
301. karleksounds
302. kazunoblog
303. KeiBlog
304. kenronw(ケンロン)のブログ
305. KG
306. kg2
307. KH Weblog
308. KillerPierce
309. KINGO WEBlog
310. kitchen
311. KoreanLanguage*
312. Kuro:Neko Diary
313. K'S GARDEN
314. K'z Blog
315. land2go!!
316. langsam
317. L・E・L・S
318. Little Satellite
319. love
320. LOVE SWIMMING Blog
321. LUC-XX
322. LUVandSOUL-FAN.com
323. M E T A B O L I S M
324. M*C?B Version?
325. M*s Cafe-Blog-
326. Magic White
327. Magic#32のMT日記
328. Maio's Weblog
329. maki's space
330. Makologg???
331. Mami's note
332. Marginalsky
333. Marrontic
334. mattari-blog
335. Mauloa Mele
336. memorandum
337. MepageType
338. MetLog
339. MIKI Housing
340. Minologue
341. Mistgrass Weblog
342. Misty Night
343. mobilepcclub
344. monochrome green
345. Monochrome Recollections
346. Monolith-Log　モノリスログ
347. MONOLOGUE
348. MT専科
349. my style*
350. My Sweet Moana
351. My wonderful living
352. Myth Online
353. N-blog
354. Nachtigall
355. Natural High
356. nau-magazine
357. NAVY WATER
358. neko no 肉球＠BLOG
359. Nero-8 Archives
360. Nessun Dorma
361. NGのひとりごと
362. niigata-boro.net daily-r
363. NO DOUBT
364. Nobuの日々お蔵出し
365. nobubu Eyes
366. nobubulog
367. nonvlog from nonvey
368. NOP DAYS
369. Not yet!
370. N's blog
371. Omusubi Kororin
372. Orbium
373. Ordinary Person Monologues::
374. org_blog.
375. Otakara CAT Photo Blog
376. O.Z.K
377. parallax
378. parallax・はぐれ日記
379. patapata:blog
380. PCと戯れる日々
381. Peco Net
382. PHAT∴LOVESICK
383. Plating!
384. Postposition.Net Blog
385. Press-code.net
386. Pretty*Days
387. primary_secondary
388. Project MultiBurst
389. Pubsonal パブソナルを考えるブログ
390. P's Blog
391. Rabbit's Room
392. RAINBOW
393. Rainy days, Sunny days DB
394. Release Candidate 2
395. RELISH Cafe
396. rey&rio's sleepyblog
397. Routinework Blog
398. SAKALOG
399. SAKSAK RECORDS WEB SITE
400. saku*saku
401. Sampei's Private Room
402. Sans-Souci
403. Sanssouci
404. Schrödingers Katze
405. se a vida e
406. SEYA.ORG
407. Shady Grove
408. Shout!!
409. Shout!!
410. showry's Blog
411. SHO's**My...Day...**
412. Sketch Line
413. Sky High!
414. skyimage / Blog
415. sleepyblog
416. Small town talk
417. smile.shioiri.jp
418. SnowDrop
419. solgel.info::そるじぇるどっといんふぉ
420. Sono's Every day
421. SR ** P i c k U p **
422. STARLIT SKY
423. SUNDAY MORNING BLUE
424. Suzie World
425. SWEET WATER Web Server
426. Sweet*Season
427. swimmer's blog ver. 2.0
428. TAKE IT EASY. つれづれブログ
429. TAKUHAI ATHLETE
430. teaspoon
431. ten-don ?天丼?
432. TENERE
433. teraRhythm
434. The Simple Outdoor Life
435. TOKYO Runabout
436. Touring Report
437. ToyBox
438. Treasure
439. TsBlog
440. TUMIを買う　TUMIを使う
441. type le bleu :: provisoire*
442. Ui-ed
443. Un deux trois*days
444. Unknown
445. vanilla_cafe*
446. WAY TO GO
447. Weblog -Selfish-
448. weblog@nigiyakana jikan
449. WEBLOGROOVE
450. We're Murderer
451. wobb.jp
452. WORK NOTE BLOG
453. World without Words.
454. yamacot
455. Yggdrasill.
456. YUIHARU DIARY
457. zerothree.blog
458. zone-log
459. zora*
460. [ Slow "UO" Life ]
461. [美]Musabi Diary - a-bit-
462. [EF] Electric Flower
463. [ms-net] blog
464. 再起業に向けて
465. 出張生活
466. 出来るだけ、更新です。
467. 匠悟録
468. 南茶亭
469. 和道楽日記 - Kazulog -
470. 和尚の南無ログ
471. 喜怒哀楽
472. 夏のクラクション
473. 夏海の恋愛事情。
474. 大泉洋とどうでしょうな日々
475. 天上月苑
476. 嫌ならやめてもいいんじゃよ？
477. 子供達は夜の住人
478. 学生団体 IdeAct
479. 宵待小桜餅
480. 寝言、戯言、独り言。
481. 山の茶店の珍道中
482. 山吹の風
483. 己でサイトジャック
484. 帰宅部大学生のblog
485. 幻想バイオレンス
486. 広く、浅く、そして楽しく。
487. 弁慶の舞台裏
488. 彫刻道-ドイツ・彫刻・日記-
489. 後藤真希 ワオワオ記念日
490. 徒然なるままに･･･（?はるかなる日々）
491. 'ohana
492. 恵司日記
493. 我楽
494. 携帯アフィリエイト奮闘記
495. 改訂★裏赤玉号[改]日誌
496. 日々気まま(^^♪
497. 日々一歩-裏-
498. 日々之吉日
499. 明るい鬱病人間のふらふら雑記帖
500. 時は流れても・・・
501. 暮らし＊カフェな節約生活
502. 暮らし快適！ナチュラル家事のススメ
503. 月夜の浜辺
504. 本日のおすすめ !!
505. 東京ディズニーリゾート裏技完全攻略検定 情報局　Blog
506. 東京西郊日誌
507. 林檎と一緒に
508. 残像
509. 気が向いた時だけ
510. 気になる記
511. 気まぐれ日記
512. 水耕栽培を楽しもう
513. 水色飴
514. 永遠の風
515. 海苔部落
516. 深い雪
517. 三十路パパの子育てライフ＊
518. 世界の終わりは君と一緒に
519. 世知辛い世の中ですから(´･ω･`)
520. 温泉天国
521. 人間万事塞翁が馬　で行こう
522. 今日の覚え書き
523. 伊豆潜人の独り言
524. 住宅選び情報ナビ
525. 激安！サーフショップ
526. 信海忠如どっとこむ
527. || UTAGAME ||

Movable Type の著作権表示は、BlogCopyright Plugin を使ったカスタマイズが有名です。このプラグインは登録されている最初のエントリーと最後のエントリーから著作権の西暦を自動生成しますが、再構築した時点の年しか取得できません。つまり年をまたがった場合、再構築が行われるまでは更新されないことになります。

ということで、プラグインを少し修正して、リアルタイムカレンダーのように、リロードを契機に年表示を切り替える方法をご紹介します。日々更新されている方にとっては1年に数分?数時間しか有効にならないという甚だコストパフォーマンスの低い技ですが、年始末にブログを更新できない場合はお勧めです。ある意味、更新頻度が低い方ほど効果大です。

１．著作権表示の意味

カスタマイズの前に、一般的によくみかける

Copyright ©　2004 hogehoge All rights reserved. 

を例に、著作権表記の意味を記しておきます。

「Copyright」は著作権があることを意味します。© は「マルシーマーク（英語読みは「サークルシー」）」と読み、同じく著作権があることを意味します。この2つは意味が重複していますが、著作権の扱いが国によって異なるため、より多くの国において保護を受けられるようにという習慣からきているようです。西暦は著作物を公開した最初の年です（ハイフンで現在の年を表示しているのもよくみかけます）。hogehoge は著作権者で、最後の「All rights reserved.」は著作権以外の権利についても保持していることを示すものです。

次に、プラグインの設定方法です。

２．アーカイブのダウンロード

BlogCopyright Pluginより Download BlogCopyright のリンクをクリックしてアーカイブをダウンロードします。

３．プラグインのアップロード

アーカイブを解凍して、中にある BlogCopyright.pl を plugins ディレクトリにアップロードします。アップロード後、メインメニューの「プラグイン」をクリックして、「BlogCopyright.pl」が表示されていればOKです。

４．著作権表示用タグの設定

著作権表示を行いたいテンプレートの編集画面を開き、任意の場所に

<$MTBlogCopyright$>

を記述します。このタグが

Copyright c2004-2005

のような表示に置き換わります。

著作権者を表示する場合、つまり

Copyright c2004-2005 hogehoge

の青色部分を表示するには

<$MTBlogCopyright$> hogehoge

と直接記述する方法もありますが、メインメニューの「プロフィール」→「表示名」に設定していれば、その文字が表示されます。

または

<$MTBlogCopyright owner="hogehoge"$>

と owner 属性を与えます。owner_name に設定した文字が著作権者として表示されます。

「All rights reserved.」はタグまたは著作権者の後ろに直接記述してください。

５．リアルタイム化

４項まででプラグインの通常の動作が行えます。以下はリアルタイムのカスタマイズです。

５．１ プラグインの修正

BlogCopyright.pl を任意のエディタで開き、下記の赤色部分を削除して青色のものに置き換えます。

　　　　　　　　　：
# Add the years the blog has been up
if($first_year eq $last_year) {
$copyright .=  $first_year . ' ';
$copyright .=  ' <span id="fixyear">' . $first_year . '</span> ';
} else {
$copyright .= $first_year . '-' . $last_year . ' ';
$copyright .= ' <span id="fixyear1">' . $first_year . '</span>-<span id="fixyear2">' .$last_year . '</span> ';
}
　　　　　　　　　：

５．２ スクリプトの追加

著作権表示用タグを設定しているテンプレートの最後の方（<$MTBlogCopyright$> の後方であればOK）に下記のスクリプトを追加します。

<script type="text/javascript">
<!--
var data = new Date();
var year = data.getYear();
year = (year < 2000) ? year + 1900 : year;
var oldYear;
if(document.getElementById('fixyear')){
    oldYear = document.getElementById('fixyear').innerHTML;
    if(parseInt(oldYear) < parseInt(year)){
        document.getElementById('fixyear').innerHTML = oldYear + "-" + year;
    }
} else if(document.getElementById('fixyear2')) {
    oldYear = document.getElementById('fixyear2').innerHTML;
    if(parseInt(oldYear) < parseInt(year)){
        document.getElementById('fixyear2').innerHTML = year;
    }
}
//-->
</script>

リアルタイム化の仕組みは、５．１項で修正したプラグインで西暦部分に span 要素（id 属性が "fixyear"）を付与しています。そして５．２項のスクリプトでその西暦を取得し、サーバから取得した西暦と比較して、サーバの西暦の方が新しければ置き換えるようにしています。またブログに登録されているエントリーが同一年のものしかなく、サーバの西暦が新しい場合は初年と現在年を両方表示します。
JavaScript がOFFの場合は何も処理されません。

６．注意事項

span 要素を他の部分のCSSクラスセレクタとして利用している場合は、表示に影響する可能性があるのでご注意ください。

公開テンプレートのカラムレイアウトの下に著作権表示等のフッタを追加するためのカスタマイズです。スクリーンショットは固定レイアウトにフッタを追加したものです（フッタ部分のみ切り取って表示させています）。
Serene Bach 版はデフォルトでフッタを設定していますが、Movable Type 版は設定していなかったのでここでご紹介します。Serene Bach 版もカスタマイズすることで本記事のようなデザインに変更することが可能です。

なお、リキッドレイアウトと固定レイアウトでカスタマイズ内容が異なりますのでご注意ください。

１．固定レイアウトの場合

１．１ テンプレートにフッタを追加

フッタを表示したい各テンプレートの編集画面を開き、テンプレートの最後の方にある br 要素と div 要素（終了タグ）の間に青色で示したフッタを挿入します。

注：FC2ブログテンプレートの固定レイアウトにはフッタを用意してますので、１．１項の設定は不要です（CSSは若干異なりますので適宜変更してください）。

　　　　　　：
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
 
<br class="clear" />
 
<p id="footer">
Copyright &copy; 2007 xxxxx All Rights Reserved.
</p>
 
</div><!-- /box -->
 
</body>
</html>
　　　　　　：

１．２ スタイルシートにフッタ用CSSの追加

テンプレート編集画面でスタイルシート（styles-site.css）を開き、下記の設定を挿入します（とりあえず最後の方に追加してください）。

.layout-three-column #footer {
    margin : 30px 0 0;
    padding: 10px;
    border-top: 1px solid #666699;
    color: #ffffff;
    background: #8fabbe;
    font-size: 12px;
    text-align: center;
}

また本文とフッタの表示バランスを修正するために、下記の box セレクタおよび content セレクタについても、赤色から青色に修正すると良いでしょう。スタイルシートには似たようなセレクタが並んでいるので、「.layout-three-column #box」と「.layout-three-column #content」で検索しましょう。

.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    padding: 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
　　　　　　　：
　　　　　（中略）
　　　　　　　：
.layout-three-column #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    margin: 0 0 20px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}

２．リキッドレイアウトの場合

当サイトで公開しているリキッドレイアウトは左右カラムを absolute（絶対値）指定しており、中央カラムの縦幅と左右サイドバーの縦幅が連動しないため、固定レイアウトのように左右サイドバーにまたがったタイプのフッタ表示はできません。例えばフッタを中央カラムの下に割り当てると、サイドバーの縦幅が中央カラムの縦幅より長くなるとフッタとサイドバーの表示が重なってしまいます。
ということで、ここではサイドバーにはみ出さないように、中央カラムの下に著作権表示をする例をご紹介します。

注：FC2ブログテンプレートのリキッドレイアウトではフッタが表示されるようになっていますので、２項の設定は不要です。

２．１ テンプレートにフッタを追加

フッタを表示したい各テンプレートの編集画面を開き、テンプレートの途中にある中央カラム終了を示す div 要素（終了タグ）と、右カラム開始の div 要素の間に青色で示したフッタを挿入します。

　　　　　　：
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<p id="footer">
Copyright &copy; 2007 xxxxx All Rights Reserved.
</p>
 
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
　　　　　　：

２．２ スタイルシートにフッタ用CSSの追加

テンプレート編集画面でスタイルシート（styles-site.css）を開き、下記の設定を挿入します（とりあえず最後の方に追加してください）。

.layout-three-column-liquid #footer {
    margin : 15px 0 0;
    padding-top: 5px;
    color: #444444;
    font-size: 12px;
    text-align: center;
}

３．3.1xをご利用の場合

上記のカスタマイズは3.2x用です。3.1xまではCSSの設定が異なるため、１．２項にある

.layout-three-column #footer {
　　　　　　：
.layout-three-column #box {
　　　　　　：
.layout-three-column #content {
　　　　　　：

または２．２項の

.layout-three-column-liquid #footer {
　　　　　　：

の赤色部分を削除してください。

2005.12.23 追記
3.1x 用のカスタマイズ方法を追加しました。

2007.2.25 追記
HTMLマークアップを変更しました。それに伴い CSS も一部変更しました。

そろそろ年末ということで、実家への帰省を予定しています。
が、実家にはPCもネットワーク環境もなく、いつもVAIO C1R（MMX(R) テクノロジーPentium(R) プロセッサー（266MHz）／メモリ64MB／HDD4.3GB）という、年代もののノートPCを持ち帰り、それに携帯通信カードを接続してパケット通信するという、かなり軟弱な環境を強いられていました。

といっても、これまでは実家でPCを使う用もたいしてなかった（メールチェック程度）ため、十分用は足りていました。しかし今回、ブログを開設してから初めての長期の帰省で、エントリー投稿やコメントへのご返事、それにカスタマイズの考案のための作業等も引き続き行う予定でいます。
この状況で、今のノートPCで作業的に苦しいのは陽の目を見るより明らかで、

「新調しなければ」

という考えに至った訳です。

まずは秋葉原のヨドバシで現物を物色。基本的にBTOパソコン派なので、HP Compaq nx4820/CT ・Gateway MX6628j（これは非BTO）、あとSONY製品の「OWNER MADE」というカスタマイズ可能な機種がいくつかあり、その中から typeF を候補にしました。スペックは Pentium M プロセッサ 740／メモリ512MB を希望しています。なおHPは目当ての機種が売り切れで直接触れることはできませんでした。

家に戻って、HPモデルを公式サイトで確認したところ、カスタマイズモデルは海外製造で入荷に時間がかかるため年内入手は無理であることが判明。SONY製品も一部の部品が調達できないということが書かれており、これも年内入手困難なため断念。
完全に出遅れてしまっていることに気がつきました。

とりあえず再考のため再び秋葉原へ。なおデザイン的にHPまたはSONYが気にいっていたので、Gatewayは一旦候補から除外。またSONYよりもHPがやや気に入っていたので、HP nx4820/CTを探してみることにしました。
ヨドバシに行くとやはり品切れだったため、その足で在庫がありそうな「ツクモDOS/Vパソコン館」へ。

あまり期待していませんでしたが、意外にもHPが普通に置かれてました。しかもカスタマイズモデルの在庫も約10台ほどが積み上げられているという嬉しい状態。改めて現物を確認して気に入りました。
店員さんに在庫が多い理由を聞いてみると、

「他のお客さんがオンラインでカスタマイズ注文してキャンセルした品物がまとめて入荷した」

とのことで、たしかにスペックが微妙に異なるものばかり。
個人的には最初の条件を満たしていれば、HDDやドライブ等、残りのスペックはどうでもよかったのですが、表示金額はどれも明らかにオンラインショッピングで注文する値段より1万円以上安くなっていました。

デザインが気に入った上に「安い」というかなりの好状況。これは自然に欲も湧いてくるというもので、その場でどのスペックを選択すべきか、悩むこと約10分。

結局、しばらく買い直さない前提で、Pentium M プロセッサ 750／メモリ1GB／DVD±R/RWドライブという、当初よりかなりゴージャスなカスタマイズモデルを選択。
購入した機種（の外観）は以下です。そのあと別の人が同じカスタマイズモデルを購入されていたので、いいタイミングでゆっくり考えて選ぶことができました。

HP Notebook nx4820 (C360, 256MB, 14"WXGAウルトラクリアビュー, DVD/CDRW, 無線LAN, リサイクルシール) posted with amazlet on 05.12.21 ヒューレット・パッカード (2005/09/27) 売り上げランキング: 1,492 Amazon.co.jp で詳細を見る

家に戻ってオンラインショッピングで同じスペックを選択してみると、約3万円安い価格だったことが判明。なかなかお得な買い物でした。

ただ通信環境をどうするかは未検討です（笑）。

お知らせ等のちょっとしたデータの表示を周期的に切り替えるカスタマイズです。サンプルでは3秒周期でデータを切り替えるように設定しています。テンプレートに依存しませんので、JavaScript が使えればどのツールでも利用可能です。

以下、カスタマイズ方法です。

１．本文の設定

テンプレートの任意の位置、例えばお知らせに使用するのであれば、中央カラム上部等に下記の設定を挿入します。

<div id="info1">
お知らせ１
</div>
 
<div id="info2">
お知らせ２
</div>
 
<div id="info3">
お知らせ３
</div>

例は3種類のお知らせ用フォーマットを用意していますので、青色の部分にお好きな内容を設定してください。

２．イベントハンドラの設定

body 要素に青色のように onload イベントハンドラの設定をします。

<body onload="setInterval('changeLink()',10000)">

中に設定されている「10000」の部分は、msec（1/1000秒）を表す単位を設定します。「10000」は10秒周期を示しています。setInterval は JavaScript で用意された関数で、起動する関数と、周期を設定します。onload イベントハンドラでこの設定が実行されます。

３．スクリプトの設定

１項で設定した部分のすぐ下に、下記のスクリプトを追加します。

<script type="text/javascript">
var max = 3;
var n = 1;
function changeLink() {
    for(i = 1; i < max+1; i++){
        document.getElementById('info'+i).style.display = 'none';
    }
    if(!n || n > max) n = 1;
    document.getElementById('info'+n).style.display = 'block';
    n++;
}
changeLink();
</script>

４．フォーマットを増やす

フォーマットを増やす場合は、１項で設定した本文の下に、

<div id="info4">
お知らせ４
</div>
 
<div id="info5">
お知らせ５
</div>
　　　　：

という具合に、同じタグ構造のものを追加します。赤色の n には上から順番に数字を振ってください。最初のリストでは info3 まで割り振られているので、新しく追加する場合は順に info4、info5、… と割り振ります。

それから、フォーマットの合計数を、３項の2行目にある max の右辺に設定します。5種類のフォーマットを表示する場合は

var max = 3;

となっている部分、下記のように

var max = 5;

「5」に修正してください。

５．注意事項

アフィリエイトの商品リンク切り替えに使用される場合、利用規定で禁止されている場合もありますので、十分ご注意ください。

６．その他

２項のイベントハンドラの設定を行わずに、setInterval を３項のリストの最後に追加して

　　　：
changeLink();
setInterval('changeLink()',10000)";
</script>

とする手もあります。

Movable Type のカスタマイズ本が、また1冊発売されました。

Movable Typeブログ拡張パーツ&デザインガイド―プラグインや無料サービスを活用したブログの機能/デザインパワーアップ術 posted with amazlet on 05.12.25 エ・ビスコム・テック・ラボ 毎日コミュニケーションズ (2005/12) Amazon.co.jp で詳細を見る

画像がまだ表示されていませんが、エ・ビスコム・テック・ラボ 著書の

• Movable Typeスタイル&コンテンツデザインガイド―コンテンツ管理システム(CMS)ツールとしてのMovable Type活用術&実践サイトデザイン術
• Movable Type ブログテンプレート&デザインガイド―マルチユースなテンプレートによる効率的なブログ制作

に続く第3弾です。

内容は、Movable Type の拡張機能や各プラグインを利用したカスタマイズ方法、各種ツールの紹介等ですが、The Blog og Fujimoto：壱さんのブログ簡単パワーアップ Movable Type スーパーカスタマイズテクニックとはやや異なった趣の内容になっています。

表示上の不具合がいくつか残っていますが、とりあえず移転できました。自宅サーバの方は他で稼動しているサイトがあるので、このまま引き続き利用します。

新サーバは、評判が良いと思われる「さくらインターネット」です。プランは「スタンダードプラン（ディスク容量1GB）」です。かなりのエントリーや画像をジャブジャブ使っている割にはまだ200MBに満たないので、しばらくはこのプランでもちこたえられそうです。

なお今回の移転にあたっては、さくらインターネットのマニュアルにも載っているのですが、下記のエントリーも参考にさせて頂きました。ありがとうございました。

今日の覚え書き：ロリポからさくらへの移転記録

以下、自宅サーバからレンタルサーバへの移転手順を時系列で記します。

１．新サーバの事前準備

２．現サーバ

３．新サーバ

４．ドメイン取得会社

５．新サーバ

６．PCの hosts 変更

C:\WINDOWS\system32\drivers\etc\hosts ファイルに設定していた

192.168.0.xx    www.koikikukan.com

という設定を削除します。これはPCでDNS解決させてアクセスするための技です。

７．数々の失敗

次回移転時の備忘録として記しておきます。

• ダウンロード用スクリプト・プラグインのアップロードもれ
• sb/Serene Bach のテンプレートのアップロードもれ
• スタイルシート生成ツールのアップロードもれ
• StyleCatcher用リポジトリのアップロードもれ
• インデックステンプレート類のリンク切れ（インデックステンプレートはひとまとめに再構築したのですが、再構築オプションにチェックのついていないテンプレートの再構築を忘れていました）
• さらにナビゲーションバーのモジュール化（再構築後にディレクトリを変更したためナビゲーションバーが表示されない状態になっていました）
• JavaScript にもバグがあったため（既存）、併せて修正

2005.01.06 追記
７項を修正しました。

１．BlogList を div タグ等で括る

下記のように BlogList を表示するタグを div 要素で括り、id 属性 hogehoge を div 要素に記述してください。

<div id="hogehoge">
<script language="javascript" src="http://list.blog.rss.drecom.jp/xxxxx/" charset="UTF-8"></script>
</div>

Serena Bach で定義型リスト（dl - dt - dd）を使っている場合は、下記のように dd 要素の中に div 要素を与えてください。

<dl class="xx">
<dt id="xxname">LIST</dt>
<dd id="xxlist">
<div id="hogehoge">
<script language="javascript" src="http://list.blog.rss.drecom.jp/xxxxx/" charset="UTF-8"></script>
</div>
</dd>
</dl>

２．表示タグにスクリプトの追加

下記のスクリプト（青色部分）を、１項で修正したタグの下に追加してください。

<div id="hogehoge">
<script language="javascript" src="http://list.blog.rss.drecom.jp/xxxxx/" charset="UTF-8"></script>
</div>
 
<script type="text/javascript">
<!--
id = 'hogehoge';
image = 0;
 
tag1 = '<a';
if (window.navigator.userAgent.indexOf("MSIE") != -1) {
    tag1 = tag1.toUpperCase();
}
if (!image) {
    tag2 = 'By DrecomRSS<';
} else {
    tag2 = 'drecomrss_banner';
}
nodes = document.getElementById(id).innerHTML;
data = '<div class="drecomrss-main">';
list = nodes.split(tag1);
counter = 0;
for (i = 0; i < list.length; i++) {
    if(list[i].indexOf('window.open') != -1) {
        data += '</div><div class="drecomrss-listMe">' + tag1 + list[i];
        break;
    }
    if(list[i].indexOf(tag2) != -1) {
        data += '</div><div class="drecomrss-powered-by">' + tag1 + list[i];
    } else {
        if(counter){
            data += tag1;
        }
        data += list[i];
    }
    counter++;
}
document.getElementById(id).innerHTML = data + '</div>';
//-->
</script>

赤色で示した

id = 'hogehoge';
image = 0;

ですが、上の hogehoge の部分に、１項で設定した id 属性と同じものを設定してください。下の 0 は、クレジットバナーにスクリーンショットのように画像を表示している場合は 1 に修正してください。「Powered by DrecomRSS」という文字を表示する場合、修正は不要です。

３．スタイルシートの設定

BlogList用のCSSとして、スタイルシートに下記を追加します。

.drecomrss-main {
    overflow: auto;
    height: 200px;
    font-size: 10px;
}
 
.drecomrss-powered-by {
    margin-top: 10px;
    margin-bottom: 0px;
}
 
.drecomrss-listMe {
    margin-top: 0px;
}

スクロールバーの高さを変える場合は

.drecomrss-main {
    overflow: auto;
    height: 200px;
    font-size: 10px;
}

の赤色部分を修正してください。

2006.07.31 追記
３項に font-size プロパティを追加しました。

当サイトは現在自宅サーバで運用しておりますが、近日中にサーバを移転することに致しました。

理由は、これまでに連載してきたApacheの不具合により、アクセスできなくなる（厳密にはページが表示されるまでに非常に時間がかかる）ケースが度々発生しているためです。またそれを解消するためApacheの再起動やWindowsの再起動も日に何回か行うように自動設定しており、それによって一時的にアクセスできなくなる時間も軽視できません。

開始当初はたいしたアクセスもなく、Apacheの不具合についても意識していなかったのですが、最近では終日かなりのアクセスを頂けるようになり、より安定した品質でサイトを運営した方がいいだろう、というのが大きな理由です。また私自身、サーバの不具合で日々頭を悩ませるという精神衛生上良くない状態から脱却したいというのもあります。
Linuxで自宅サーバを立ち上げれば Apacheの不具合は解消すると思われますが、今のところそこまでする余裕はありません。

移行作業は、新サーバ側についてはエントリー以外の設定は大体完了しています。あとは現サーバからエントリーのバックアップを取得し、それを新サーバ側に転送（書き込み）して、その後にDNSを切り替えるという予定です。ということで、バックアップを取得してから新サーバに切り替わる間はコメント・トラックバックを受け付けないように設定させて頂きますので、予めご了承ください。

明日夜に切り替える予定です。

すでにお気づきの方もいらっしゃると思いますが、昨日 3.171-ja から 3.2-ja-2 にようやくアップグレードしました。以下、アップグレード時のメモです。手順は Windows 自宅サーバのものですので予めご了承ください。

• mt-comments.cgi、mt-tb.cgi のファイル名変更（コメント・トラックバック抑止のため）
• エントリーのバックアップ
• 念のため phpMyAdmin を利用して MySQL のデータもバックアップ
• cgi-bin 配下のファイルを丸ごとコピーしてバックアップ（盛り込んでいるパッチ類を新ファイルに適用させるため）
• 3.2-ja-2 のパッケージを解凍し、search_template 以外のすべてのディレクトリ・ファイルを上書き
• 3.2-ja-2 の mt-comments.cgi、mt-tb.cgi のファイル名変更（コメント・トラックバック抑止のため）
• mt-config.cgi-config の内容を修正してファイル名を mt-config.cgi に変更
• mt-check.cgi 実行→OK
• mt.cgi 実行→自動認識によりアップグレード開始画面へ遷移
• アップグレード実施→OK（緊張しました…）
• クレジットバナーの再構築（モジュール化しているため個別に再構築）→「3.2-ja-2」が表示
• 全てのアーカイブを試しに再構築→OKでしたが Util.pm の修正を忘れており、記事のリスト類の改行が欠落してしまったため、再度再構築

また、アップグレードを実行した後、MySQLのデータサイズを変更するのを忘れていたことに気がつきましたが、問題ありませんでした。

「プロフィール」用テンプレートの作成方法です。以前書いたプロフィールのページを作るが3.1xまでしか対応していなかったので、3.2-ja～3.35-ja用に書き直しました。なおここでご紹介するのは公開テンプレート用ですので予めご了承ください（デフォルトテンプレートのものは別途エントリーします）。

同様の手法で「このサイトについて」や「注意事項」のページを色々と作ることができます。プロフィール自体をエントリーとして追加する方法もありますが、ここではインデックステンプレートとして追加し、その中に直接コンテンツを記述する方法を説明します。

１．プロフィール用テンプレートの作成

Movable Type 管理画面左メニューの「テンプレート」をクリックし、右側上に表示されている「テンプレートを新規作成 」をクリックしてください。次に表示された画面で以下の項目を設定します。

• テンプレートの名前：Profile
• 出力ファイル名：profile.html（とりあえずこの名称で）
• 「インデックス・テンプレートを再構築する時に～（中略）～」をチェック
• このテンプレートにリンクするファイル：何も設定しない
• テンプレートの中身：下記のリストを丸ごとコピー＆ペーストしてください。

リストは3カラム（固定）用の設定になってますので、カラムレイアウトはご自身の設定されているものに合わせて修正してください。

２．テンプレートにコンテンツ記述

タイトルや本文に該当する部分に、プロフィールの内容（コンテンツ）を直接書き込んでください。書き込む場所（=修正する場所）はテンプレートにある下記の青色で示す部分です。

<!-- タイトル開始 -->
<h2 class="date">プロフィール</h2>
<!-- タイトル終了 -->
 
<!-- タイトルの内容1開始 -->
<div class="entry">
 
   <!-- エントリータイトル -->
   <h3 class="entry-header">●名前</h3>
 
   <!-- エントリー -->
   <div class="entry-content">
      <div class="entry-body">
小粋太郎
      </div>
   </div><!-- /entry-content -->
 
</div><!-- /entry -->
<!-- タイトルの内容1終了 -->
 
<!-- タイトルの内容2開始 -->
<div class="entry">
 
   <!-- エントリータイトル -->
   <h3 class="entry-header">●性別</h3>
 
   <!-- エントリー -->
   <div class="entry-content">
      <div class="entry-body">
男
      </div>
   </div><!-- /entry-content -->
 
</div><!-- /entry -->
<!-- タイトルの内容2終了 -->
 
<!-- タイトルの内容3開始 -->
<div class="entry">
 
   <!-- エントリータイトル -->
   <h3 class="entry-header">●さらに詳しく</h3>
 
   <!-- エントリー -->
   <div class="entry-content">
      <div class="entry-body">
あいうえお
      </div>
   </div><!-- /entry-content -->
 
</div><!-- /entry -->
<!-- タイトルの内容3終了 -->

入力および編集後、テンプレートを保存して再構築し、ブラウザより index.html のURL+出力ファイル名でアクセスして表示を確認してください。

３．サイドバーメニューにプロフィールページのリンク設定

メインページ等のサイドメニューやナビゲーションバーにリンクを追加します。フォーマットは各自のメニューのフォーマットに合わせてください。

<div class="side">
<a href="<$MTLink template="Profile">">プロフィール</a>
</div>

リスト中にある MTLink は、template 属性で指定された Profile（これは１項で設定した「テンプレートの名前」です）に該当するファイルを読み込む機能をもっています。
リンク追加後、保存して再構築します。

４．コンテンツのサブタイトル数について

ここでは３つのサブタイトル（名前・性別・さらに詳しく）を入力できるフォーマットを公開していますが、

<!-- タイトルの内容x開始 -->
<div class="entry">
 
   <!-- エントリータイトル -->
   <h3 class="entry-header">●サブタイトル</h3>
 
   <!-- エントリー -->
   <div class="entry-content">
      <div class="entry-body">
サブタイトルの内容
      </div>
   </div><!-- /entry-content -->
 
</div><!-- /entry -->
<!-- タイトルの内容x終了 -->

がひとつのサブタイトル全体を表示する単位ですので、このタグを丸ごと追加すればサブタイトルをお好きなだけ増やすことができます（減らすこともできます）。

以下、カスタマイズ方法です。

まず、カテゴリーのプルダウン化プラグイン for Serene Bach の１?３項までの作業を行ってください。そして４項の作業について、下記の内容に変更して実施してください。

４．独自タグの設定２

blog*citron さんのベースHTMLテンプレートのサイドバーに設定されているカテゴリー表示用のブロック名および独自タグを、「変更前」のリストから「変更後」のリストに変更してください。

変更前

<!-- BEGIN category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">{category_list}
{subcategory_list}</dd>
</dl>
<!-- END category -->

変更後

<!-- BEGIN fold_category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">
<div id="categories">{fold_category_list}</div>
</dd>
</dl>
<!-- END fold_category -->

元のタグは全て残していますのでスタイルへの影響はないと思いますが、CSS の設定を変更されている場合は #categorylist 配下に #categories の追加が必要になるかもしれません。もし現在のスタイルが適用されなくなってしまった場合は、お手数ですがご連絡ください。

またスクリーンショットは、エントリー件数と折りたたみマークの間にスペースを設けて表示していますが、これは元記事の５項の作業を行ってください。

2008.09.22 本プラグインはバージョンアップしています。
詳細は「Serene Bach カテゴリーのプルダウン化プラグイン v3.00」をご覧ください。

2007.04.02 本プラグインはバージョンアップしています。
詳細は「カテゴリーのプルダウン化プラグイン・バージョンアップ」をご覧ください。

プルダウンの仕様は下記の通りです。

• 親カテゴリーに折りたたみマークを表示します。
• cookie を利用して折りたたみ状態を保持しますので、リロードやブラウザを新しく開いても以前の折りたたみ状態を表示することができます。
• 設定を変更することで折りたたみマークをカテゴリーの左側に表示させることもできます。
• 親カテゴリーの記事数を子カテゴリーの記事数と合算表示できます。
• カテゴリー名の横に新着表示が可能です。
• ツリー化スクリプトとの併用が可能です。

プルダウン動作は Windows2000/XP の IE/Firefox/Opera で確認しております。他の環境はもっておりませんので予めご了承ください。

前置きが長くなりましたが、以下カスタマイズ方法です。

１．プラグインのダウンロード・アップロード

下記の FoldCategory.zip または FoldCategory.lzh をクリックして、プラグインのアーカイブをダウンロードしてください。

修正履歴

2005.12.09 初版
2006.02.12 個別エントリーで表示されるカテゴリーリストの各カテゴリー件数が全て0になる不具合を修正
2007.10.13 親カテゴリーにサブカテゴリーの記事数を合計して表示・記事数の表示・非表示の切り替え・記事数を括るマークに任意の文字列を設定可能
2008.07.03 記事がないカテゴリーに「0件」を出力する不具合を修正
2008.08.28 記事がないカテゴリーにリンクを設定する不具合を修正
2008.09.22 新着表示プラグイン（サブカテゴリーリスト版）と合体

FoldCategory.zip

ダウンロードしたアーカイブを解凍し、中にある FoldCategory.pm を plugins ディレクトリ直下に、resource/ja/foldcategory.txt を、同じディレクトリの構成があると思いますので、foldcategory.txt のみを ja 配下にアップロードしてください。

アップロードの後、Serene Bach の管理画面を起動し、「環境設定」→「プラグイン」をクリックし、プラグイン一覧に FoldCategory.pm が表示されていることを確認し、一番右のチェックボックスをチェックして右下の「利用する」をクリックしてください。

２．スクリプトのダウンロード・アップロード

このプラグインを動作させるためには menufolder.js というスクリプトが別途必要になります。サイドメニューの折りたたみで menufolder.js をすでにお使いの場合は、本項目および３項の作業をスキップしてください。下記のリンク先より menufolder.js をダウンロードしてください。ダウンロードした menufolder.js を index.html のあるディレクトリにアップロードしてください。

download

３．独自タグの設定１

２項でダウンロードした menufolder.js を使うための宣言を、ベースHTMLテンプレートに設定します。個別エントリー用HTMLテンプレートを設定している場合はそちらも同じ設定を行ってください。
下記のように </head> の前辺りに青色のブロックおよび独自タグを設定します。

　　　　　　：
<!-- BEGIN fold_category -->
{fold_category_script}
<!-- END fold_category -->
</head>
　　　　　　：

４．独自タグの設定２

ベースHTMLテンプレのサイドバーに設定しているカテゴリー表示用のブロック名および、独自タグを下記のように変更してください。

　　　　　　：
<!-- BEGIN fold_category -->
<div class="sidetitle">Categories</div>
<div class="side" id="categories">{fold_category_list}</div>
<!-- END fold_category -->
　　　　　　：

ブロック名は fold_category 、独自タグ名は fold_category_list となります。リストは公開テンプレートを例に記していますが、div タグの有無や class 属性の名称は現在お使いのままで結構です。ただし赤色で示している、

id="categories"

は必須となりますのでご注意ください。

注意：blog*citron さん、ボムガールさん、宵闇書房さん、Millibar さんのテンプレートのように、カテゴリーリストが dl/dt/dd で括られていている場合、元の id 属性を変更せずに、下記のようにブロック名の変更と、独自タグを div 要素で括る形で設定してください。

　　　　　　：
<!-- BEGIN fold_category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">
<div id="categories">{fold_category_list}</div>
</dd>
</dl>
<!-- END fold_category -->
　　　　　　：

５．折りたたみマークに関するカスタマイズ

基本的な設定は以上ですが、折りたたみマーク
なおデフォルトではスペースがないため、menufolder.js を任意のエディタで開き、下記の青色部分のように「1」に変更すれば、スクリーンショットのように件数とマークの間にスペースが挿入されます。

　　　　　　　：
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;
　　　　　　　：

また、カテゴリー名の左側に折りたたみマークを表示する場合は、同じファイルの下記の青色部分のように「true」を設定します。

　　　　　　　：
// サブカテゴリー用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置：true
// カテゴリー後に折りたたみマークを配置：false
var preMarkForSubCategory = true;
　　　　　　　：

６．スクリプトの追加（新着表示を行う場合のみ）

まず、８項の設定画面で「新着表示」を「新着表示対応する」に設定してください。

次に、ベースHTMLテンプレートの、４項で設定した独自タグのすぐ後ろに、下記のスクリプト（青色）を追加してください。

　　　　　　　：
<!-- BEGIN fold_category -->
<div class="sidetitle">Categories</div>
<div class="side" id="categories">{fold_category_list}</div>
<!-- END fold_category -->
 
<script type="text/javascript">
//<![CDATA[
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date();
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
    if(spans[i].getAttribute('class') == 'new' ||
       spans[i].getAttribute('className') == 'new') {
        var now = (spans[i].innerHTML - (Math.ceil(currentDate.getTime()/1000))) /(60*60);
        now = Math.ceil(now);
        if(-now <= pass){
            spans[i].innerHTML = content;
            spans[i].style.display = 'inline';
        }
    }
}
//]]>
</script>

新着表示の時間は

// passage time
var pass = 24;

の赤色部分を変更します。単位は時間です（例は24時間）。

表示させる内容は

// display content
var content = 'New!!';

の赤色部分を変更してください。HTMLタグも大丈夫ですので

var content = '<img src="http://～/hogehoge.gif" style="vertical-align: middle" />';

とすれば画像を表示することもできます。

７．スタイルシートの設定（新着表示を行う場合のみ）

スタイルシートに下記の設定を追加します。最初の display プロパティで１項のタグに設定したタイムスタンプを非表示にします。その下の color プロパティと font-weight プロパティは、 New!! という文字が表示された場合に適用される設定です。

span.new {
    display: none;
    color: red;
    font-weight: bold;
}

プロパティは適宜変更してお好みのデザインにしてください。

８．設定画面

• 記事数表示
• 親カテゴリーへの子カテゴリーの合算
• 記事数表示を括る文字
• 新着表示

については、管理画面の「追加機能」に表示された「カテゴリーのプルダウン化」のページ（下）から設定できます。

９．その他

なお本プラグインは sb パッケージに含まれる

sb/Content.pm::_category_tree

sb/Content.pm::_list_category

を利用したものです（sb研究所様へは連絡済）ので、プラグイン改造等による再配布はご遠慮ください。

2005.12.10
ブログの文字コードがEUCの場合の考慮がもれていましたので、プラグインを修正しました。

2005.12.12
他サイトの公開テンプレートへの適用例を追加しました。

2008.08.24
プラグインの修正履歴を追加しました。

2008.09.22
６項～８項を追加しました。

Serene Bach カレンダーの本日の日付をリアルタイムに切り替えるプラグインです。

Serene Bach のカレンダーは、本日の日付に span 要素を自動的に付与し、その class 属性 today をCSSで利用することで、日付に枠をつける等の装飾を行うことができます。
ただし index.html 等のスタティックなページについては、日付が変わっても次の再構築が発動するまで日付の装飾を変更することができません。

ということで、過去の日付に与えられている class 属性（today）を本日の日付に付与しなおすプラグインを作りました。スクリーンショットは12月8日に枠がついている状態ですが、この枠を再構築なしで12月9日以降に移動することができます。すでに同じカスタマイズが公開されているようですが、作ってしまったので公開します。プラグイン形式ですが、中身は単なる JavaScript です。

Serene Bach で提供されているカレンダーをそのまま使うことができます。calendar ブロックの独自タグ {calendar} / {calendar2} / {calendar_horizontal} / {calendar_vertical} の4種類のカレンダー全てについて、Windows2000/XP の IE/Firefox/Opera で動作を確認していますが、不具合等ございましたらご連絡ください。

以下カスタマイズ方法です。

１．プラグインのダウンロード・アップロード

下記の RealTimeCalendar.zip または RealTimeCalendar.lzh をクリックしてアーカイブをダウンロードします。

• RealTimeCalendar.zip
• RealTimeCalendar.lzh

アーカイブを解凍し、中にある RealTimeCalendar.pm を plugins ディレクトリ直下に、resource/ja/rtcalendar.txt を、同じディレクトリの構成があると思いますので、rtcalendar.txt のみを ja 配下にアップロードしてください。

アップロードのあと、Serene Bach の管理画面を起動し、「環境設定」→「プラグイン」をクリックし、プラグイン一覧に RealTimeCalendar.pm が表示されていることを確認し、一番右のチェックボックスをチェックして右下の「利用する」をクリックしてください。

２．ブロックと独自タグの追加

カレンダータグの下に、下のサンプルリストのようにリアルタイムカレンダースクリプト表示用のブロックおよび独自タグ（青色部分）を追加します。

<!-- BEGIN calendar -->
<div class="side">
<div class="calendar">
{calendar2}
</div>
</div>
<!-- END calendar -->
 
<!-- BEGIN rt_calendar -->
{rt_calendar_script}
<!-- END rt_calendar -->

３．カレンダーに id 属性の追加

カレンダータグに、下のサンプルリストのように id 属性として rt_calendar （青色部分）を追加します。

<!-- BEGIN calendar -->
<div class="side">
<div class="calendar" id="rt_calendar">
{calendar2}
</div>
</div>
<!-- END calendar -->
 
<!-- BEGIN rt_calendar -->
{rt_calendar_script}
<!-- END rt_calendar -->

サンプルでは公開テンプレートを使って、内側の div タグに id 属性を付与していますが、タグの構造が異なる場合は、{calendar2} 等の独自タグを何らかのタグで括っていると思いますので、そのタグに id 属性を与えてください。

もし他の id 属性がタグに付与されている場合は、ひとつのタグに id 属性を複数与えることはできませんので、先ほどアップロードした RealTimeCalendar.pm を任意のエディタで開き、37行目の

var id = 'rt_calendar';

の赤色部分を、現在使っている id 属性に書き換えてやってください。

４．公開テンプレートをお使いの方へ

公開テンプレートで本プラグインを適用した場合、本日の日付にリンクがあると、リンクのスタイル（色や下線）が適用されなくなるようですので、スタイルシートにある下記の赤色部分を削除（またはコメントアウト）してください。

.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}

以上です。
なおプラグイン作成にあたっては The blog of H.Fujimoto さんの Serene Bach 用プラグインを参考にさせて頂きました。この場をお借りしてお礼申し上げます。

既にご存知の方も多いと思いますが、BlogPeople を主宰されている ModernSyntax の nagasawa さんが本を出されまして、私の好きなハウツーものでしたので早速購入しました。

ブログのもと―モダシンPresents posted with amazlet on 05.12.08 永沢 和義 毎日コミュニケーションズ (2005/12) Amazon.co.jp で詳細を見る

前半は、これからブログを始める人や、始めてみたけれどうまくいかない人たちへのアドバイスになっています。もちろんブログを順調に継続されている方にとっても役に立つ内容で、ブログのメリット・デメリット、書いていいこと・良くないこと、ネタがない時や忙しい時の対処方法、各種サービスを利用した効率化・アクセスアップ方法等が、リアルタイムにブログに携わっている方の視点で、分かりやすく記されています。
つまり、経験豊かなブロガーのノウハウがここに凝縮されているという訳です。

後半は BlogPeople の利用方法が丁寧に解説されており、各サービスの説明はもちろん、BlogPeople に関する裏話が色々と暴露されているので、BlogPeople を日頃利用されている方にとっては読み応え十分ではないでしょうか。個人的にはバナー変遷の話を興味深く読ませて頂きまして、モチベーションが改めて上がりました。

また後半の章でもサービスを利用することによるアクセス・コミュニケーションアップの方法が記されています。実際、それらに関する内容は私も同感するところが結構あり、 BlogPeople の利用で少なからずアクセスやコミュニケーションを増やす恩恵に授かっているので、伸び悩んでいる人にとってはかなり有用な1冊になるのではないでしょうか。

月別アーカイブページに表示されたカレンダーに、簡単に月送り用のリンクをつけるカスタマイズです。

通常の1ヶ月カレンダーは月送りができないため、過去に作った日別アーカイブへのリンクがなくなってしまうという欠点があり、月送りカレンダーが急速に普及したという経緯があります。ですが、月送りカレンダーは専用のアーカイブテンプレートを作ったり、表示のために iframe 要素を使用したりと、やや複雑なカスタマイズになるというのが難点でした。

このカスタマイズではそのような手間はいらず、下にあるリストを貼り付ければ通常のカレンダーが月送りカレンダーに早代わりします。また Serena Bach（sb） のように、前月または次月のリンクをクリックするとページ全体も切り替わるのが利点です。

ただし月送りになるのは月別アーカイブページのみです（利用可能なアーカイブが限定されているので「簡易版」と命名しました）。メインページやカテゴリー・アーカイブ、エントリー・アーカイブは1ヶ月表示のままです。
簡易版といっても、カレンダーの切り替えが必要なのは基本的に月別アーカイブなので、個人的にはお勧めのカスタマイズです。

ひとつだけ注意事項がありまして、日付アーカイブテンプレートは他の日別アーカイブページ・週別アーカイブページと兼用になっていますが、このカスタマイズを行うと、これらのアーカイブのカレンダーにも同様のリンクが設定されることになります。ただし日別アーカイブではこのリンクが昨日（または明日）、週別アーカイブでは先週（または次週）のリンクになり、見栄えとしてはやや妙なものになります。

このため、カスタマイズ前の日別アーカイブテンプレートを丸ごとコピーした、新しい日付アーカイブテンプレートを作り、日別アーカイブ（または週別アーカイブ）はこのテンプレートと関連づけることをお勧めします（やっぱり面倒！というツッコミはなしで）。
新しくアーカイブテンプレートを作る方法は、このエントリーでは割愛しますので、アーカイブテンプレート作成方法を参照ください。

以下、カスタマイズ方法です。

１．テンプレートを修正する

管理画面から「テンプレート」→「アーカイブ」をクリックして「日付アーカイブ」を選択します。カレンダーを表示したい位置に下記のリストを挿入します。デフォルトテンプレートは1カラムのため、ここでは公開テンプレートを例にしています。本日の日付を表示するリアルタイムカレンダーも組み込んでます。
デフォルトテンプレートの場合は、事前に2カラムまたは3カラムへの変更を行ってください。

<!-- カレンダー開始 -->
<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTCalendarDate format="%B %Y"$>">
<caption class="calendarhead">
<MTArchivePrevious><a href="<$MTArchiveLink$>">«</a> </MTArchivePrevious>
<$MTCalendarDate format="%B %Y"$>
<MTArchiveNext> <a href="<$MTArchiveLink$>">»</a></MTArchiveNext>
</caption>
<tr>
<th abbr="Sunday"><span class="calendar"><span class="red">Sun</span></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><span class="blue">Sat</span></span></th>
</tr>
 
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span class="calendar"></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries sort_order="ascend">
<MTDateHeader><a href="<$MTEntryPermalink archive_type="Daily"$>" title="</MTDateHeader><$MTEntryTitle$><MTDateFooter>" target="_top"><$MTCalendarDay$></a><MTElse> / </MTElse></MTDateFooter>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>
</MTIfArchiveTypeEnabled>
<!-- カレンダー終了 -->
 
<script type="text/javascript">
<!--
data = new Date();
year = data.getYear();
year = (year < 2000) ? year + 1900 : year;
month = data.getMonth() + 1;
date = data.getDate();
table = document.getElementById('calendarTable');
flag = 0;
summary = table.getAttribute('summary');
text = year + '年' + month + '月';
if (summary.indexOf(text) != -1) {
    elements = table.getElementsByTagName('span');
    for(k = 0; k < elements.length; k++) {
        if (elements[k].childNodes){
            if((elements[k].childNodes)[0].nodeName == 'A') {
                if((elements[k].childNodes)[0].innerHTML == date) {
                    elements[k].parentNode.setAttribute('class','today');
                    elements[k].parentNode.setAttribute('className','today');
                }
            } else {
                if (elements[k].innerHTML == date) {
                    elements[k].parentNode.setAttribute('class','today');
                    elements[k].parentNode.setAttribute('className','today');
                }
            }
        }
    }
}
//-->
</script>

設定したら保存・再構築してください。

２．通常カレンダーとの相違点

JavaScript を除いて、1ヶ月表示のカレンダーとの違いは、下記で示す部分です。削除または変更前を赤色で、追加または変更後を青色で示しています。

具体的には、2ヶ所ある MTDate タグを MTCalendarDate に変更し、MTCalendar に month 属性で this（今月）を付与します。あとは前月と次月のリンクを追加しています。

<!-- カレンダー開始 -->
<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTDate$MTCalendarDate format="%B %Y"$>">
<caption class="calendarhead">
<MTArchivePrevious><a href="<$MTArchiveLink$>">«</a> </MTArchivePrevious>
<$MTDate$MTCalendarDate format="%B %Y"$>
<MTArchiveNext> <a href="<$MTArchiveLink$>">»</a></MTArchiveNext>
</caption>
<tr>
<th abbr="Sunday"><span class="calendar"><span class="red">Sun</span></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><span class="blue">Sat</span></span></th>
</tr>
 
<MTCalendar month="this">
　　　　　　　　　　　　　　　　：

３．日別アーカイブのカレンダーについて

冒頭で説明した通り、日別アーカイブはカスタマイズ前の日付アーカイブテンプレートを利用されていることが前提ですが、日別アーカイブも同じカレンダーを利用し、不要な前月および次月のリンク（<MTArchivePrevious>～</MTArchivePrevious> と <MTArchiveNext>～<MTArchiveNext>）を削除することで、ページに表示されている日と同じ月が表示されるようになります。

行く

　　　　　　：
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span class="calendar"></MTElse></MTCalendarIfBlank>
<MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a>
</MTEntries>
<MTEntries><MTDateHeader><a href="<$MTEntryPermalink archive_type="Daily"$>" title="</MTDateHeader><$MTEntryTitle encode_html="1"$><MTDateFooter>" target="_top"><$MTCalendarDay$></a><MTElse>&nbsp;/&nbsp;</MTElse></MTDateFooter></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
　　　　　　：

上記のリストでは、記事を新着順に表示する設定になっています。順番を入れ替える場合は、

<MTEntries>

の部分を

<MTEntries sort_order="ascend">

に変更してください。

またタイトルとタイトルの区切り文字には "/" にしていますが、他の文字に変更する場合は

<MTElse>&nbsp;/&nbsp;</MTElse>

の赤色部分を任意の文字に書き換えてください。区切り文字の左右は文字実体参照 &nbsp; を使って空白を挿入していますので、不要であれば削除してください。

2007.03.06 追記
MTEntryTitle タグに encode_html 属性を追加しました。

先日エントリーしたリアルタイムカレンダー（JavaScript版）ですが、スクリプトに誤りがあり、枠の装飾がきちんとできていないことが再度発覚致しました。この場をお借りしてお詫び申し上げます。
リストは修正し、日付にリンクのある場合とない場合の動作を IE/Firefox/Opera で確認致しました。2005/12/04 00:10 以前にリストを取得された方はお手数ですが、２項の作業を再度行ってくださいますよう、よろしくお願い致します。

なお <MTCalendar> ? </MTCalendar> の間の改行は変更されないよう、そのままお使いください。改行を変更されると Mozzila系ブラウザで装飾が行われなくなる可能性があります。

流行語大賞の発表があり、その中に「ブログ」が選ばれていたことは皆さんご存知のことと思います。自分の中ですっかり定着した単語がこのような場で認知されるということは、なにはともあれ嬉しいものです。

「ブログ」という言葉が生まれてから数年が経ちました。言葉の範囲は捉え方によって異なると思いますが、私の感覚では Movable Type や Serene Bach 等のブログツール、あるいは各種ブログサービスを利用したWebサイトがいわゆる「ブログ」で、「ホームページ」とはニュアンスの異なる印象を感じています。

自分の中では定着したと言っても、Webサイトを指す言葉は「ホームページ」という用語が一般的で、他の方に説明する時、ブログを「ホームページ」と言い換える機会も少なくありません。ですが「ブログ」が単なる流行語ではなく、一般的な用語として世間に浸透し、誰にでも通じる日がくるのもそう遠くないのではないかと予感しています。

下のリンクからテンプレートをダウンロードできますのでご利用ください。「個別エントリー用HTMLあり」はテンプレートの個別エントリー用HTMLテンプレートにも反映されます。CSSに不具合があったためパッケージを差し替えました。2005/12/03 13:50 以前にダウンロードされた方は再ダウンロードされるか、CSSテンプレートの1行目（@charset）を削除願います。

• ZIP形式
• ZIP形式：個別エントリー用HTMLあり
• LZH形式
• LZH形式：個別エントリー用HTMLあり

Serene Bach との差分については、sbのバージョン表示関連は気がついたので直しましたが、他は下記を参考に修正致しました。ありがとうございました。

ボムガール：テンプレートをsbで使用する場合

2005.12.03 追記
CSSに展開されない独自タグ（{site_encoding}）が残っていたため削除しました。