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

最近バージョンが新しくなったようですが、日本生命CM・BGMのアコースティックな音色はいつ聴いても心が癒されます。

日本生命：CM情報より

• 愛する人のために ?セーフ篇?
• 愛する人のために ?改札篇?
• 愛する人のために ?柱篇?

BGMはエンニオ・モリコーネ作曲「ニュー・シネマ・パラダイスのテーマ」。

この演奏者がどなたなのかネットで調べてみたところ、ほとんど情報ありませんでしたが、山崎ハコさんのサイトでようやく発見。

山崎ハコの世界：お知らせ

ギター奏者は安田裕美さん（山崎ハコさんのご主人）という方でした。ウィキペディア「スタジオ・ミュージシャン」の項目によると「アコースティックギター中心で、主として井上陽水のアルバム製作をサポート」。その他、多方面で活躍されているようです。
編曲はアニメ作曲家の岩崎琢さん。

が、残念ながらCMのためだけに作られた曲らしいので、ここではアコースティックな音色が似ているということで、古澤巌＆アサド兄弟のCDを掲載しておきます。

出会い~from"New Cinema Paradise"to"Pink Floyd/The Wal 古澤巌 アサド兄弟 モリコーネ ソニーミュージックエンタテインメント 1999-07-01 売り上げランキング : Amazonで詳しく見る by G-Tools

いずれも音楽界では著名な方で、アサド兄弟は「スーパー・ギター・デュオ」と呼ばれており、絶妙なアンサンブルを楽しませてくれます。

フォントサイズ切り替えツールの紹介です。

50ism.com：ブログ文字拡大ツールα版

これは提供されているスクリプトをサイトに貼り付けるだけで、フォントサイズ切り替え用のアイコン（左）が表示されるというもので、フォントサイズを大・中・小の三段階に切り替えらることができます。 このサービスでは2種類のスクリプトが用意されていますが、片方のスクリプト（ページ上）はフレーム表示に切り替わるため、個人的にはもう一方（ページ下）の

<script language="javascript" src="http://www.50ism.com/blogsize/js/normal.js"></script>

がお勧めです。

ただしスタイルが予め設定されているため、若干手を加え、公開テンプレートのサイドバーにぴったり収めるためのカスタマイズを紹介します。

注：公開テンプレートに設置したところ、中央カラム本文のみがフォントサイズ切り替え対象となるようです（全体のフォントサイズを切り替えられるようにするにはCSSの修正が必要と思われますが、そこまで手が回っていません）。

１．スクリプトの設定

提供されているスクリプトを表示したい部分に貼り付けると同時に、青色のタグを追加します。

<div id="blogsize">
<script language="javascript" src="http://www.50ism.com/blogsize/js/normal.js"></script>
</div>
<script type="text/javascript">
div = document.getElementById('blogsize').getElementsByTagName('div')[0];
div.style.margin = '0';
</script>

追加したタグとスクリプトは予め設定されているマージンをクリアするためのものです。

２．CSS 修正

フォントサイズ切り替え用のアイコンは幅 170px なので、公開テンプレートのサイドバー（幅 155px）に設定するとレイアウトが崩れます。
ということで、スタイルシートのサイドバー幅を修正します。

ここでは3カラム固定レイアウトの場合を例に示します。赤色を削除して青色を追加してください。

変更前

.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 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 #links-left-box,
.layout-three-column #links-right-box {
    float: left;
    width: 185px;
}

変更後

.layout-three-column #box {
    width: 867px;
    _width: 865px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 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 #links-left-box {
    float: left;
    width: 185px;
}
.layout-three-column #links-right-box {
    float: left;
    width: 202px;
    _width: 200px;
}

ここでは右サイドバーに設置することを想定して、#links-right-box の幅を 202px（または200px）にしていますが、左サイドバーに設置する場合は #links-left-box の設定と #links-right-box の設定を入れ替えてください。

Movable Type の公開テンプレートおよびデフォルトテンプレートを利用したサンプルを作成しましたので、動作をご確認ください。

• サンプル１：Movable Type 公開テンプレート
• サンプル２：Movable Type デフォルトテンプレート

以下、カスタマイズ方法です。あわてて書いたため考慮もれ等あるかもしれません。説明通りに設定して正常に動作しない場合は適宜ご質問ください。

１．スクリプトのダウンロード

「ドラッグ＆ドロップできるサイドメニューの折りたたみ」の１項を参照ください。
なお dbx.css / dbx-key.js は本記事の４項および５項で指定したものをお使いください。

ダウンロードしたファイルは、Movabe Type の場合はメインページと同じディレクトリに、FC2ブログの場合は何も考えずにアップロードしてください（dbx.css は後述の画像ファイルをインクルードする関係で内容の修正が必要な場合があります）。

２．link 要素と script 要素の設定

アップロードした dbx.css / dbx.js / dbx-key.js をインクルードするための設定です。以下、各ブログでの設定内容を示します。

２．１ Movable Type の場合

<link rel="stylesheet" href="<$MTBlogURL$>dbx.css" type="text/css" />
　　　　　　　　　　　　　　：
<script type="text/javascript" src="<$MTBlogURL$>dbx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dbx-key.js"></script>

２．２ FC2 ブログの場合

<link rel="stylesheet" href="<%url>file/dbx.css" type="text/css" />
　　　　　　　　　　　　　　：
<script type="text/javascript" src="<%url>file/dbx.js"></script>
<script type="text/javascript" src="<%url>file/dbx-key.js"></script>

３．HTML の設定

ここでは公開テンプレート（Movable Type / FC2 ブログ）および Movable Type デフォルトテンプレートを用いたサンプル（「最近のエントリー」と「最近のコメント」に Docking boxes を適用）を紹介します。
dbx-content 部分のタグ構造は ul - li を利用していますが、CSS（dbx.css）の設定で他のタグも利用可能と思います。ご自身で色々試してみてください。

３．１ 公開テンプレートの場合

３．１．１ Movable Type

<div id="left" class="dbx-group">
 
<div class="dbx-box">
  <div class="dbx-handle">Recent Entries</div>
  <ul class="dbx-content">
    <MTEntries lastn="10">
      <li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
    </MTEntries>
  </ul>
</div><!-- /dbx-box -->
 
<div class="dbx-box">
  <div class="dbx-handle">Recent Comments</div>
  <ul class="dbx-content">
    <MTEntries lastn="5" recently_commented_on="5">
      <li><a href="<$MTEntryLink$>"><MTEntryTitle></a>
        <ul>
        <MTComments lastn="5">
        <li><a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>"><MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$></li>
        </MTComments>
        </ul>
      </li>
    </MTEntries>
  </ul>
</div><!-- /dbx-box -->
 
</div><!-- /dbx-group -->

３．１．２ FC2 ブログ

<div id="left" class="dbx-group">
 
<div class="dbx-box">
  <div class="dbx-handle">Recent Entries</div>
  <ul class="dbx-content">
<!--recent-->
    <li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a> <span class="new"><%recent_year>:<%recent_month>:<%recent_day>:<%recent_hour>:<%recent_minute>:<%recent_second></span></li>
<!--/recent-->
  </ul>
</div><!-- /dbx-box -->
 
<div class="dbx-box">
  <div class="dbx-handle">Recent Comments</div>
  <ul class="dbx-content">
<!--rcomment-->
    <li><%rcomment_etitle><br />└<a href="<%rcomment_link>#c<%rcomment_no>" title="<%rcomment_body>"><%rcomment_title></a> <%rcomment_name> <%rcomment_month>/<%rcomment_day></li>
<!--/rcomment-->
  </ul>
</div><!-- /dbx-box -->
 
</div><!-- /dbx-group -->

３．２ Movable Type デフォルトテンプレートの場合

デフォルトの2カラムレイアウトの適用部分をまとめて示します。

　　　：
<div id="beta">
   <div id="beta-inner" class="pkg">
      <div class="module-search module">
         <h2 class="module-header">検索</h2>
         <div class="module-content">
            <form method="get" action="http://10.133.83.54/blog/MT-3.32-ja/mt-search.cgi">
               <input type="hidden" name="IncludeBlogs" value="1" />
               <label for="search" accesskey="4">ブログを検索: </label><br />
               <input id="search" name="search" size="20" />
               <input type="submit" value="検索" />
            </form>
         </div>
      </div>
      
   <div id="right" class="dbx-group">
      <div class="dbx-box">
         <div class="module-archives module">
            <div class="dbx-handle"><h2 class="module-header">最近のエントリー</h2></div>
            <ul class="dbx-content">
            <MTEntries lastn="10">
               <li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
            </MTEntries>
            <li style="margin-left:-17px;list-style-type:none;"><a href="http://10.133.83.54/blog/MT-3.32-ja/atom.xml">このブログのフィードを取得</a><br />
            [<a href="http://www.sixapart.jp/about/feeds">フィードとは</a>]</li>
            </ul>
         </div>
      </div><!-- /dbx-box -->
 
      <MTIfArchiveTypeEnabled archive_type="Category">
      <div class="dbx-box">
         <div class="module-categories module">
            <div class="dbx-handle"><h2 class="module-header">カテゴリー</h2></div>
            <MTTopLevelCategories>
            <MTSubCatIsFirst><ul class="dbx-content"></MTSubCatIsFirst>
               <MTIfNonZero tag="MTCategoryCount">
               <li class="module-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>
               <MTElse>
               <li class="module-list-item"><MTCategoryLabel>
               </MTElse>
               </MTIfNonZero>
                  <MTSubCatsRecurse>
               </li>
            <MTSubCatIsLast></ul></MTSubCatIsLast>
            </MTTopLevelCategories>
         </div>
      </div><!-- /dbx-box -->
      </MTIfArchiveTypeEnabled>
 
      <MTIfArchiveTypeEnabled archive_type="Monthly">
      <div class="dbx-box">
         <div class="module-archives module">
            <div class="dbx-handle"><h2 class="module-header"><a href="http://10.133.83.54/blog/MT-3.32-ja/archives.html">アーカイブ</a></h2></div>
               <MTArchiveList archive_type="Monthly">
                  <MTArchiveListHeader><ul class="dbx-content"></MTArchiveListHeader>
                     <li class="module-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
                  <MTArchiveListFooter></ul></MTArchiveListFooter>
               </MTArchiveList>
            </div>
         </div>
      </div><!-- /dbx-box -->
      </MTIfArchiveTypeEnabled>
   </div><!-- /dbx-group -->
　　　：

４．CSS の設定

下記のリンクよりそれぞれの dbx.css をダウンロードしてお使いください。

• Movable Type デフォルトテンプレート用
• 公開テンプレート用

公開テンプレートは styles-site.css の下記の部分を変更しています（赤色を削除・青色を追加）。

/* 順序なしリスト */
ul, ol {
    padding-left: 16px;
}
ul li {
    list-style-type: none;
    padding-left: 10px;
    background: url(images/lmark.gif) no-repeat 1px 0.5em;
}

５．JavaScript の設定

下記のリンクよりそれぞれの dbx-key.js をダウンロードしてお使いください。

• Movable Type デフォルトテンプレート用
• 公開テンプレート用

基本的に配布サイトの dbx-key.js でも構いませんが、コンテナIDの部分が３項で設定したHTMLタグの id 属性値と一致するようにしてください（詳細は「その1」の５項参照）。

６．折りたたみマークの設定

サンプルで使っているものを配布しますので、よければご利用ください。
下記の折りたたみマーク画像を右クリックして「名前をつけて画像を保存」を選択するとダウンロードできます。

デフォルトテンプレート用

公開テンプレート用

ダウンロードした画像ファイルは適宜アップロードしてください。サンプルでは Movable Type のディレクトリを想定して、mt-static/images 配下にアップロードしています。FC2はファイルのアップロード機能を利用してください。

アップロードしたパスは、 dbx.css の a.dbx-toggle セレクタの background 属性（青色）

/* toggle images */
a.dbx-toggle, a.dbx-toggle:visited {
    display:block;
    width:20px;
    height:20px;
    overflow:hidden;
    background:url(mt-static/images/toggle.gif) no-repeat;
    position:absolute;
    top:0px;
    right:0;
    text-indent:-50px;
    text-decoration:none;
    }

に反映する必要があります。

パスはアップロードするディレクトリによって適宜変更してください。また上記の設定例では dbx.css と異なるディレクトリに配置されているページからは画像を表示することができませんので、パスは URL で指定してください。
FC2ブログの場合も同様です。

１．スクリプトのダウンロード

Docking boxes(dbx) のページの「Get the Script」からアーカイブをダウンロードします。アーカイブを解凍した中から下記のファイルのみを使用します。

• dbx.css（または dbx-allrules.css）
• dbx.js
• dbx-key.js

他のファイルおよび画像はサンプルのためのものです。全てをアップロードして各HTMLにアクセスすればサンプルを確認できます。

２．link 要素と script 要素の設定

Docking boxes を使用したいテンプレートの <head> ? </head> の間に下記を追加します。

<link rel="stylesheet" href="dbx.css" type="text/css" />
　　　　　　　　　　　　　　：
<script type="text/javascript" src="dbx.js"></script>
<script type="text/javascript" src="dbx-key.js"></script>

dbx.css / dbx.js./ dbx-key.js とパスが異なるページで利用する場合は dbx.css / dbx.js./ dbx-key.js に URL を指定します。

３．HTML の設定

Docking boxes の HTML マークアップは下記の構造になります。

<div id="menu1" class="dbx-group">
    <div class="dbx-box">
        <div class="dbx-handle">サイドメニュー1</div>
        <ul class="dbx-content">
            <li>リスト1-1</li>
            <li>リスト1-2</li>
              ：
              <li>リスト1-n</li>
        </ul>
    </div>
    <div class="dbx-box">
        <div class="dbx-handle">サイドメニュー2</div>
        <ul class="dbx-content">
            <li>リスト2-1</li>
            <li>リスト2-2</li>
              ：
              <li>リスト2-n</li>
        </ul>
    </div>
　　　：
</div>

Docking boxes は各要素に設定した class 属性（青色）によって動作します。それぞれの class 属性値は次の役割をもっています。

• dbx-group：Docking boxes を使用したい箇所に指定
• dbx-box：サイドメニュー（最近のエントリー・最近のコメント等）単位に指定
• dbx-handle：サイドメニュータイトルに指定
• dbx-content：サイドメニューのリストに指定

ポイント

• dbx-group は赤色で示した id 属性と対応し（後述）、複数指定できます
• サンプルの dbx-content は ul 要素ですが、div 要素と p 要素の組み合わせ等でも大丈夫です

４．CSSの設定

サイドメニューのスタイルは dbx.css で設定します。dbx-allrules.css がデフォルトで利用するための（空の）CSS ですが、ここではサンプル用で設定されている dbx.css を用いて説明します。
以下、ファイルを上から順に見ていく形で説明します（CSSハック等、一部省略しています）。

以下のコードは変更や上書きをしてはいけません。

/****************************************************************
  docking boxes core CSS: YOU MUST NOT CHANGE OR OVERRIDE THESE 
*****************************************************************/
.dbx-clone {
    position:absolute;
    visibility:hidden;
}
.dbx-clone, .dbx-clone .dbx-handle-cursor {
    cursor:move !important;
}
.dbx-dummy {
    display:block;
    width:0;
    height:0;
    overflow:hidden;
}
.dbx-group, .dbx-box, .dbx-handle {
    position:relative;
    display:block;
}

dbx-box と clone（=ドラッグ中のサイドメニュー）の間の視覚違いをなくすために、dbx-box への padding、marginまたはborderの設定は避けてください。視覚的に、dbx-box はスタイルを設定しない方が良いでしょう。

/****************************************************************
  avoid padding, margins or borders on dbx-box, 
  to reduce visual discrepancies between it and the clone.  
  overall, dbx-box is best left as visually unstyled as possible 
*****************************************************************/
.dbx-box {
    margin:0;
    padding:0;
    border:none;
}

その他（以下）は自由に設定してください。

/****************************************************************
  otherwise, do what you like :) 
*****************************************************************/
　　　　　　　　　　　　　：

#purple-outer はサンプルの dbx.html 用なので削除します。
dbx-group は width / background / padding プロパティでサイドバー全体の幅・背景・パディングを調整しています。

/* group container(s) */
#purple-outer {
    border:1px solid #a382c0;
    margin:0 10px 0 0;
    float:left;
    position:relative;/* additional outer containers must also have position:relative */
    }
.dbx-group {
    clear:both;
    width:150px;
    background:#c5a4e0;
    padding:0 10px 10px 10px;
    }

dbx-handle でサイドメニューのタイトル部分のスタイルを指定します。cursor プロパティはドラッグ位置にマウスオーバーした時に表示するカーソル（move は十字矢印）を指定します。

/* handles */
.dbx-handle {
    font:normal normal bold 1em tahoma,sans-serif;
    text-align:center;
    position:relative;
    margin:0;
    padding:16px 0 6px 0;
    background:url(images/purple-handle.gif) no-repeat 0 0; 
    color:#fff;
    }
 
/* handle cursors are in a class of their own
   so they only get applied if the script is supported */
.dbx-handle-cursor {
    cursor:move;
    }

a.dbx-toggle は折りたたみマークのスタイルを指定します。サンプルの折りたたみマークは次のようなもので、4種類の状態を表せるようになっています。

• 左上：開いている時
• 右上：開いている時にフォーカス
• 左下：閉じている時
• 右下：閉じている時にフォーカス

CSS に精通されている方は有名なテクニックとですが、ひとつの画像フィイルに複数の画像をまとめておくことで、ページ表示に全ての画像がロードされるので、画像の表示切り替え時にタイムラグが発生しません。
画像の切り替えは、次の5つのセレクタのうち、下の4つがそれぞれの状態に対応しており、画像の表示位置をずらすことで表示する画像を切り替えます。

「クロスブラウザを保つために、デフォルトと visited 疑似クラスを一緒に定義すべきです」という説明がされています。

/* toggle images */
a.dbx-toggle, a.dbx-toggle:visited {
    display:block;
    width:20px;
    height:20px;
    overflow:hidden;
    background:url(images/purple-toggle.gif) no-repeat;
    position:absolute;
    top:14px;
    right:3px;
    text-indent:-50px;
    text-decoration:none;
    }
     
     
a.dbx-toggle-open, a.dbx-toggle-open:visited {
    background-position:0 0;
    }
a.dbx-toggle-closed, a.dbx-toggle-closed:visited {
    background-position:0 -20px;
    }
a.dbx-toggle-hilite-open, a.dbx-toggle-hilite-open:visited {
    background-position:-20px 0;
    }
a.dbx-toggle-hilite-closed, a.dbx-toggle-hilite-closed:visited {
    background-position:-20px -20px;
    }

dbx-tooltip はツールチップのスタイルです。

/* keyboard navigation tooltip */
.dbx-tooltip {
    display:block;
    position:absolute;
    margin:36px 0 0 125px;
    width:185px;
    border:1px solid #000;
    background:#ffd;
    color:#000;
    font:normal normal normal 0.85em tahoma, arial, sans-serif;
    padding:2px 4px 3px 5px;
    text-align:left;
    }

dbx-content はメニューリストのスタイルを設定します。

.dbx-content li {
    width:130px;
    margin:0;
    padding:0 10px 1px 10px;
    list-style-type:none;
    font:normal normal normal 0.85em verdana,sans-serif;
    background:url(images/purple-content.gif) #bca2cf repeat-y;
    }
 
.dbx-content a, .dbx-content a:visited {
    color:#000;
    text-decoration:none;
    }
 
.dbx-content a:hover, .dbx-content a:focus, .dbx-content a:active {
    color:#306;
    text-decoration:underline;
    }

下はメニューリストが閉じている時のリストスタイルです。

/* toggle state of inner content area */
.dbx-box-closed .dbx-content {
    display:block;
    height:10px;
    padding:0;
    overflow:hidden;
    }

dbx-clone クローンはドラッグしている時のリストです。サンプルでは透過するようにしています。この設定を削除するとドラッグしている時に、下に隠れるオブジェクトが見えなくなります。

/* additional clone styles */
.dbx-clone {
    opacity:0.8;
    -moz-opacity:0.8;
    -khtml-opacity:0.8;
    filter:alpha(opacity=80);
    }

５．JavaScript の設定

dbx-key.js に、３項で設定した id 属性（赤色）に対応するオブジェクトを作成します。それらしき役割を日本語で示しておきます。青色の hogehoge は任意の名称でいいみたいです。コンテナIDが id 属性になります。

//create new docking boxes group
var hogehoge = new dbxGroup(
    'menu1',     // コンテナID [/-_a-zA-Z0-9/]
    'vertical', // ドラッグ方向 ['vertical':縦|'horizontal':横]
    '7',        // ドラッグ開始する移動ピクセル（マウスが指定px移動するとドラッグ開始）['n' pixels]
    'no',       // コンテナのドラッグ範囲外への移動許可 ['yes'|'no']
    '10',       // ドラッグ時, 他のサイドバーが移動するアニメーション効果（フレーム数指定, '0'は効果なし）
    'yes',      // 開閉ボタン表示（非表示の場合、開閉不可） ['yes'|'no']
    'open',     // 開閉のデフォルト状態 ['open'|'closed']
    'open',     // 閉じている時に下の %toggle% に挿入するメッセージ
    'close',    // 開いている時に下の %toggle% に挿入するメッセージ
    'click-down and drag to move this box',    // ドラッグエリアにマウスオーバーした時のツールチップ
    'click to %toggle% this box',              // 開閉エリアにマウスオーバー時のツールチップ
    'use the arrow keys to move this box',     // ドラッグエリアのキーボード操作時のツールチップ
    ', or press the enter key to %toggle% it', // 開閉エリアにキーボード操作時のツールチップ
    '%mytitle%  [%dbxtitle%]'                  // title属性が競合した場合（？）
    );

サイドバーを左右に配して、どちらもドラッグ＆ドロップできるようにするには、上と同じオブジェクト（hogehoge）をもうひとつ作ります（'hogehoge2' 等）。コンテナID（menu1）は必ず変えて、変えたコンテナIDが id 属性となるようにHTMLマークアップを行ってください。

６．注意事項

リストマークはクリックを契機に大きくなってしまう現象が起きるので、list-style-type で指定したマークが大きくなるので background 指定すると良いでしょう。

現在リリース中の Movable Type 3.32 および 3.2 でクロスサイトスクリプティングによる脆弱性がみつかったため、Movable Type 3.33 および 3.2 用のパッチがリリースされました。

【重要】 Movable Type 新バージョンとパッチの提供について

Movable Typeのプログラムにおいてクロスサイトスクリプティングによる脆弱性が確認されました。対策を施した新バージョンをリリースいたします。

なお　3.32 と 3.33 の差分は下記の通りです（上記記事より抜粋）。

lib/MT.pm
lib/MT/App.pm
lib/MT/Log.pm
lib/MT/Sanitize.pm
lib/MT/App/CMS.pm
lib/MT/App/Search.pm
php/mt.php
php/lib/sanitize_lib.php
plugins/nofollow/nofollow.pl

記事では「脆弱性回避のために、速やかにMovable Type 3.33へアップグレードしてください」ということです。
なお 3.33 についてはセキュリティ脆弱性修正以外に、数多くの修正が施されて「機能と信頼性が向上している」と記されています。

Movable Type のスタイルライブラリ一覧です。この一覧は「StyleCatcher」というキーワードでヒットしたサイトから探して掲載しております（ウェブ上の全てのサイトを網羅できている訳ではありません）。

Six Apart

The Style Contest for Movable Type, Typepad and LiveJournal

*表示に時間がかかります

ロフトワーク

beta.HINAGATA

flopover.com::blog

MovableType幼稚園

MovableType備忘録

tokyobuddha

アットスタイル

釈迦マインドblog

小粋空間

ライブラリの利用方法は以下の通りです（3.3以降の場合）。

1. 管理メニューの[設定]-[プラグイン]で "Style Catcher プラグイン"の右側にある「設定を表示」をクリック
2. テーマを保存するための「テーマのルートURL」「テーマのルートパス」が表示されているので問題なければそのまま「変更を保存」をクリック
3. 管理メニューの[設定]-[プラグイン]で "Style Catcher プラグイン"の右側にある「StyleCatcherを起動」をクリック。または管理メニューの[テンプレート]で下に表示されている「StyleCatcherでデザインを選ぶ」をクリック
4. 「テーマ/リポジトリへのURL」に上記のURLを入力して「スタイル検索」をクリック（デフォルトで設定されているURLは Movable Type 英語サイトのライブラリです）
5. 接続OKであれば下のスクリーンショットのようにテーマが表示されますので、お好みのテーマをクリックして右下の「デザインを適用」をクリック

先程乗車していた総武線各駅停車千葉行が、小岩駅に到着したところで、

「先程『異臭がする』という通報を受けましたので、この列車は回送になります」

というアナウンスをしながら乗務員さんが車内を回ってきて、乗っていた電車を強制的に降ろされました。このような事件めいたケースに出くわしたのは初めてです。

というか、実は異臭騒ぎの一部始終を間近で目撃していました。

JR総武線車両で異臭騒ぎ＝乗客800人が途中下車?千葉県警

電車を降ろされた小岩駅から数駅手前、私が乗っていた車両で突然、数名の乗客が「ゴホッゴホッ」とひどいせきを始め、列車を突然降りるか、他の車両に移る・座っていた席から遠ざかるという事態が発生しました。
せきが出た人は、扉と扉の間の、あるブロックの席に座っていた人達。そしてあっと言う間にそのブロックの席だけ誰もいなくなったのです。

私はそのひとつ隣のブロックの席に座っていたためか、幸いにも異臭は全く感じず、「横で何が起きたのだろう？」と思いながら、せきをしながら立ち去る人たちを目で追っていました。ただ、私が座っていたブロックの人も何人か席を立ったので、私が座っていた席だけたまたま異臭が流れてこなかったのかもしれません（私は扉の真横の席に座っていて、扉と席の間には仕切りがあり、それで救われたかも）。

異臭の原因ですが、ふと誰もいなくなった席の方に目をやると、一人だけ平然と座っている浮浪者っぽいおじさんがおりまして、どうもその人が異臭を放っていたのではないかと推測します。その後何駅か進んだ後、おじさんはいつの間にかいなくなっており、空いた席には後から乗ってきたお客さんが何事もなかったかのように座っていたからです。

乗務員さんがアナウンスに来たのはそれからまた少し後。私が乗っていた車両の誰かが通報したのか、あるいはおじさんが別の車両に移動して、その車両の誰かが通報したのかは定かではありません。

満員とか大声で騒いでいるのは我慢できますが、異臭は耐えられませんね。

歩道が安全

発売されて1ヶ月ほど経ちましたが「グーグル Google」の著者・佐々木俊尚氏がHotwired Japan：ITジャーナルで1年半の連載をまとめた「ウェブ2.0は夢か現実か？」の紹介です。

ウェブ2.0は夢か現実か?―テレビ・新聞を呑み込むネットの破壊力 佐々木 俊尚 宝島社 2006-08 売り上げランキング : 18622 おすすめ平均 Amazonで詳しく見る by G-Tools

インターネットの普及、そしてウェブ2.0の出現で世の中の色々なところで変化が起きている、そういうことが実感できる一冊です。ライブドア事件・カカクコム・Winny等についても専門的・中立的な立場で言及されており、改めて事件を振り返り、物事の本質を見極めるための一助となるでしょう。

以下、印象に残った文や感想等（見出しは主に目次より引用）。

最も素晴らしいセキュリティは何もしないこと？

コスト優先のサイバーノーガード戦法。

ブログの信頼度は計れるか

日本でのニッチな検索マーケットを目指すマーズフラッグ・アスクジーブス・gooラボ

グーグルニュースをめぐる水面下の戦い

ダブルスタンダードな新聞社。

いま起きつつあるネットとテレビの融合モデル

シームレス（地上波・衛星・ブロードバンド等を意識せず）に様々な番組を見ることができる Tivo と iPod へのビデオ機能の実装。

日本の新聞がなぜウェブ2.0に打ち倒されるのか

販売収入への依存度が高い日本の新聞業界（全米では広告収入が高い）→広告モデルへの移行が困難

「プッシュ」が復活してきた

RSSによって情報の流れが変わってきて、情報収集術にも変化が。「サイト更新を頻繁に行わないとアクセスが減少する」というのが一般的な考え方ですが、RSSリーダーに購読サイトを登録しておけば、更新周期が不定であってもある程度のアクセスは獲得できるようになる気がしてきました（未読RSS恐怖症という現象もあるようですが）。

TVとインターネットの融合

いわゆる「融合」が遠い先の話としても、少なからずネット側への「連携」は緩やかに進んでいる気がします。放映中のURL表示は当たり前になり、最近のCMでは検索文字列とフォームを表示してインターネットへのアクセスを促しています。

情報システム部門のブラックホール

すべての企業がIT化を推し進める必要はない（TCO/ROI）

IT文化の中にどっぷりと浸ることによる知識欲の満足と、現実からの離脱という現象

佐々木俊尚氏は現在、CNET Japan：ジャーナリストの視点というブログを運営されています。
非常に興味深く読ませて頂きましたので、このシリーズの次回作を期待しています。

月別アーカイブページに表示された横型カレンダーに月送り用のリンクをつけるカスタマイズです。 このカスタマイズは「月送りカレンダー（簡易版・休日表示付き）」を横型用にアレンジしたものです。ご利用に際しては「月送りカレンダー（簡易版）」も併せてご覧ください。

注：本カスタマイズは日付アーカイブテンプレートのみが対象です。

１．休日表示用カレンダースクリプトのダウンロード

下記のリンク先にある dayChecker.js をクリックして休日表示用カレンダースクリプトをダウンロードしてください。

download

２．休日表示用カレンダースクリプトのアップロード

ダウンロードした dayChecker.js を index.html と同じディレクトリにアップロードしてください。

３．テンプレートの修正１（スクリプトのインクルード）

テンプレートの <head>～</head> の間に下記のタグを追加します。

<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

４．テンプレートの修正２（カレンダー表示タグの設定）

日付アーカイブテンプレート編集画面を開き、横型カレンダーを表示したい部分に下記のカレンダー表示用タグを追加してください。

<div id="calendar" title="<$MTArchiveDate format="%Y/%m"$>">
<span class="calendarHead">
<MTArchivePrevious><a href="<$MTArchiveLink$>">&#65308;</a> </MTArchivePrevious><$MTArchiveDate format="%B %Y" language="en"$><MTArchiveNext> <a href="<$MTArchiveLink$>">&#65310;</a></MTArchiveNext> |
</span>
<MTCalendar month="this">
<MTCalendarIfEntries><span><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><span><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank><MTElse></span></MTElse></MTCalendarIfBlank>
</MTCalendar>
</div> 
 
<script type="text/javascript">
function setWeekendAndHoliday(y,m) {
    var element = document.getElementById("calendar");
    var title = element.getAttribute("title");
    var year = title.split("/")[0];
    var month = title.split("/")[1];
    if(!(year == y && month == m)){
        return;
    }
    var spans = element.getElementsByTagName("span");
    var day;
    for (i = 0; i < spans.length; i++) {
        if (!(spans[i].getAttribute('class') == 'calendarHead' ||
            spans[i].getAttribute('className') == 'calendarHead')) {
            if(spans[i].innerHTML.indexOf("href") != -1){
                day = spans[i].getElementsByTagName("a")[0].innerHTML;
            } else {
                day = spans[i].innerHTML;
            }
            if (isHoliday(year, month, day)) {
                if (isToday(year, month, day)) {
                    spans[i].setAttribute('class', 'tholiday');
                    spans[i].setAttribute('className', 'tholiday');
                } else {
                    spans[i].setAttribute('class', 'holiday');
                    spans[i].setAttribute('className', 'holiday');
                }
            } else if(isSaturday(year, month, day)) {
                if (isToday(year, month, day)) {
                    spans[i].setAttribute('class', 'tsaturday');
                    spans[i].setAttribute('className', 'tsaturday');
                } else {
                    spans[i].setAttribute('class', 'saturday');
                    spans[i].setAttribute('className', 'saturday');
                }
            } else if (isToday(year, month, day)) {
                spans[i].setAttribute('class', 'today');
                spans[i].setAttribute('className', 'today');
            }
        }
    }
}
setCurrentDate();
setWeekendAndHoliday('<$MTArchiveDate format="%Y"$>','<$MTArchiveDate format="%m"$>');
</script>

参考までに、タイトルバナー下に上記リストを挿入する場合の設定位置を示します。

デフォルトテンプレートの場合

　　　　　　：
<div id="banner">
   <div id="banner-inner" class="pkg">
      <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
      <h2 id="banner-description"><$MTBlogDescription$></h2>
   </div>
</div>
 
---- ここに設定 -----
 
<div id="pagebody">
   <div id="pagebody-inner" class="pkg">
　　　　　　：

公開テンプレートの場合

　　　　　　：
<!-- タイトル -->
<div id="banner">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<div id="banner-description"><$MTBlogDescription$></div>
</div>
 
---- ここに設定 -----
 
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
　　　　　　：

５．CSS修正

下記のCSSを styles-site.css に追加してください。
ここでは公開テンプレートに設定する場合のスタイルを示しますが、デフォルトテンプレートでも適用可能です。

#calendar { 
    margin-top: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid #666699;
    font-size:10px;
    text-align: center; 
} 
.calendarHead { 
    color:#444444; 
    padding-right: 5px;
} 
.today { 
    display: inline;
    padding: 0 1px;
    border : 1px solid #444444; 
} 
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}
.tholiday {
    border: 1px solid #444444;
    color: #e50003;
}
.tholiday a:link,
.tholiday a:visited {
    color: #e50003;
}
.tsaturday {
    border: 1px solid #444444;
    color: #0000ff;
}
.tsaturday a:link,
.tsaturday a:visited {
    color: #0000ff;
}

デフォルトテンプレートの場合は赤色部分を削除するといい具合になります。

#calendar { 
    margin-top: 5px;
    padding-bottom: 4px;
    border-bottom: 1px solid #666699;
    font-size:10px;
    text-align: center; 
} 
　　　　　　：

公開テンプレートご利用の方は、styles-site.css に設定されている下記の設定を削除してください。

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #444444;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
.calendar {
    text-align: center;
    color: #444444;
    background: none;
}
.calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
.calendar th {
    padding-bottom: 3px;
    font-size: 8px;
    width: 23px;
}
.calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}
.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}
.holiday {
    color: #e50003;
}
.saturday {
    color: blue;
}

先日公開した「Flash カレンダープラグイン for Serene Bach」に不具合がありましたのでバージョンアップしました。

１．不具合

EUC-JP 版の Serene Bach で Ver1.00 の Flash カレンダープラグインを使用した場合、カレンダーの日付をマウスポイントした時に表示される記事タイトルが文字化けします。

２．原因

Flash カレンダー自体が UTF-8 にしか対応していないため、プラグインで生成する calendar.xml の文字コードがUTF-8 である必要がありますが、当方の認識不足でブログに依存した文字コードの calendar.xml を出力していました。
つまり、EUC-JP版の Serene Bach の場合、文字コード EUC-JP の calendar.xml を出力するため、前述の不具合が発生します。

これは neige essai さんの記事で気がつきました。ありがとうございました。

３．対処内容

文字コード UTF-8 の calendar.xml を出力するように変更しましたので、EUC-JP版 Serene Bach にも対応可能です。

ということで、現在 1.01 のプラグインを公開しています。EUC-JP版でブログを運用されている方はこちらをご利用ください。

Six Apart のサイトで、Movable Type の新しいスタイル・ライブラリが公開されたとのニュースが出ていました。

シックス・アパート、ロフトワークと共同で国内初のスタイル・ライブラリを公開

6000人が登録するクリエイター・コミュニティを運営する制作代理店の株式会社ロフトワーク（代表取締役社長：諏訪光洋、東京都渋谷区、以下ロフトワーク）とブログ・ソフトウェア大手のシックス・アパート株式会社（代表取締役：関 信浩、東京都港区、以下シックス･アパート）は、共同で「Movable Type」のプラグイン「StyleCatcher（スタイルキャッチャー）」に対応した、スタイル・ライブラリを公開いたします。

ライブラリのURLは下記です。

ライブラリのURL:

ライブラリの利用方法は以下の通りです（3.3以降の場合）。

1. 管理メニューの[設定]-[プラグイン]で "Style Catcher プラグイン"の右側にある「設定を表示」をクリック
2. テーマを保存するための「テーマのルートURL」「テーマのルートパス」が表示されているので問題なければそのまま「変更を保存」をクリック
3. 管理メニューの[設定]-[プラグイン]で "Style Catcher プラグイン"の右側にある「StyleCatcherを起動」をクリック。または管理メニューの[テンプレート]で下に表示されている「StyleCatcherでデザインを選ぶ」をクリック
4. 「テーマ/リポジトリへのURL」に上記の「ライブラリのURL」を入力して「スタイル検索」をクリック（デフォルトで設定されているURLは Movable Type 英語サイトのライブラリです）
5. 接続OKであれば下のスクリーンショットのようにテーマが表示されますので、お好みのテーマをクリックして右下の「デザインを適用」をクリック

同一エントリーへの重複トラックバックを抑止するプラグインです。

Movable Type は、バージョン 3.2 まで重複トラックバックに対する制御は行われていませんでしたが、3.3 以降、 重複トラックバック（送信元URL・タイトル・概要が同一のトラックバック）を受信した場合、その内容を過去に受信したトラックバックに上書きするよう、処理が変更されました。

追加された処理は、トラックバック送信後に送信元記事のタイトルあるいはトラックバックの概要を変更してトラックバックを再送信するようなケースを考えた場合、非常に有効です。

現在「重複トラックバック防止プラグイン」を公開しておりますが、上記の理由で 3.3 では重複トラックバック防止プラグインが不要となりました。

ただし、全く同一の内容が再送信された場合ー例えば初回のトラックバック送信がタイムアウトになり（送信が完結しないと Movable Type では「トラックバック送信先のURL」にデータが残ります）、エントリーを再保存（つまり再送信）してしまったケース等ーでも上書き処理が行われ、再構築が発生します。

本プラグインは、内容が全く同一のトラックバックのみをフィルタリングし、再構築を発生させないことを目的としたものです。 *1

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

下記の duplicateTBPingThrottlefilter.zip または duplicateTBPingThrottlefilter.lzh をダウンロードしてください。

duplicateTBPingThrottlefilter.zip
duplicateTBPingThrottlefilter.lzh

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

ダウンロードしたアーカイブを解凍してください。解凍すると中に duplicateTBPingThrottlefilter フォルダがありますので、Movable Type の plugins ディレクトリにフォルダごとアップロードしてください。

アップロード後、管理画面の

メイン・メニュー > システム・メニュー > プラグイン

の画面に利用中のプラグイン一覧が表示されますので、その中に「Duplicate Trackback Ping Throttle Filter Plugin ?」が表示されていればOKです。

３．設定

特にありません。２項でプラグインが表示されていれば有効です。

４．ログ

トラックバックがフィルタリングされた場合、ログに

Filter duplicate trackback ping from the following URL:http://?

というメッセージを出力します。

*1：というのは建前で、「過去に作った重複トラック防止バックプラグインを無駄にしたくない」というのが本音。

先日、SONYのHi-MDウォークマン「MZ-RH1」を購入しました。

MZ-RH1 S Hi-MD ウォークマン ソニー 2006-04-21 売り上げランキング : 7560 おすすめ平均 Amazonで詳しく見る by G-Tools

この機種の主な特徴は下記の通りです。

• 音源を圧縮せずに録音できる音声形式・リニアPCM(44.1kHz/16bit)に対応
• 本体録音コンテンツをデジタルでパソコン(Windows＆Macintosh)に保存
• 本体録音で最長約34時間(約503曲)。パソコン接続で最長約45時間(約675曲)の長時間録音が可能
• 従来のMDの曲を、デジタル＆高速でパソコンにアップロード可能
• 従来のミニディスクも再生可能
• パソコンデータの外部記録メディアとして活用
• 従来のMDの大容量化

セールスポイントは何といっても「リニアPCM録音」です。
「リニア（非圧縮）PCM（Pulse Code Modulation）」という方式は、アナログ音源をデジタル化する際にデータを圧縮しないため、高音質な録音が可能です（サンプリングビット数・サンプリングレートは製品によって異なります）。

ネットで調べたところ、今回購入した MZ-RH1 の他に「リニアPCMレコーダー」は下記がありました。

R-09 24bit WAVE/MP3 RECORDER ローランド 2006-04-28 売り上げランキング : 8656 おすすめ平均 Amazonで詳しく見る by G-Tools

R-09 はSDカード（最大2GB）を記録媒体とした、ローランド（エディロール）の人気機種です。本体上部横に高性能ステレオ・マイクを内蔵しているので手軽にレコーディングが行えます。本体価格は MZ-RH1 とほぼ同じ。

PCM-D1 リニアPCMレコーダー ソニー 2005-11-21 売り上げランキング : おすすめ平均 Amazonで詳しく見る by G-Tools

PCM-D1 は4GBのフラッシュメモリを内蔵した、携帯型リニアPCM録音機です。個人的にはメカニカルな外観にかなり食指をそそられるのですが、残念ながら実勢価格16?17万という高級機です。

ローランド R-09 も候補のひとつで、MZ-RH1 のどちらにするかかなり悩みましたが、MZ-RH1の

• 既存のMDを扱える
• メディア実勢価格が安い（SDカード：2?5,000円/1GBに対し、Hi-MD：約600円/1GB）

という点が購入する決め手になりました。

今回の購入目的ですが、演奏の練習等の音源を WAV 形式または MP3 形式でPCにアップロードするまでの作業時間の短縮です。

これまで録音した音源をPCにアップロードするまでの作業として、

1. ポータブルMDで録音
2. MDプレーヤーからUSBオーディオインタフェースを介してPC（Windows98）のハードディスクに録音
3. Windows98 から Windows XP にファイル転送

と、かなり手間のかかる方法をとっていました。

Windows 98で録音している理由は、所有しているUSBオーディオインタフェース（YAMAHA・UW500）がかなり古いもので、バンドルされている「XGworks Lite」が Windows 98 しか対応していないためです。
UW500本体のドライバをアップデートして、XP対応のXGworksを購入するという手もありますが、その場合3番目の手間が改善されるだけで、MDからの再録音時間を短縮するという抜本的な解決にはなりません。

MZ-RH1 から音源をアップロードするにはバンドルされている、音楽統合ソフトウェア「SonicStage」なるものを使用します。

早速録音した音源をアップロードしてみました。数分の録音データであれば数十秒で転送できます。これを WAV 形式で保存してMP3に変換すれば完了です。
ということで、これまで数十分?数時間かかっていた転送作業がものの数分?十数分で完了できるようになりました。

関連記事

• MZ-RH1体験レポート「新しい音楽の楽しみを発見」
• 「MZ-RH1開発者インタビュー」小寺信良がMZ-RH1の魅力を探る
• MYCOMジャーナル：音楽をはじめよう! - 第10回バンド活動にリニアPCMレコーダを活用してみよう(1)
• MYCOMジャーナル：音楽をはじめよう! - 第10回バンド活動にリニアPCMレコーダを活用してみよう(2)
• インプレスウォッチ：ソニー、24bit/96kHz対応のリニアPCMレコーダ
• デジタルARENA：本体を“バラして”驚いた！　ソニー“デジタルデンスケ”「PCM-D1」のこだわり

Serene Bach で、Kinarie&May さんが配布されている Movable Type 用の Flash カレンダー（通常版／横型）を使えるようにするためのプラグインです。

注：このプラグインは 2.0x までの対応です。フラッシュカレンダー 3.00 をご利用の場合は「Flash カレンダープラグイン（3.00 対応版） for Serene Bach」をご覧ください。

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

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

FlashCalendarHandler.zip / FlashCalendarHandler.lzh

2006.09.14 Ver 1.00
2006.09.21 Ver 1.01 EUC-JP版対応
2006.09.26 Ver 1.02 文字コード変換を sb::Language 使用に変更
2006.09.28 Ver 1.03 calendar.xml に相対パス指定

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

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

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

３．テンプレートの設定

３．１ フラッシュカレンダー表示用 object タグの作成

Kinarie&May さんのサイトにある「MT用通常版flashカレンダー」または「MT用横型flashカレンダー」のページを参考に、フラッシュカレンダー表示用 object タグを作成します。そして作成した object タグを、HTMLテンプレートのカレンダーを表示したい部分に貼り付けてください。

1. swf ファイルのダウンロード（解説ページの１項）
2. swf ファイルのアップロード（解説ページの２項）
3. Object タグの作成（解説ページの３項）

3.の「Object タグの作成」で、「XMLファイルアドレス」を入力する項目があります。このアドレスには index.html までのURL（例：http://user-domain/）と

http://user-domain/calendar.xml

と、青色で示したファイル名 calendar.xml を加えた内容を入力してください。

また、その下のラジオボタンは「通常使用」を選択してください。デザイン・カラーはお好みに合わせて修正してください。

３．２ フラッシュカレンダー用XML出力の独自ブロック

下記の独自ブロック（青色）をベースHTMLテンプレートの任意の位置に貼り付けてください。例は </body> の直前に設定した場合です。
注：個別記事用HTMLテンプレートを利用されている場合も、ベースHTMLテンプレートのみに設定してください。

<!-- BEGIN flash_calendar -->
<!-- END flash_calendar -->
 
</body>
</html>

これは、３．１項で設定した calendar.xml を出力するためのタグです。calendar.xml は swf ファイルが読み込む XML ファイルです。ページ上には何も表示されません。

４．ページの再構築

タグを貼り付けた後、インデックス（または全体）のページ再構築を行います。ブログに Flash カレンダーが表示されればOKです。スタイルは適宜設定してください。

表示されない場合、index.html があるディレクトリに calendar.xml というファイルが作成されていることを確認してください。ファイルの有無で下記のいずれかの原因が考えられます。

• 作成されている場合：３．１項の「3.Object タグの作成」で設定内容に誤りがある可能性があります。
• 作成されていない場合：プラグインの設定または独自ブロックの設定に誤りがある可能性があります。

calendar.xml が生成されていれば、Object タグで swf ファイルおよび calendar.xml を読み込む動作はブログの動作と関係ありませんので、簡素な HTMLページ を作り、そこに Object タグを貼り付けて Flash が表示されるかどうか確認してみてください。

５．swf ファイルのキャッシュについて

エントリー投稿や再構築によって calendar.xml が更新されることは確認済ですが、ブラウザを更新してもカレンダー表示が更新されない場合があります。この原因は、calendar.xml を取得する swf ファイル自体がキャッシュから取得されてしまうようです。
これは利用しているレンタルサーバやブラウザの設定に依存するようです。

毎回最新の情報を取得するのであれば「ブラウザのキャッシュをクリアする」を参考にしてみてください。

６．参考：動作の仕組み

Flashカレンダーは、記事タイトル一覧と投稿日が記述された XML を Flash が読み込む元データとしてカレンダーを表示します。
Movable Type ではカレンダー表示用のタグとユーザが作成できるテンプレートを利用すればXMLを簡単に出力できますが、Serene Bach にはユーザがテンプレートやXMLファイルを出力する機能がないためプラグインで実現しました。

2006.12.20 追記
「独自タグ」は誤記でしたので、「独自ブロック」に修正しました。

2007.04.10 追記
２項の flashcalendarhandler.txt というファイル名が誤ってましたので修正しました。また 3.00 版へのリンクを追加しました。

高い人ほど

月別アーカイブページに表示されたカレンダーに、簡単に月送り用のリンクをつけるカスタマイズです。
このカスタマイズは「月送りカレンダー（簡易版）」に休日表示付きリアルタイムカレンダーを付与した改善版です。
またカスタマイズは日付アーカイブテンプレートのみが対象です。

１．休日表示用カレンダースクリプトのダウンロード

下記のリンク先にある dayChecker.js をクリックして休日表示用カレンダースクリプトをダウンロードしてください。

download

２．休日表示用カレンダースクリプトのアップロード

ダウンロードした dayChecker.js を index.html と同じディレクトリにアップロードしてください。

３．テンプレートの修正１（スクリプトのインクルード）

テンプレートの <head>～</head> の間に下記のタグを追加します。

<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>

４．テンプレートの修正２（カレンダー表示タグの設定）

カレンダーを表示したい部分に下記のカレンダー表示用タグを追加してください。

４．１項および４．２項のリストを追加した後、管理画面にある「設定」→「公開」の順にクリックし、次ページの下にある「アーカイブのマッピング」で「日別」の左側にチェックをつけて保存し、再構築してください。これを行わないとカレンダーが表示されませんのでご注意ください。

４．１ デフォルトテンプレートの場合

<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="module-calendar module">
<h2 class="module-header"><MTArchivePrevious><a href="<$MTArchiveLink$>">&#8810;</a> </MTArchivePrevious>
<$MTCalendarDate format="%B %Y"$>
<MTArchiveNext> <a href="<$MTArchiveLink$>">&#8811;</a></MTArchiveNext></h2>
<div class="calendar">
<table id="calendarTable" summary="<$MTCalendarDate format="%Y/%m"$>">
<tr>
<th abbr="Sunday" class="sunday">Sun</th>
<th abbr="Monday">Mon</th>
<th abbr="Tuesday">Tue</th>
<th abbr="Wednesday">Wed</th>
<th abbr="Thursday">Thu</th>
<th abbr="Friday">Fri</th>
<th abbr="Saturday" class="saturday">Sat</th>
</tr>
 
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>
<!-- script -->
</MTIfArchiveTypeEnabled>

４．２ 公開テンプレートの場合

<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTCalendarDate format="%Y/%m"$>">
<caption class="calendarhead">
<MTArchivePrevious><a href="<$MTArchiveLink$>">&#8810;</a> </MTArchivePrevious>
<$MTCalendarDate format="%B %Y"$>
<MTArchiveNext> <a href="<$MTArchiveLink$>">&#8811;</a></MTArchiveNext>
</caption>
<tr>
<th abbr="Sunday" class="sunday">Sun</th>
<th abbr="Monday">Mon</th>
<th abbr="Tuesday">Tue</th>
<th abbr="Wednesday">Wed</th>
<th abbr="Thursday">Thu</th>
<th abbr="Friday">Fri</th>
<th abbr="Saturday" class="saturday">Sat</th>
</tr>
 
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>
<!-- script -->
</MTIfArchiveTypeEnabled>

５．テンプレートの修正３（スクリプト追加）

休日表示カレンダースクリプトを起動するためのスクリプト

<script type="text/javascript">
function setWeekendAndHoliday(y,m) {
    var element = document.getElementById("calendarTable");
    var summary = element.getAttribute("summary");
    var year = summary.split("/")[0];
    var month = summary.split("/")[1];
    if(!(year == y && month == m)){
        return;
    }
    var spans = element.getElementsByTagName("span");
    var day;
    for (i = 0; i < spans.length; i++) {
        if (spans[i].parentNode.nodeName == "TD") {
            if(spans[i].innerHTML.indexOf("href") != -1){
                day = spans[i].getElementsByTagName("a")[0].innerHTML;
            } else {
                day = spans[i].innerHTML;
            }
            if (isHoliday(year, month, day)) {
                spans[i].setAttribute('class', 'holiday');
                spans[i].setAttribute('className', 'holiday');
            } else if(isSaturday(year, month, day)) {
                spans[i].setAttribute('class', 'saturday');
               spans[i].setAttribute('className', 'saturday');
            }
            if (isToday(year, month, day)) {
                spans[i].parentNode.setAttribute('class', 'today');
                spans[i].parentNode.setAttribute('className', 'today');
            }
        }
    }
}
setCurrentDate();
setWeekendAndHoliday('<$MTArchiveDate format="%Y"$>','<$MTArchiveDate format="%m"$>');
</script>

を、４．１項または４．２項の赤色で示した

<!-- script -->

の部分に挿入してください（赤色の行は削除してください）。

６．CSS修正

下記のセレクタを styles-site.css に追加してください。

６．１ デフォルトテンプレートの場合

初めてカレンダーをご利用になる場合はすべて追加し、すでにご利用の場合は today / sunday,holiday / saturday のみ追加してください。

.calendar {
    margin: 5px 0;
    text-align: center;
}
.calendarhead {
    padding-bottom: 5px;
    font-size: 9px;
    letter-spacing: 0.2em;
}
.calendar table {
    padding: 0;
    border-collapse: collapse;
}
.calendar th {
    padding-bottom: 3px;
    font-size: 9px;
    width: 23px;
}
.calendar td {
    padding: 2px 0;
    font-size: 10px;
    line-height: 120%;
}
.today {
    display: block;
    border: 1px solid #444444;
}
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

６．２ 公開テンプレートの場合

下記のセレクタを追加してください。

.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
    color: #e50003;
}
.saturday,
.saturday a:link,
.saturday a:visited {
    color: #0000ff;
}

また現在設定されているCSSより、下記の color プロパティ（赤色）を削除してください。これは本日と土日祝日が重複した時に土日祝日の色を優先させるためです。

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

このサイトの右下に表示しているカウンタがまもなく 2000000 に到達します。現在のアクセスからすると本日中に超えそうです。13:50頃超えました。

以前、100万アクセスの時に同じ企画を行ったのが今年の2月23日でしたので、約7ヶ月で100万アクセスという計算になります。Google Analytics で確認すると、2/23?9/14 の PV は 1,283,325 でした。
ということで、このサイトを訪問くださっている皆様には大変感謝しております。

このカウンタはサイト開設当初の2004年5月から設置しているもので、その値はいわゆる「ページビュー」と、隣りに設置している「ビジット」カウンタの中間くらいの粒度で更新されているようです（IPチェックは行っている筈なのでやや閾値が低いビジットと言えるでしょう）。

ということで、2000000 のキリ番をゲットされた方は、カウンタおよびブラウザ内の他の部分を含んだキャプチャ画面をメールでお送り頂ければ、貴サイトを当サイトのエントリーにて紹介させて頂きます。*1

*1：サイト内容によってはお断りする場合があります。予めご了承ください。

Movable Type 3.3 のエントリー・アーカイブ／コメント・プレビューで「TypeKey サイン・インをすると JavaScript エラーが発生します」という質問を頂きました。

１．問題の詳細

IE で表示されている警告マークをクリックするとスクリーンショットのように「'mtcmtauth' は宣言されていません」という詳細メッセージが表示されます。Firefox でも [ツール]-[JavaScriptコンソール]を選択すると、「mtcmtauth is not defined」というエラーが表示されます。

２．原因

TypeKey サイン・イン後、フォームの投稿者情報にある

この情報を登録しますか？

のチェックボックスのチェック状態をクッキー情報を元に自動的に設定するのですが、クッキー読み出し処理に不具合がありました。

３．対処方法

このエラーを解消するには、インデックステンプレート

Site JavaScript（mt-site.js）

の編集画面を開き、下記の青色部分を追加して再構築します。

　　：
</MTElse>
</MTIfRegistrationRequired>
</MTIfRegistrationAllowed>
 
var mtcmthome;
var mtcmtauth;
 
    if (document.comments_form) {
        if (!commenter_name && (document.comments_form.email != undefined) &&
            (mtcmtmail = getCookie("mtcmtmail")))
            document.comments_form.email.value = mtcmtmail;
        if (!commenter_name && (document.comments_form.author != undefined) &&
            (mtcmtauth = getCookie("mtcmtauth")))
            document.comments_form.author.value = mtcmtauth;
        if (document.comments_form.url != undefined && 
            (mtcmthome = getCookie("mtcmthome")))
            document.comments_form.url.value = mtcmthome;
        if (document.comments_form["bakecookie"]) {
            if (mtcmtauth || mtcmthome) {
                document.comments_form.bakecookie.checked = true;
            } else {
                document.comments_form.bakecookie.checked = false;
            }
        }
    }
}
　　：

以上です。
Six Apart にもフィードバックしておきました。

CSS の background プロパティで設定した画像にマウスをポイントした時、img タグに title 属性（または alt 属性）を指定した時のようにツールチップを表示させる方法です。*1
これは mixi の「小粋なユーザコミュニティ」の質問「ブログのタイトルバナー画像に alt 属性は設定できますか？」の回答です。*2

CSS の background 画像に alt 属性を設定することはできませんが、同様の機能を実現することは可能です。

とりあえず img 要素を用いた画像と、div 要素に background 指定した画像のサンプルを用意しましたのでお試しください。
右クリックすれば異なる設定であることがお分かりになると思いますが、いずれの画像もマウスをポイントするとツールチップを表示するようにしています。

img 要素 + alt 属性のサンプル

div 要素 + background 指定のサンプル

ということで回答です。
background 指定の画像は、画像を設定した元の HTML タグに title 属性を設定することでツールチップを表示させています（青色部分）。

HTML

<div id="logo" title="This is Movable Type logo."></div>

CSS

#logo {
    width:120px;
    height:60px;
    background: url(http://path/to/images/logo.gif) no-repeat;
}

サンプルは div 要素を用いましたが、title 属性が設定可能なタグであればツールチップの表示が可能と思われます。また画像を表示しなくても、例えばテキストにマウスをポイントしてもツールチップは表示されます。

参考サイト：RE: [css-d] ALT attributes in CSS background images

2006.09.18 追記
*1、*2 を追加しました。

2006.09.21 追記
「alt 属性= ツールチップ表示」という誤解を招くため、タイトル変更しました。

*1：alt 属性は、画像が表示されない場合の代替テキスト表示が本来の目的で、ツールチップ表示はブラウザ依存です（エントリー投稿以前よりその認識はありましたが説明不足でした）。例えば img 要素を Mozilla 系ブラウザ（Firefox 等）や Opera で表示する場合、title 属性を設定しないとツールチップは表示されません（サンプル（上）は title 属性も設定しています）。

*2：質問自体はツールチップ表示を期待されたものであるかどうかは定かではありません（私の一方的な解釈です）。「代替テキスト表示」が目的であれば解決するための内容はありません。

phpBB2 のテンプレートを修正してブログのページとして表示させる方法をご紹介します。ここでは公開テンプレートの1カラム固定レイアウトに適用させてみました。
表示は Windows 2000・XP+IE6.0/Firefox1.5/Opera9 で確認しています。

修正前

修正後

phpBB では公式サイトのStyles ページから多くのスタイルが提供されており、ダウンロードしたスタイルを「スタイル管理」というメニューから適用することで切り替えることができます（デモページ）。
また管理ページから「テーマの作成」を利用してのカスタマイズも可能ですが、ここでご紹介するのはそのようなエレガントな方法ではありません。予めご容赦ください。

テンプレートの変更に際しては下記のサイトを参考にさせて頂きました。ありがとうございました。

SWEET WATER Web Server *BGMあり

カスタマイズにあたっては、phpBB2 がインストールされていることが必要です。

なお本エントリーでは文字コードについて言及しておりません。
phpBB2 の文字コードは Shift_JIS です。ブログの文字コードは UTF-8 や EUC の場合、同じサイトに表示する場合、文字コードを変換する必要があるかもしれません（phpBB2 日本語サポートフォーラムで他の文字コード版が配布されているようです）。
また、PHP や MySQL をブログと併用する場合も同様です。

１．概要

デザインを変更するには、phpBB2 のテンプレートである

templates/subSilver/overall_header.tpl

templates/subSilver/overall_footer.tpl

を修正します。
ファイル名からお分かりの通り、それぞれがページのヘッダとフッタに対応しています。

それぞれ次のような変更を行います。

• ヘッダ：ブログのタイトルバナーおよびCSSを追加とphpBB2 のタイトルバナー削除（２項）
• フッタ：ヘッダに追加したタグの終了タグおよびフッタを追加（3項）

厳密には、固定レイアウト表示で影響のあるタグの削除を行うため、

language/lang_japanese/lang_main.php

も併せて修正します（４項）。

２．ヘッダの修正

templates/subSilver/overall_header.tpl を任意のエディタで開き、以下の修正を行います。念のためバックアップをとっておきましょう。

２．１ CSSの修正

ページ全体のスタイルを設定している body / bodyline / h1 / h2 のセレクタを無効にし、新しいセレクタを追加します。追加するセレクタは、全体のレイアウトとバナータイトル用で、公開テンプレートの一部を抜粋しています。

サンプルページのカラム幅は .layout-one-column #box で 700px に設定してみましたが、カラム幅を変更したい場合はこのセレクタの width プロパティ値を変更してください。

また body / bodyline を無効にする場合は青色の /* ? */ で括るか、赤色部分を削除してください（どちらも同じ効果です）。h1 / h2 は赤色を削除してください。

　　　　　　　　　　：
/* General page style. The scroll bar colours only visible in IE5.5+ */
/*body { 
    background-color: {T_BODY_BGCOLOR};
    scrollbar-face-color: {T_TR_COLOR2};
    scrollbar-highlight-color: {T_TD_COLOR2};
    scrollbar-shadow-color: {T_TR_COLOR2};
    scrollbar-3dlight-color: {T_TR_COLOR3};
    scrollbar-arrow-color:  {T_BODY_LINK};
    scrollbar-track-color: {T_TR_COLOR1};
    scrollbar-darkshadow-color: {T_TH_COLOR1};
}*/
 
body {
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
    text-align: center;
    background: #36414d;
}
 
/* phpBB全体 */
#box {
    width: 700px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    padding: 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
 
/* タイトルバナー */
#banner h1 {
    margin: 0;
    font-weight: normal;
}
#banner {
    padding: 15px 0 15px 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background: #8fabbe;
    text-align: left;
}
#banner a,
#banner a:link,
#banner a:visited {
    color: #ffffff;
    font-size: 32px;
    text-decoration: none;
}
#banner a:hover {}
#banner a:active {}
 
/* タイトルバナー下の説明 */
#banner-description {
    font-size: 12px;
}
 
/* phpBB */
.bbs {
    padding: 10px 0;
    font-size: small;
    color: #36414d;
    background: none;
}
 
/* フッタ */
#footer {
    padding: 10px;
    border-top: 1px solid #666699;
    color: #ffffff;
    background: #8fabbe;
    font-size: 12px;
    text-align: center;
}
 
/* General font families for common tags */
font,th,td,p { font-family: {T_FONTFACE1} }
a:link,a:active,a:visited { color : {T_BODY_LINK}; }
a:hover     { text-decoration: underline; color : {T_BODY_HLINK}; }
hr  { height: 0px; border: solid {T_TR_COLOR3} 0px; border-top-width: 1px;}
 
/* This is the border line & background colour round the entire page */
/*.bodyline    { background-color: {T_TD_COLOR2}; border: 1px {T_TH_COLOR1} solid; }*/
 
/* This is the outline round the main forum tables */
　　　　　　　　　　：
　　　　　　　　　（略）
　　　　　　　　　　：
/* titles for the topics: could specify viewed link colour too */
.topictitle,h1,h2    { font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT}; }
a.topictitle:link   { text-decoration: none; color : {T_BODY_LINK}; }
a.topictitle:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.topictitle:hover    { text-decoration: underline; color : {T_BODY_HLINK}; }
　　　　　　　　　　：

２．２ body 要素の修正

赤色部分を削除します。

<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

２．３ タイトルバナーの追加

青色部分を追加します。

<body>
 
<a name="top"></a>
 
<div id="box">
<div id="banner">
<h1 id="banner-header"><a href="" accesskey="1">[ブログタイトル]</a></h1>
<div id="banner-description" style="color: #ffffff;">[ブログの説明]</div>
</div>
<div id="content">
<div class="bbs">
 
<table width="100%" cellspacing="0" cellpadding="10" border="0" align="center">
　　　　　　　　　　：

２．４ テーブル要素の属性変更

テーブル幅の変更とCSSによるセンタリングのプロパティを追加します。

変更前

　　　　　　：
<div id="content">
<div class="bbs">
 
<table width="100%" cellspacing="0" cellpadding="10" border="0" align="center">
　　　　　　：

変更後

　　　　　　：
<div id="content">
<div class="bbs">
 
<table width="98%" cellspacing="0" cellpadding="10" border="0" align="center" style="margin-right : auto; margin-left : auto">
　　　　　　：

２．５ phpBBのバナーと説明の削除

table タグが始まる 5 行目辺りにある、phpBBのバナーと説明を削除します。コメントアウトする場合は青色の <!-- ? --> で括り、削除する場合は赤色部分を削除してください（どちらも同じ効果です）。

　　　　　　：
<!--<td><a href="{U_INDEX}"><img src="templates/subSilver/images/logo_phpBB.gif" border="0" alt="{L_INDEX}" vspace="1" /></a></td>-->
<td align="center" width="100%" valign="middle"><!--<span class="maintitle">{SITENAME}</span><br /><span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>-->
　　　　　　：

３．フッタの修正

templates/subSilver/overall_footer.tpl を任意のエディタで開き、以下の青色部分を追加してください。

　　　：
</table>
 
</div>
</div>
</div>
 
</body>
</html>

冒頭のスクリーンショットのようにフッタを挿入する場合は下記のようにしてください。

　　　：
</table>
 
</div>
</div>
<div id="footer">Copyright &copy; 2005 xxxxx All Rights Reserved.</div>
</div>
 
</body>
</html>

４．テンプレートの修正

language/lang_japanese/lang_main.php を任意のエディタで開き、以下の赤色部分を削除してください。

$lang['Posted'] = "<nobr>時間";

これはトピックタイトルが長くなった場合にテーブルの幅が制御できなくなる不具合を解消するための修正です。

５．ブログから phpBB へリンクを設定する

phpBB2 自体の修正は４項まで完了です。
あとはブログのテンプレートに phpBB2 へのリンクを設定してください。phpBB の index.php があるパスがリンクのURLとなります。

phpBB は世界的に有名なオープンソースのWeb掲示板ソフトです。スクリーンショットは phpBB2 をインストールした後のサンプルです。

このエントリーでは phpBB2 のインストール方法について紹介します。次回は当サイトの公開テンプレート風にデザインを変更する方法をご紹介する予定です。

１．ダウンロード

download のページより phpBB 2.0.10 [ Full Package ] をダウンロードします。ここでは 3つのアイコンより zip パッケージを選択します。

次ページでダウンロードホストの選択画面になるので適当なホストの download をクリック。

さらに次ページで表示されたURLをクリックします。

バージョンは適宜更新されると思いますので、最新バージョンをダウンロードしてください。

また、同じページの後方にある Language & Image Packs より日本語用パッケージ、および日本語化アイコンをダウンロードします。ここでは Language 欄および subSilver 欄の zip パッケージを選択します。

２．アップロード

最初にダウンロードした phpBB 本体を解凍すると phpBB2 というフォルダができ、その中に色々なフォルダやファイルがあると思います。この phpBB2 フォルダを丸ごとアップロードします。アップロードするパスはどこでもいいのですが、ここではブログのトップページにアップロードします。
当サイトを例にすると

http://www.koikikukan.com/phpBB2/

となるようにアップロードします。

また、日本語化パッケージを解凍すると lang_japanese というフォルダができ、その中に index.htm や php ファイル等があります。この lang_japanese をフォルダごと、

phpBB2/language/lang_japanese

となるようにアップロードします。

日本語化アイコンも同様に解凍すると、subSilver¥images¥lang_japanese というフォルダができますので、lang_japanese をフォルダごと、

phpBB2/templates/subSilver/images/lang_japanese

となるようにアップロードします。

３．パーミッションの変更

phpBB2/config.php のパーミッションを 606 または 666 に変更して書き込み可能にします。

４．インストール

アップロードした phpBB2 配下の index.php にアクセスします。下記の画面が表示されるので各項目を設定してください。「データベースの名前」で設定するデータベースは事前に作成しておく必要があります。

設定が完了したら「インストール開始」をクリックします。
インストールが成功すると下記の画面が表示されます。

「contlib」と「install」ディレクトリを削除してから「インストール完了」をクリックすると下の画面が表示され、インストールが完了し、ログイン画面になります。

「contlib」と「install」ディレクトリを削除せずに「インストール完了」をクリックすると下の警告画面が表示されます（ログイン画面には遷移しません）。

現在公開中の livedoor ブログテンプレートのリキッドレイアウトに不具合がありました。

具体的には、表示された画面をスクロールアップしてタイトルバナーを見えない状態にして、スクロールダウンしてタイトルバナーを表示するとタイトルバナー上部が真っ白になる、というものです（下）。

原因は、タイトルバナー上に設定されている livedoor ブログの table 要素が影響しているようです。

この不具合を解消するにはスタイルシートのバナー用の設定箇所に width プロパティ（青色）を追加します。

　　　　　　　：
/* タイトルバナー */
.layout-three-column-liquid #banner,
.layout-two-column-liquid-left #banner,
.layout-two-column-liquid-right #banner {
    _width: 100%;
}
#banner {
    padding: 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background: #8fabbe;
　　　　　　　：

前述の問題は IE のみ発生し、Mozzila 系ブラウザでは正常に表示されます。逆に width プロパティを Mozzila に適用すると横スクロール常に表示されてしまうという不具合が発生するため、アンダースコアハックで IE のみに適用しています。

なおダウンロードアーカイブは修正済です。
この修正を行うことで下記のようにスクロールによる影響は解消されます。

客足伸びずに一言

現在配布中の Movable Type 3.3 テンプレートで、コメント・プレビュー／コメント・エラー画面からの Typekey コメント投稿に不具合があることが、ご利用サイトの Shady Grove さんからのご質問で発覚致しました。

具体的には下記のような現象が発生します。

1. Typekeyサインイン中にもかかわらず、コメント・プレビュー／コメント・エラー画面のコメントフォームに「名前」「メールアドレス」の入力フィールドが表示される（「サインインを受け付けました?」という文言は表示されます）
2. コメント・プレビュー／コメント・エラー画面からのコメント投稿後、該当コメントに対してコメンター画像が表示されない（名前・メールアドレスを空欄にして投稿すれば Typekey コメントとして認識されますが、直感的にフィールドに入力してしまうため結果的にこの問題が発生します）

「Movable Type テンプレート」のダウンロードアーカイブは昨日夜に修正版に差し替えましたが、それ以前にご利用の方は申し訳ありませんが下記のいずれかの方法で修正してください。

• 「Movable Type テンプレート」のダウンロードアーカイブを再度ダウンロードして、コメント・プレビュー・テンプレートおよびコメント・エラー・テンプレートのみ差し替える
• 現在お使いのコメント・プレビュー・テンプレートおよびコメント・エラー・テンプレートに対し、下記の修正を実施

修正前

<body class="layout-one-column">

修正後（青色部分を追加）

<body class="layout-one-column" onload="individualArchivesOnLoad(commenter_name)">

onload 属性は 3.2 テンプレート配布当初は設定していたのですが、その後、何かのカスタマイズの動作確認で設定を外し、そのまま 3.3 テンプレートとして用いてしまったようです。

なお、ダウンロードアーカイブに変更した Movable Type 3.2 テンプレートは 3.3 を元に作成しているため、同様の不具合があります（アーカイブは修正済）。

以上です。
ご迷惑おかけして大変申し訳ございません。

アスキー書籍編集部より、現在リリースされている google の全サービスを日本語解説した書籍が出ました。

Google Tool ウェブ2.0時代をリードするGoogleサービス完全活用ガイド アスキー書籍編集部 アスキー 2006-09-04 売り上げランキング : 45320 Amazonで詳しく見る by G-Tools

構成は、

• Part1：Googleの基本機能
  Google検索 / Googleマップ / Googleグループ / Googleニュース / Googleパーソナライズド・ホーム / 他
• Part2：More Google products
  Google Checkout / Google Analytics / Googleサイトマップ / Picasa / Googleアラート / Google Blog Search / Google Book Search / Google Catalogs / Googleデスクトップ / Googleディレクトリ / Google Earth / Google Scholar / Google Finance / Froogle / Googleローカル / Special Google Searches / Googleツールバー / Google Video / Web Search Features / Google Code / Googleインフラ / Blogger / Google Calendar / Gmail / Google SketchUp / Googleトーク / Googleモバイル / Googleパック / Google Web Accelerator
• Part3：ビジネス向けの機能
  Googleアドワーズ / Google AdSense / サイト登録 / 他
• Part4：Google Labs
  Google Extensions for Firefox / Google Accessible Search / Google Spreadsheets / Picasa・Linux対応版 / Google Trends / Google Related Links / Google Mars / Google Web Accelerator / Googleサジェスト / Googleトークユーザー / Google Sets / 他
• Part5：Google Q&A

となっており、google 検索の基本から応用、全サービスの具体的な利用方法等が収められています。B5版・160ページ。読みやすく、スクリーンショットも多数掲載されています。

Movable Type のエントリーに新着コメントまたは新着トラックバックがあった場合、エントリーの下に表示されている投稿者情報に New マークをつけるカスタマイズです。ご質問を頂きましたので本エントリーにてご紹介致します。

スクリーンショットはデフォルトテンプレートに設置した例です。新着コメントまたは新着トラックバックと連動して「New!」マークまたは任意の画像を表示させることができます。
また JavaScript を利用してますので、投稿からの経過時間をリアルタイムに計測して、新着マークの表示・非表示が制御できます。表示判定は時間単位での設定が可能です。

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

１．テンプレートの修正

メインページ／カテゴリー・アーカイブ／日付アーカイブの中から新着表示を行いたいテンプレートに対し、下記の設定を行います。コメント・トラックバックに分けてますので、必要な分だけ設定してください。

１．１ コメントの新着表示

デフォルトテンプレートと公開テンプレートの設定例を下記に示します。青色で表示している部分を追加してください。

デフォルトテンプレートの場合

<MTIfCommentsActive>| <a href="<$MTEntryPermalink$>#comments">コメント (<$MTEntryCommentCount$>)</a> <MTComments lastn="1"><span class="new"><$MTCommentDate format="%Y:%m:%d:%H:%M:%S"$></span></MTComments></MTIfCommentsActive>

公開テンプレートの場合

<!-- コメント・非ポップアップ用 -->
 | <a href="<$MTEntryPermalink archive_type="Individual"$>#comments" title="comments<$MTEntryID$>">Comments</a> [<$MTEntryCommentCount$>] <MTComments lastn="1"><span class="new"><$MTCommentDate format="%Y:%m:%d:%H:%M:%S"$></span></MTComments>

１．２ トラックバックの新着表示

デフォルトテンプレートと公開テンプレートの設定例を下記に示します。青色で表示している部分を追加してください。

デフォルトテンプレートの場合

<MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackback">トラックバック (<$MTEntryTrackbackCount$>)</a> <MTPings lastn="1"><span class="new"><$MTPingDate format="%Y:%m:%d:%H:%M:%S"$></span></MTPings></MTIfPingsActive>

公開テンプレートの場合

<!-- トラックバック・非ポップアップ用 -->
 | <a href="<$MTEntryPermalink archive_type="Individual"$>#trackbacks" title="trackbacks<$MTEntryID$>">Trackbacks</a> [<$MTEntryTrackbackCount$>] <MTPings lastn="1"><span class="new"><$MTPingDate format="%Y:%m:%d:%H:%M:%S"$></span></MTPings>

２．スクリプトの追加

下記のスクリプトを新着表示を設定したテンプレートの最後の方（</body> の前）に設定します。すでに新着表示のカスタマイズをされている場合は設定不要です。

<script type="text/javascript">
<!--
// 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') {
        time = spans[i].childNodes[0].nodeValue.split(":");
        var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
        var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
        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" />';

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

３．CSS設定

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

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

Lucky bag::blog さんの「ldR の購読者数が Bloglines を抜いた」で、Feedburner Top40 というページの存在を知りました。辿っていくと FeedBurner のデベロッパー API を利用して購読者数を計測しているようです。

で、Lucky bag::blog さんは FeedBurner.jp 利用サイトの購読者数連続1位を数ヶ月キープされているとのこと。凄いなぁと思いながらランキングを見に行くと当サイトは2位というオチでした。

国内の著名なブログサイトは feedburner.com を利用されている方が多いので、ある意味ラッキーと言えるでしょう。
英語版の top 40 は下記です。

feedburner.com Top40

ちなみに当サイトの購読者数トップのRSSリーダーは「Firefox Live Bookmarks」。

私はグラフに登場しない feedpath を利用しています。

当サイトで配布している livedoor ブログテンプレートの設定方法です。クリックおよび操作する部分をスクリーンショット内の青枠で示しています。
なお、livedoor IDに登録し、ブログが作成済であることを前提に説明していますので予めご了承ください。

とりあえずログインからスタートします。livedoorブログトップページから右上の「ブログを作成／管理ページにログイン」をクリック。

livedoor ID とパスワードを入力してログインをクリック。

これでブログ管理ページにログインしましたので、上部メニューの「カスタマイズ／管理」をクリック。

次ページで左メニューの「デザインの設定」をクリック。

次ページでページ右下にある「カスタマイズ」または「CUSTOM」の画像をクリック。

これでスタイルシート編集ページが表示されますので、テキストエリアの内容を消去します。スクリーンショットは既に新しいテンプレートに入れ替えた後の内容になってますのが予めご了承ください。

Windows でテキストエリアの内容をまとめて削除するには、テキストエリアの任意の位置をクリックし、その状態で Ctrl+a をタイプ入力するか、マウスを右クリックして「すべてを選択」を選択します。選択できるとテキストが反転した状態になりますので、Delete キーを入力してください。

削除すると、このようにテキストエリアに何もない状態になります。この状態のまま、次の作業に進んでください。

予めダウンロードしたテンプレートアーカイブを解凍し、その中にある「スタイルシート.txt」をダブルクリックするとメモ帳が開きますので、ここに表示されている内容を全て選択状態にします（メニューの[編集]-[すべて選択]で全てが選択されます）。選択状態になったら、Ctrl+c または[編集]-[コピー]を選択します。これで新しいテンプレートがメモリに記憶された状態になりました。

livedoor ブログの編集画面を開いているブラウザに戻り、先ほど空にしたテキストエリアのどこかをクリックして、Ctrl+v または 右クリックで「貼り付け」を選択します。これで先ほどコピーされた新しいテンプレートがテキストエリアに設定されます。その後、下にある「この内容で保存する」をクリックし、変更したテンプレートを保存します。

テキストエリア上部に表示されている「メインページ／個別記事ページ／カテゴリーアーカイブ／月別アーカイブ」のリンクをクリックし、他のテンプレートについてもスタイルシートと同様の手順で入れ替えてください。テキストエリアに設定するテンプレートを間違えないように気をつけてください。

全てのテンプレートの入れ替えが終わったら、左上の「ブログに設定を反映（再構築）」をクリックします。クリックすると左のような画面が表示されますので、プルダウンメニューから「全てのページ」を選択して、その下の「再構築」をクリックします。

「サイトの再構築が完了しました」というメッセージが表示されたら、左上にある「このブログについて」欄にあるブログ名のリンクをクリックし、ブログの表示を確認してください。

タバコの吸い過ぎで体調不良

出遅れましたが Movable Type 3.32日本語版がリリースされました。

Movable Type 3.32日本語版の提供を開始

本日より、Movable Type 3.32日本語版 (以下、3.32-jaと称します。) の提供を開始いたします。

Ogawa::memoranda さんご指摘の、

• MT 3.31のMTEntryTagsの性能バグ
• MT 3.31 + SQLiteがベラボーに遅い件について。

の改善をはじめ、計13項目について修正されています。
なお、ダイナミックパブリッシングで一部不具合があるようです。参考は下記のサイトです。ありがとうございました。

WingMemo：MT3.32にはダイナミックで重大なバグあり ＆ 修正方法

英語版でも 3.32 がダウンロードできます。

livedoor ブログ 用のテンプレートを作りました。サンプルのスクリーンショットは3カラムですが、2カラム・1カラムも用意しております。またリキッドレイアウトへの変更も可能です。カラムレイアウトの設定方法につきましては本エントリーを参照ください。

１．動作確認環境

動作確認は下記の環境で行っています。

• OS：Windows2000/XP
• ブラウザ：IE6.0/Firefox1.0.7/Netscape7.1/Netscape8.0.4/Opera8.5

２．利用規定

ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します。

３．カラムレイアウト変更方法

このテンプレートではカラムレイアウトのバリエーションとして、

• 3カラム（カラム幅固定）
• 3カラムリキッドレイアウト（中央カラム幅可変）
• 2カラム（右サイドバー：カラム幅固定）
• 2カラム（左サイドバー：カラム幅固定）
• 2カラムリキッドレイアウト（右サイドバー：左カラム幅可変）
• 2カラムリキッドレイアウト（左サイドバー：右カラム幅可変）
• 1カラム（カラム幅固定）
• 1カラムリキッドレイアウト（カラム幅可変）

の計8種類を用意しています（それぞれの完成例は下のスクリーンショットをご覧ください）。

カラムレイアウトは、HTMLテンプレートの body 要素の class 属性を書き換えることで変更することができます（カラム数を変更する場合はHTMLテンプレートの修正が必要ですがこれについては後述します）。例えば、3カラムレイアウトから2カラム・リキッドレイアウト（右サイドバー）に変更したい場合は、HTMLテンプレートの

<body class="layout-three-column">

の赤色部分を

<body class="layout-two-column-liquid-right">

と、青色の内容に変更します。このテクニックは Designing with Web Standards でも紹介されています。

以下にそれぞれのレイアウトに対する class 属性値を示します。なおサンプル画像は Movable Type のものを流用しておりますので予めご了承ください。

<body class="layout-three-column">

3カラム

<body class="layout-three-column-liquid">

3カラム・リキッドレイアウト

<body class="layout-two-column-left">

2カラム（左サイドバー）

<body class="layout-two-column-liquid-left">

2カラム・リキッドレイアウト（左サイドバー）

<body class="layout-two-column-right">

2カラム（右サイドバー）

<body class="layout-two-column-liquid-right">

2カラム・リキッドレイアウト（右サイドバー）

<body class="layout-one-column">

1カラム

<body class="layout-one-column-liquid">

1カラム・リキッドレイアウト注：左右のマージンをなくすことも可能です。

配布時は一番上の3カラム固定レイアウトの状態で表示されるように設定しております。

次にカラム数を変更する場合の修正方法です。例えば3カラムから2カラム（左サイドバー）に変更する場合は、右カラムを表示する

<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
<$PluginList_B$>
<div class="elsehead"></div>
<div class="elsebody">
　　　　　　：
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->

の間に書かれている <$PluginList_B$> をコピーし、左カラム

<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
<$PluginList_A$>
<$PluginList_B$>
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->

にペーストしてください。そのあと

<!-- 右カラム開始 -->
　　　　　　　：
<!-- 右カラム終了 -->

を丸ごと削除します。
1カラムに変更される場合は左右両方のカラムをごっそり削除してください。

４．1カラムレイアウトについて

1カラムレイアウトはポータル的な要素を排除して、個人の日記サイトとして気軽に書けるデザインにしています（言い換えると単にサイドバーをとっぱらっただけです）。個別エントリーとコメント・トラックバックは機能しますので、サイトを初めて訪れる方でも戸惑わずに閲覧することが可能です。

1カラムでご利用になる際は前項での左右カラムの削除および、テンプレート内に設定されている

<!-- for one column
<!-- BEGIN archives -->
<div id="archive">{archives_list}</div>
<!-- END archives -->
 
<div id="footer-one">
Powered by <a href="{script_webpage}"><strong>{script_name} {script_version}</strong></a><br />
<a href="http://www.koikikukan.com/"><img src="{site_parts}koikikukan.gif" alt="小粋空間" width="128" height="22" /></a>
</div>
/for one column -->

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

５．その他

タイトルバナー上部に表示されている livedoor のヘッダは削除しないでください（削除は livedoorブログの規約違反となります）。

基本的な動作は確認したつもりですが、Serene Bach の確認を全て理解できていない状態ですので、不具合等ございましたらご連絡ください。

６．ダウンロード

下のリンクからテンプレートをダウンロードできます。

template_1_03.zip

2006.09.01 初版
2006.09.10 IE+リキッドレイアウト対処
2006.09.18 個別記事ページの追記の不具合修正
2009.04.12 デザイン修正
2009.04.19 RelatedArticles追加
2009.10.28 カテゴリアーカイブの前後ページのリンク追加
2010.03.29 ページ上部に表示されるヘッダ用タグを削除

テンプレートの設定方法については、「livedoor ブログ設定方法」をご覧ください。またアーカイブを解凍した中にある README.txt にも記しております。