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

公開テンプレートの固定3カラムの中央カラムの幅を補正して、バナー広告を設定するカスタマイズを紹介します。ここでは標準サイズである、幅 468px（468x60）のキーワード広告を設定してみます。下のスクリーンショットは完成例です。

１．カスタマイズ前の状態

現在公開中のテンプレートは、2年ほど前に初めて Movable Type 用の3カラムテンプレートを作成した時からカラム幅を変更しておりませんらず、その後公開した Serene Bach、FC2ブログ、Seesaaブログ等のテンプレートも同じデザインを使用しています。

しかしながら広告の配置について全く考慮していなかったため、例えば固定3カラムの中央カラムのデフォルト幅は、標準バナーサイズの 468px より 20px ほど狭い状態になったままです。

ということで、デフォルト状態のままバナー広告を設定すると、下のスクリーンショットのように中央カラムから広告がはみ出してしまい、右カラムが中央カラムの下に折り返してしまいます。またバナー広告の位置補正もできていません。

サイズ補正したテンプレートの公開云々についてはさておき、以下、中央カラム上部（または下部）にバナー広告を表示するための設定方法です。

２．テンプレートの修正

バナー広告をサンプルのように中央カラム上部に表示する場合、各テンプレート（メインページ／カテゴリー・アーカイブ／日付アーカイブ／エントリーアーカイブ）の下記の位置に挿入しています。またバナー広告全体を div 要素で括ってください。

　　　　　　　：
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<div class="ad">
[バナー広告用タグ]
</div>
 
<MTEntries>
<$MTEntryTrackbackData$>
 
<!-- エントリー日付開始 -->
<MTDateHeader>
<div class="date"><$MTEntryDate format="%x"$></div>
</MTDateHeader>
<!-- エントリー日付終了 -->
　　　　　　　：

ページ下に挿入する場合は下記の位置が良いでしょう。

　　　　　　　：
</div><!-- /entry -->
 
</MTEntries>
 
<div class="ad">
[バナー広告用タグ]
</div>
 
</div><!-- /blog -->
　　　　　　　：

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

スタイルシートの下記の赤色部分を青色に修正してください。

修正前

.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 #content {
    float: left;
    width: 478px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}

修正後

.layout-three-column #box {
    width: 870px;
    _width: 872px;
    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 #content {
    float: left;
    width: 498px;
    _width: 500px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}

プロパティの先頭に "_" がついているのは、IE/Mozzika 系ブラウザの表示の差異をなくすための「アンダースコア・ハック」です。

さらにバナー広告を括っている div 要素の class 属性に下記のプロパティを設定し、広告の表示位置を補正します。

.ad {
    margin:8px 0 18px 5px 
}

以上です。
これで再構築を行えば冒頭のスクリーンショットのようになると思います。

久しぶりに Movable Type のカスタマイズ本が発売されました。

Movable Typeで今日から始めるカスタムブログ―3.3完全対応 岡田 庄司 秀和システム 2006-07 売り上げランキング : 18848 Amazonで詳しく見る by G-Tools

内容は Movable Type のインストールとセットアップ、コメント・トラックバック・Typekey認証・検索・バックアップ等の基本操作ならびに各機能の説明、RSS・携帯の利用、MTタグを用いたテンプレートのプログラミング、プラグインを用いたページのカスタマイズ、そして 3.3 準拠のテンプレートタグリファレンスとなっています。巻末には自宅サーバの構築方法等も載っています。

512 ページという豊富な誌面と、基礎から応用まで充実した内容、サンプルデータのダウンロードサービスもありますので Movable Type 3.3 を使いこなしてみたいという方にお勧めです。
また 3.3 のタグリファレンスが掲載されている書籍は今のところこの1冊だけと思います。

Movable Type の PHP化（その1）では拡張子を変更する方法を説明しましたが、このエントリーでは拡張子を変更せず、html のままPHP化を行うカスタマイズを紹介します。

このカスタマイズを行えば、モジュール化やページ分割等を、拡張子の変更なしで利用できるようになります。
1年以上前、自宅サーバで運営している時にこのテクニックを知ったのですが、.htaccess を利用すればレンタルサーバでも可能であることに最近気がつきました。

ここでは、

• AddType ディレクティブによる設定
• ForceType ディレクティブによる設定
• AddHandler ディレクティブと Action ディレクティブによる設定

の3つの方法を紹介します。
基本的には１項の設定で動作するはずですが、さくらインターネットでは３項の方法でしか有効になりませんでした。４項以降の作業は１?３項共通です。

なお本カスタマイズは全てのレンタルサーバで動作を保証するものではありません。予めご了承ください。

１．AddType ディレクティブによる設定

.htaccess を作成し、下記の内容を記述します。

AddType application/x-httpd-php .html

自宅サーバや、レンタルサーバで httpd.conf を直接編集できる場合は、下記の青色部分を追加します。

AddType application/x-httpd-php .php .html

これは、拡張子が html のファイルのMIMEタイプ（擬似MIMEタイプ）を application/x-httpd-php とし、HTTPサーバが php として扱えるようにするための設定です。

設定・保存後、.htaccess はトップディレクトリ（index.html のあるディレクトリ）にアップロードしてください。すでに .htaccess がある場合は上記の設定を追加してください。

参考：AddType ディレクティブ

２．ForceType ディレクティブによる設定

.htaccess を作成し、下記の内容を記述します。

<FilesMatch "html$">
ForceType application/x-httpd-php
</FilesMatch>

参考：ForceType ディレクティブ

３．AddHandler ディレクティブと Action ディレクティブによる設定

さくらインターネットでは１項の設定が有効になりません。ネットを検索したところ、AddHandler ディレクティブと Action ディレクティブによる方法で実現できることが判明しました。
参考サイトは下記です。ありがとうございました。

• さくらのレンタルサーバ非公式FAQ：.php以外の拡張子でphpを動かしたい
• happy hunting ground：PHPを拡張子_htmlで動かすための試行錯誤の記録

以下、設定手順です。

３．１ php のコピーとリネーム

/usr/local/bin/php を自ブログのディレクトリに、php.cgi という名前でコピーします。FTPツールであれば /usr/local/bin でアクセスして、一覧の中にある php を一旦ご自身のPCにダウンロードし、それからご自身のブログのトップディレクトリにアップロードし、php.cgi にリネームします。アップロード後は属性を705または755に変更します。

このファイルは /home/?/www 直下にアップロードしても大丈夫と思いますが、ブログのトップディレクトリが www 直下でない場合、例えば hogehoge というディレクトリである場合は、hogehoge 配下にアップロードしてください。

３．２ .htaccess の設定

.htaccess に下記の設定を記述します。

AddHandler myphp-script .html
Action myphp-script /php.cgi

このファイルは ２．１項で配置した php.cgi と同じディレクトリに配置してください。
実験したところ、Action ディレクティブの /php.cgi という記述は .htaccess と同じディレクトリにある php.cgi を参照するようです。ということで、いずれのファイルもブログのトップディレクトリに配置すると良いでしょう。

４．ファイル・ディレクトリのパーミッション変更

html ファイルが実行ファイルとして動作するように、再構築で生成されるディレクトリおよびファイルのパーミッションを変更します。
なお、３項のさくらインターネットの場合では、パーミッションの変更なしで動作したことを付け加えておきます。

Movable Type 3.3 以降の場合であれば、例えば mt-config.cgi に下記の3行を追加します。

HTMLUmask 0022
DirUmask 0022
HTMLPerms 0777

3.2 の場合は、下記のように mt-config.cgi に設定項目がコメントアウトされて表示されています。

# When creating files and directories, Movable Type uses umask settings to
# control the permissions set on the files. The default settings for file
# creation (HTMLUmask, DBUmask, and UploadUmask) are 0111; for directory
# creation (DirUmask), the default is 0000. You should not change these
# settings unless you are running MT under cgiwrap or suexec, or some other
# scenario where the MT application runs as you; in addition, you should not
# change these settings unless you know what they mean, and what they do.
#
# DBUmask 0022
# HTMLUmask 0022
# UploadUmask 0022
# DirUmask 0022
#
#
# In addition to controlling permissions via umask settings, you can also
# use the HTMLPerms and UploadPerms settings to control the default
# permissions for files created by the system (either as output files or
# uploaded files). The only real use of this is to turn on the executable bit
# of files created by the system--for example, if MT is generating PHP files
# that need to have the executable bit turned on, you could set HTMLPerms
# to 0777. The default is 0666. You should not change these settings unless
# you know what they mean, and what they do.
#
# HTMLPerms 0777
# UploadPerms 0777

これを、設定が必要な行の先頭にある「#」と半角空白を削除して、先と同じ内容に修正してください。

# When creating files and directories, Movable Type uses umask settings to
# control the permissions set on the files. The default settings for file
# creation (HTMLUmask, DBUmask, and UploadUmask) are 0111; for directory
# creation (DirUmask), the default is 0000. You should not change these
# settings unless you are running MT under cgiwrap or suexec, or some other
# scenario where the MT application runs as you; in addition, you should not
# change these settings unless you know what they mean, and what they do.
#
# DBUmask 0022
HTMLUmask 0022
# UploadUmask 0022
DirUmask 0022
#
#
# In addition to controlling permissions via umask settings, you can also
# use the HTMLPerms and UploadPerms settings to control the default
# permissions for files created by the system (either as output files or
# uploaded files). The only real use of this is to turn on the executable bit
# of files created by the system--for example, if MT is generating PHP files
# that need to have the executable bit turned on, you could set HTMLPerms
# to 0777. The default is 0666. You should not change these settings unless
# you know what they mean, and what they do.
#
HTMLPerms 0777
# UploadPerms 0777

なおこの設定項目は一意に決められるものではなく、レンタルサーバによって設定値が異なる可能性があります（上記はさくらインターネット+MySQLの場合）。また DBUmask 0022 が必要な場合もありますのでご注意ください。

HTMLPerms は、perl の sysopen の第4パラメータ、つまりファイル作成時のパーミッションとなります。

XXUmask は、Movable Type 内部から Linux の umask コマンドを実行する時の引数となります。umask の機能については下記を参照ください。

• ファイル新規作成時のパーミッションを変更するには
• ホームディレクトリのデフォルトパーミッションを変更するには

５．テスト

下記の1行を記述した任意のHTMLファイル（test.html 等）を作成します。

<?php phpinfo(); ?>

これをブログのトップディレクトリにアップロードしてアクセスしてみてください。下記のように表示が出れば成功です。

2006.10.27 追記
３項の php のパスが誤っていましたので修正しました。

Movable Type をPHP化するカスタマイズです。PHP化には何通りかの方法があり、このエントリーでは拡張子を html から php に変更して、PHPを利用できるようにする方法を紹介します。
PHP化を行うことで、モジュール化やページ分割ができるようになります。

Movable Type には何種類かのテンプレートがあります。その中で、PHP化の対象は「インデックス・テンプレート」と「アーカイブ・テンプレート」の2つで、それぞれの拡張子を変更する方法を説明します。

１．インデックス・テンプレートの拡張子を変更する

インデックス・テンプレートでPHP化をするのは「メインページ」と「アーカイブページ」の2つです。ここではメインページをサンプルに説明します。

１．１ 拡張子の変更

ブログ管理画面の左にある「テンプレート」クリックします。

表示されたページにインデックステンプレートの一覧が表示されます。このリストの右側にファイル名が表示されており、メインページのファイル名が「index.html」であることが分かります。
ここでは「メインページ」のリンクをクリックします。

次ページで表示された「出力ファイル名」欄が下のように index.html になっています。

これを index.php に変更し、「保存」あるいは「保存と再構築」をクリックします。

アーカイブページも同様に archives.html から archives.php に変更します。

変更した後、アーカイブページを含め、全てのページを再構築してください。これは各ページの index.html や archives.html のリンクを index.php または archives.php に変更するためです（ただし公開テンプレートには archives.html へのリンクはありません）。

１．２ 不要ファイルの削除

ブログのトップディレクトリにある古いファイル、つまり index.html および archives.html を削除します。Movable Type にはファイルを削除する機能はありませんので、FTPツールあるいは TeraTerm 等を利用してログインしてファイルを削除します。

html ファイルを削除する理由は次の通りです。
HTTPサーバの設定にもよりますが、一般的にURLが "/" で終わる場合、サーバは最初に、そのディレクトリの index.html を探すようになっています。当サイトの場合、

http://www.koikikukan.com/

をブラウザに指定して実行した場合、HTTPサーバは

http://www.koikikukan.com/index.html

を一番最初に検索します。index.html が存在しない場合は次候補の index.htm や index.php 等を検索する、という仕組みになっています。
したがって、拡張子を変更しただけでは新しく作った index.php にアクセスされない可能性があります。「可能性がある」と書いたのは、URLに index.php まで指定すれば当然アクセスできるからです。

archives.html については、実際にはURLに archives.php まで設定するためアクセス上は問題ありませんが、削除することを推奨します。*1

参考までに、この「ファイルを検索する」という設定は Apache HTTP サーバの「DirectoryIndex ディレクティブ」で行います。

DirectoryIndex ディレクティブ

このディレクティブに記述されたファイルがひとつもみつからない場合はそのディレクトリのファイルリストが表示される、という仕組みになっています。

２．アーカイブ・テンプレートの拡張子を変更する

２．１ 表示モードの切替（3.3以降）

各ブログ管理画面左にある「設定」をクリックします。Movable Type 3.2 をお使いの場合は２．２項に進んでください。

Movable Type 3.3 以降をお使いの場合、管理画面の表示モードが「基本モード」と「詳細モード」の2つに切り替えられるようになっており、デフォルトでは「基本モード」になっているので、ページ右側にある「詳細モードに切り替え」をクリックしてください。

２．２ 拡張子の変更

ページ上にある「公開」をクリックします。

表示されたページ中段に「公開」欄があります。その2つめの「アーカイブの拡張子」を書き換えます。

デフォルトは「html」になっています。

これを「php」に書き換えます。書き換えたら一番下の「変更を保存」をクリックします。

２．３ 旧ファイルの削除

２．２項の設定が終わったら再構築を実施しますが、再構築を実施する前に html ファイルを全て削除することを推奨します。*1
ただし旧ファイルへのアクセスでデッドリンクにさせないことと、４項のリダイレクト実施等との手順を考慮して、削除は後回しにして頂いて構いません。

Movable Type にはファイルを削除する機能はありませんので、FTPツールあるいは TeraTerm 等を利用してログインしてディレクトリ（またはファイル）を削除します。ファイルが大量にある場合はひとつずつ削除するのではなく、「アーカイブディレクトリ」を丸ごと削除する方法が便利です。

「アーカイブディレクトリ」はこのエントリーの便宜上の用語で「アーカイブページが保存されるディレクトリ」を指しますが、「アーカイブの設定」の有無によって「アーカイブディレクトリ」の位置が若干異なります。

２．３．１ 「アーカイブの設定」を行っている場合

管理画面の「設定」→「公開」にある「アーカイブの設定」をチェックしていれば、その最初のディレクトリまたは配下のファイルを削除します。

上記の例では、FTPツール等で archives ディレクトリを削除します。削除したディレクトリは再構築によって作成されます。

２．３．２ 「アーカイブの設定」を行っていない場合

「アーカイブの設定」にチェックを入れてない場合は、管理画面の「設定」→「公開」にある「アーカイブ・マッピング」の規則にしたがったディレクトリが、トップディレクトリ直下に作成されています。それらのディレクトリを削除します。誤って必要なディレクトリを削除しないようにしてください。

参考までに、「アーカイブ・マッピング」欄をカスタマイズしていなければ、

• 月別･週別・日別アーカイブ：「年（「2006」等）」ディレクトリ
• カテゴリー・アーカイブ：「catX」ディレクトリ

が最上位のディレクトリになると思います。ディレクトリやファイルを削除する前に（削除して良いファイルであることを）確認してください。

３．XML宣言の修正

テンプレートの先頭に

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>

がある場合、拡張子を .php にして表示すると、ページが真っ白になるか

Parse error: parse error, unexpected T_STRING in [...] on line 1

というようなエラーが表示されます。これはXML宣言がPHPとして誤解釈されてしまうための事象です。
これを回避するには、XML宣言を削除するか、

<? echo('<?xml version="1.0" encoding="<$MTPublishCharset$>"?>') ?>

とPHPが解釈可能なフォーマットに変更してください。

４．ファイル・ディレクトリのパーミッション変更

PHPファイルが実行ファイルとして動作するように、再構築で生成されるディレクトリおよびファイルのパーミッションを変更します。

Movable Type 3.3 以降の場合であれば、例えば mt-config.cgi に下記の3行を追加します。

HTMLUmask 0022
DirUmask 0022
HTMLPerms 0777

3.2 の場合は、下記のように mt-config.cgi に設定項目がコメントアウトされて表示されています。

# When creating files and directories, Movable Type uses umask settings to
# control the permissions set on the files. The default settings for file
# creation (HTMLUmask, DBUmask, and UploadUmask) are 0111; for directory
# creation (DirUmask), the default is 0000. You should not change these
# settings unless you are running MT under cgiwrap or suexec, or some other
# scenario where the MT application runs as you; in addition, you should not
# change these settings unless you know what they mean, and what they do.
#
# DBUmask 0022
# HTMLUmask 0022
# UploadUmask 0022
# DirUmask 0022
#
#
# In addition to controlling permissions via umask settings, you can also
# use the HTMLPerms and UploadPerms settings to control the default
# permissions for files created by the system (either as output files or
# uploaded files). The only real use of this is to turn on the executable bit
# of files created by the system--for example, if MT is generating PHP files
# that need to have the executable bit turned on, you could set HTMLPerms
# to 0777. The default is 0666. You should not change these settings unless
# you know what they mean, and what they do.
#
# HTMLPerms 0777
# UploadPerms 0777

これを、設定が必要な行の先頭にある「#」と半角空白を削除して、先と同じ内容に修正してください。

# When creating files and directories, Movable Type uses umask settings to
# control the permissions set on the files. The default settings for file
# creation (HTMLUmask, DBUmask, and UploadUmask) are 0111; for directory
# creation (DirUmask), the default is 0000. You should not change these
# settings unless you are running MT under cgiwrap or suexec, or some other
# scenario where the MT application runs as you; in addition, you should not
# change these settings unless you know what they mean, and what they do.
#
# DBUmask 0022
HTMLUmask 0022
# UploadUmask 0022
DirUmask 0022
#
#
# In addition to controlling permissions via umask settings, you can also
# use the HTMLPerms and UploadPerms settings to control the default
# permissions for files created by the system (either as output files or
# uploaded files). The only real use of this is to turn on the executable bit
# of files created by the system--for example, if MT is generating PHP files
# that need to have the executable bit turned on, you could set HTMLPerms
# to 0777. The default is 0666. You should not change these settings unless
# you know what they mean, and what they do.
#
HTMLPerms 0777
# UploadPerms 0777

なおこの設定項目は一意に決められるものではなく、レンタルサーバによって設定値が異なる可能性があります（上記はさくらインターネット+MySQLの場合）。また DBUmask 0022 が必要な場合もありますのでご注意ください。

HTMLPerms は、perl の sysopen の第4パラメータ、つまりファイル作成時のパーミッションとなります。

XXUmask は、Movable Type 内部から Linux の umask コマンドを実行する時の引数となります。umask の機能については下記を参照ください。

• ファイル新規作成時のパーミッションを変更するには
• ホームディレクトリのデフォルトパーミッションを変更するには

５．ファイルのリダイレクト

アーカイブページについて、旧ファイル（html）から新ファイル（php）へのリダイレクトを行います。リダイレクトを利用すれば、外部からリンクされてしまっている旧ファイルへのリンクを、新ファイルへ転送することができます。
設定の詳細は「.htaccess によるリダイレクト」を参照ください。

６．出力フォーマットをカスタマイズしている場合

１項および２項で MovableType の全ての拡張子は .php に変更されますが、アーカイブページ（カテゴリー／月別／日別／週別／エントリー等）のパスおよびファイル名をカスタマイズしていて、「出力フォーマット」欄に拡張子 "html" を直接設定している場合は２．２項の設定が反映されません。

この場合、「出力フォーマット」欄の拡張子の代わりに %f または %x を使用します。２．２項の設定により、%x は ".php" に変換されます。
詳細については下記のページを参照ください。

Movable Type 3.3マニュアル：アーカイブ・ファイル名定義

2006,08.28 追記
４項のパーミッション変更作業がもれていたので追加しました。

2006,08.30
XML宣言の修正について追加しました。

2007.10.28
記事のページ分割を解除しました。

---

*1 旧ファイルを削除する理由は、もし削除しなければ同じ内容のファイルが2つ存在することになります。内部リンクから旧ファイルへのアクセスがなくても、外部からのリンク等が残っている場合、検索エンジンのクロール対象となり、ペナルティを受ける可能性があるためです。

「YST（Yahoo! Search Technology）との戦い」の続きで、旧ドメインを検索から削除する設定が有効になったようで、2?3日前から旧ドメインがインデックス対象外になりました。

それを示すのが下のスクリーンショットで、Yahoo! 検索で「小粋空間」を入力した検索結果です。これまでトップに表示されていた旧ドメインの「Not Found」というタイトルのページはありません。

他の検索フレーズでも当サイトのページがヒットするようになってきましたが、上位に表示される確率は相変わらず Google が優勢です。

以下は昨日の Google Analytics データです。

前回とそれほど変化はありませんが、 Yahoo からの訪問数が着実に1%ほど上がっています。

• 54.91%：google
• 9.57%：(direct)
• 4.17%：yahoo
• 2.62%：yujiro.dyndns.org
• 2.06%：msn
• 26.67%：(other)

国際天文学連合の総会開催中、冥王星降格に反対するかのように、8月23日に発売されたCDです。

ホルスト:惑星(冥王星付き) ラトル(サイモン) ベルリン・フィルハーモニー管弦楽団 ホルスト 東芝EMI 2006-08-23 売り上げランキング : 1 おすすめ平均 Amazonで詳しく見る by G-Tools

このCDにはボーナストラック（CD-EXTRA）がついており、指揮者サイモンとCDに収録されている5人の作曲家のメイキング映像を見ることができます。

さて、ホルスト作曲の組曲「惑星」（1914?1916作曲）、その中でも特に「木星（ジュピター）」は誰しも一度は耳にしたことがあるほどの著名な作品です。→木星（抜粋）を聴いてみる

この組曲の楽章は「火星・金星・水星・木星・土星・海王星・天王星」で構成され、作曲当時は「冥王星」が未発見だったため作品には含まれませんでした（厳密にはホルストが存命中に発見されたが追加されることはなかった）。
今回発売されたCDには、タイトルの通り、コリン・マシューズ（1946?）作曲の「冥王星」が収録されています。この曲は組曲「惑星」の終楽章という位置づけで新たに作曲されたもので、最後の「海王星」から途切れることなく演奏が続きます。

冥王星が惑星のカテゴリーから除外されることで、組曲「惑星」もこのような形態での演奏、あるいは収録の機会がなくなるかもしれません。

以下、引用です。

ニッカンスポーツ・コム：惑星から除外、さよなら冥王星

同社のクラシック音楽担当児玉洋子さんは「冥王星が惑星でなくなれば、もうこの曲を録音する人はいないでしょう。貴重盤になると思います。クラシック界で今年一番の話題作でしたが、ますます注目を集めそう」。

視点を変えれば、これで「惑星」は完全な組曲となった訳であり、このCDは古き良き時代の名残りとも言えそうです。

なお、冥王星付き「惑星」は他にもいくつか発売されています。ご紹介まで。

ホルスト:組曲「惑星」op.32[冥王星付] チェコ・ナショナル交響楽団 ホルスト ビクターエンタテインメント 2004-07-07 売り上げランキング : 2435 Amazonで詳しく見る by G-Tools

ホルスト:組曲「惑星」(マシューズ作曲「冥王星」付き) アサートン アイヴィ 2005-05-01 売り上げランキング : 2297 Amazonで詳しく見る by G-Tools

サイドメニューの折りたたみカスタマイズで、折りたたみマークに画像（img タグ）を使用できるよう、スクリプトを改変致しました。 とりあえずサンプルを作成しましたのでお試しください。表示されたページの左サイドバーにある「Recent Entries」が対象部分です。

• サンプル1（ブロック要素）
• サンプル2（折りたたみマークにリンク）

改変したスクリプト menufolder.js は下記のリンクよりダウンロードできます。バージョン 6.01（または 6.01en）以降が対応版です。

download

以下、折りたたみマークに画像を用いる場合の設定方法です。スクリプトの基本的な設定内容につきましては、マニュアルまたはサイドメニュー折りたたみの各記事を参照願います。

なお、タイトル枠全体に画像を用いるカスタマイズは「サイドメニューの折りたたみに画像を使用する」を参照ください。

１．スクリプト menufolder.js の設定

menufolder.js の中間辺りにある設定項目で、下記の赤色部分

// 折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
// 画像を設定する場合は右辺を '<img src="[画像のURL]" />'; と書いてください
var openMarkForSideBarMenu  = '▽';
var closeMarkForSideBarMenu = '△';

を

// 折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
// 画像を設定する場合は右辺を '<img src="[画像のURL]" />'; と書いてください
var openMarkForSideBarMenu  = '<img src="images/open.gif" />';
var closeMarkForSideBarMenu = '<img src="images/close.gif" />';

という具合に書き換えてください。画像ファイルを menufolder.js と同じディレクトリに配置すれば、パスの記述は不要です。

２．CSSの追加

メニュータイトルや画像サイズにもよりますが、CSS に

.sidetitle img {
    vertical-align:middle;
}

という設定を追加すれば、折りたたみマーク画像の垂直位置が、テキストタイトルとある程度揃うようになります。

ちなみにサンプルの設定はもう少しアレンジして、

.sidetitle img {
    vertical-align:middle;
    _vertical-align:bottom;
    margin-bottom:0;
    _margin-bottom:1px;
}

としています。

シックス・アパートのエンジニアによるブログ「Tech Talk blog」がスタートしたようです。

Tech Talk blogが始まりました

本日から、シックス・アパートのエンジニアによるブログがスタートしました。技術的な内容はもちろん、彼らの日々の活動や思いが垣間見えるようなブログになると思いますので、ぜひご覧ください。

技術的な記事だけでなく、エンジニアの方々の日頃の様子も伺えそうな予感です。

37年ぶりの引き分け再試合で、見事初優勝を果たした早稲田実業の選手達は

昨日の「JavaScript 不要なサイドメニューのツリー化 for Movable Type」で掲載を見送った、カテゴリーリスト（一括表示）の問題について報告します。

現状（3.31-ja）用意されているMTタグより、ツリー化表示を実現するためのカテゴリーリスト（一括表示）については

<ul class="tree">
<MTArchiveList archive_type="Category">
<li class="tree<MTArchiveListFooter>_end</MTArchiveListFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>

という風に、MTArchiveList、MTArchiveListFooter 等を使用するのが適切と考えます。理由は、MTCategories のタグセットにはリストの最後を示す MTCategoryFooter が用意されていないためです。

上記のタグ構成は月別アーカイブリスト、

<ul class="tree">
<MTArchiveList archive_type="Monthly">
<li class="tree<MTArchiveListFooter>_end</MTArchiveListFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>

とほぼ同じで、異なるのは赤色の archive_type 属性名のみです。

さて、上記の月別アーカイブリストのMTタグを再構築すると、生成されるHTMLは

<ul class="tree">
<li class="tree"><a href="http://hogehoge/2006/08/">2006年08月</a> [1]</li>
<li class="tree"><a href="http://hogehoge/2006/02/">2006年02月</a> [1]</li>
<li class="tree"><a href="http://hogehoge/2006/01/">2006年01月</a> [1]</li>
<li class="tree_end"><a href="http://hogehoge/2005/12/">2005年12月</a> [1]</li>
</ul>

と、正常に最後の li タグの class 属性のみに "tree_end" が設定されるのですが、カテゴリーリストを再構築すると、

<ul class="tree">
<li class="tree_end"><a href="http://hogehoge/cat1/">test1</a> [1]</li>
<li class="tree_end"><a href="http://hogehoge/cat2/">test2</a> [1]</li>
<li class="tree_end"><a href="http://hogehoge/cat3/">test3</a> [1]</li>
<li class="tree_end"><a href="http://hogehoge/cat4/">test4</a> [1]</li>
</ul>

と、ご覧の通り、全ての li 要素の class 属性名に "tree_end" が設定されたHTMLが生成されます。つまり、MTArchiveListFooter が期待する動作になりません。3.2 でも実施してみましたが同様の結果でした。

該当部分のソースコードを見たところ、カテゴリーリストの場合のみ MTArchiveList の処理から MTCategories の処理に移し変えているのが原因と思われます。MTCategories の処理に MTArchive? というタグを処理するコードが存在しないためです。
したがってタイトルの通り、MTArchiveListHeader も同様に機能しません（制限事項として挙げられていたらすいません）。

ということで、一括表示のカテゴリーリストについては JavaScript を用いたツリー表示が必要となります。

Movable Type で JavaScript を用いずにサイドメニューのリストをツリー化するカスタマイズです。 以前、「サイドメニューのツリー化スクリプト（改）」という記事で Movable Type の各リストを JavaScript を用いてツリー化するカスタマイズを紹介しておりますが、3.2 以降で新しいMTタグ *1 が追加されたことで、ほとんど全てのリストについて、JavaScript を使用せずにツリー化が可能であることが判明しました。

この方法は JavaScript を用いたカスタマイズと比較して、下記のメリットがあります。

• ブラウザで JavaScript を OFF にしている場合でもツリー表示が可能
• JavaScript 起動による表示遅延がなし
• JavaScript 関連のカスタマイズが不要

ということで、Movable Type のツリー化については本エントリーの方法を推奨します。

１．基本的な設定方法

JavaScript を用いないため、ul 要素、li 要素に class 属性を記述します。

• ul 要素：class="tree" を追加
• li 要素：class="tree[MT開始タグ]_end[MT終了タグ]" を追加

「最近のエントリー」の設定例

<ul class="tree">
<MTEntries lastn="10">
<li class="tree<MTEntriesFooter>_end</MTEntriesFooter>"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>

[MT開始タグ] と [MT終了タグ] は、各リストの最後を示すMTタグです。リストによって用いるMTタグは異なります。具体的な設定内容については２項を参照してください。

ul 要素の class 属性に "tree" を設定しているのは、通常の ul 要素とスタイルを切り分けることを前提にしているためです。ul 要素を一律ツリー表示として使用する場合は、下記の方法でも大丈夫と思います。

• ul 要素：何も設定しない
• li 要素：[MT開始タグ]class="end"[MT終了タグ] を追加

「最近のエントリー」の設定例

<ul>
<MTEntries lastn="10">
<li<MTEntriesFooter> class="end"</MTEntriesFooter>><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>

２．MTタグにツリー表示用 class 属性追加

ツリー表示用の class 属性を追加した各リストのMTタグを以下に掲載します。マウスコピーして表示したいテンプレートにペーストしてお使いください。

青色は１項（前半）の設定部分を示しています。必要最小限のタグを掲載してますので、ツリー化以外のHTMLマークアップは適宜追加してください。

Recent Entries（最近のエントリー）

<ul class="tree">
<MTEntries lastn="10">
<li class="tree<MTEntriesFooter>_end</MTEntriesFooter>"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>

Recent Entries（最近のエントリー：日別表示用）

<MTEntries lastn="10">
<MTDateHeader>
<ul class="tree"><$MTEntryDate format="%m/%d"$>
</MTDateHeader>
<li class="tree<MTDateFooter>_end</MTDateFooter>"><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li>
<MTDateFooter>
</ul>
</MTDateFooter>
</MTEntries>

Recent Comments（最近のコメント）

<MTEntries recently_commented_on="5">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<ul class="tree">
<MTComments lastn="5">
<li class="tree<MTCommentsFooter>_end</MTCommentsFooter>"><a href="<$MTEntryLink$>#<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$></li>
</MTComments>
</ul>
</MTEntries>

Recent Trackbacks（最近のトラックバック）

<ul class="tree">
<MTPings lastn="10">
<li class="tree<MTPingsFooter>_end</MTPingsFooter>"><a href="<$MTPingURL$>" target="_blank"><$MTPingTitle$></a><br/>
from <$MTPingBlogName$> <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>

Categories（カテゴリーリスト：サブカテゴリー表示）

<MTSubCategories>
<MTSubCatIsFirst><ul class="tree"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>

Monthly Archives（月別アーカイブリスト）

<ul class="tree">
<MTArchiveList archive_type="Monthly">
<li class="tree<MTArchiveListFooter>_end</MTArchiveListFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>

Monthly Archives（月別アーカイブリスト：年別表示）

*プラグインが必要です

<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><span><$MTArchiveDate format="%Y年"$></span><ul class="tree"></MTArchiveDateHeader>
<li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li>
<MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>

３．CSS（全リスト共通）

下記をスタイルシートに追加してください。

ul.tree {
    margin: 0!important;
    padding: 0!important;
    font-size: 9px;
    list-style: none!important;
}
ul.tree ul {
    margin: 0!important;
    padding: 0!important;
}
ul.tree li {
    margin: 0!important;
    padding: 0 0 0 16px!important;
    background-image: url(tree_lst.gif);
    background-repeat: no-repeat!important;
    list-style: none!important;
}
ul.tree li.tree_end {
    background-image: url(tree_end.gif);
    list-style: none;
}

JavaScript を用いる場合のCSSとほぼ同じですが、一番最後のセレクタ名（tree_end）だけが異なっています。

４．ツリー画像のダウンロード

下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。

実線：tree_lst_solid.gif / tree_end_solid.gif

点線：tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。なお実線につきましては我楽さんより提供いただきました。ありがとうございました。
なお実線を公開テンプレートに適用した場合、Mozzila系ブラウザ（Netscape/Firefox）で線が途切れる事象が確認されています。スタイルシートの設定で解消されるかもしれませんが予めご了承ください。

５．画像の配置

ダウンロードした画像をローカル・サイト・パスに配置してください。「配置」とはレンタルサーバの場合はFTPツール等によるアップロード、自宅サーバの場合は単なるコピーを示します。

これでツリーが表示されればOKです。

６．参考：ツリー表示の仕組み

ツリー化を行うために、「順序無しリスト（ul - li）」を利用します。通常の順序無しリストは左側にリストマークが表示されますが、ツリー化ではリストマークを非表示にし、その代わりにツリー画像（"├" または "└"）を、CSS の background-image プロパティを利用して表示します。

全てのリストに同じ画像を表示するのであれば簡単なのですが、ツリーの最後に "└" を表示するため、下記のように最後の li 要素に class 属性の指定が必要になります。

<ul>
<li>aaa</li>
<li>bbb</li>
<li class="tree">ccc</li>
</ul>

この class 属性によりどちらのツリー画像を表示するか判別します。
例えば class 属性がない li 要素には途中の画像 "├" を表示し、class 属性がある場合は最後の画像 "└" を表示します。

JavaScript を利用したツリー化のカスタマイズでは、JavaScript 実行により class 属性を付与しています（したがってブラウザの「ソースの表示」では class 属性が設定されていないようにみえます）。

---

*1：MTArchiveListFooter/MTCommentsFooter/MTPingsFooter

カテゴリー・アーカイブに当該カテゴリーのエントリーを月別に表示するカスタマイズを紹介します。 スクリーンショットは当サイトの「Movable Type テンプレート」のカテゴリーの最近3ヶ月分を抜粋して表示したものです。

このカスタマイズは次のサイトで紹介されています。

Chitatopops：アーカイブ系のページでMTMonthHeaderを擬似的に実現

ということで、詳細につきましては上記サイトの「カテゴリーアーカイブで<MTMonthHeader>」下に表示されているリストをご利用ください。

また説明にある通り、MTTagInvoke と Compare プラグインが事前に設定されていることが必要です。3.31-ja で利用する場合は MTTagInvoke のコードを修正する必要があります（下記参照）。

Movable Type 3.3 の再構築で「<MTTagName>タグが閉じられていません」になる問題の対処（改）

スクリーンショットのようにツリー表示をするためには、タグに若干の修正を加えます。

• リストの h3 要素を span 要素に変更
• タグ全体を div 要素で括り id 属性（名称は任意）を設定
• ツリー化のカスタマイズを実施する

カテゴリー内で（そのカテゴリーの）エントリーを月別表示をするというテクニックはこれまでなかったと思われます。個人ブログ・ビジネスブログに関わらず色々活用できるのではないでしょうか。

テキストが

いつ頃か失念しましたが、ある日を境に Yahoo 検索からのアクセス数が激減しました。
下は Google Analytics による当サイトの昨日（8/18）の「ソース別の訪問数」です。

トップは Google の 53.61% で一人勝ちです。その次の 9.17% が Yahoo と思われるでしょうが、内訳は次の通りです。

• 53.61%：google
• 9.17%：(direct)
• 3.21%：yahoo
• 3.16%：yujiro.dyndns.org
• 2.15%：msn
• 28.69%：(other)

ということで Yahoo からのアクセスが異常に少ないことがお分かりになると思います。
Google で当サイトが上位にランキングされるキーワードをいくつか Yahoo で入力してみましたが、確かに当サイトが上位に表示されることはありません。

考えられる要因のひとつとして、以前利用していた当サイトの旧ドメイン（4位の「yujiro.dyndns.org/blog/koikikukan」）に、同一内容のページが残っており、これによりペナルティを受けてしまったのではないかと推測しています。

現在のドメインは1年ほど前に取得したもので、本来であれば「yujiro.dyndns.org/blog/koikikukan」から「www.koikikukan.com」へのリダイレクトを設定すれば良いのですが、リダイレクトを設定した後、Google からペナルティを受けてしまったため（それが直接の原因であるかどうかは不明）、「旧URLからのリダイレクトを停止しました」で記している通り、リダイレクトの設定を解除しました。

解除後、旧ドメイン（自宅サーバ）のディレクトリを操作し、旧ドメインへのアクセスについてはデッドリンク（404）になるようにしていたため、アクセス可能な状態に戻し、さらに旧サイトのテンプレートを修正して新ドメインへの同一ページのリンクを表示するように変更しました。
が、一部オリジナルの記事がそのまま表示されていたようで、最近、Yahoo の検索結果を調べているうちにそのことに気がつきました。

ちなみに「小粋空間」で検索してトップに表示されている「Not Found」が旧ドメインのページです（下）。

とりあえず旧ドメインの全てのアーカイブページについて、新ドメインのリンクのみを記述したページに修正しました。

また、Yahoo! 検索のヘルプに記述されている「特定のページ、キャッシュを検索結果から削除したい」も行っていなかったため（バカ）、設定しました。

具体的には下記のいずれかを設定して、サイトをクロールしない、あるいはページをインデクシングしないようにします。

サイトのトップレベルに robots.txt を配置し、ファイルの中身に下記を記述

User-agent: * 
Disallow: /

各ページに下記の meta 要素を設定

<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">

上記は他の検索エンジンでも有効です。

これでしばらく様子をみてアクセスの変動を追跡したいと思います。ただし、YST の SEO を行っている訳ではないので、上記が検索でヒットしない主要因であるかどうかは定かではありません。

一応その手の本も読み漁って、例えば「キーワード出現率4%前後」とか「title 要素の先頭に重要なキーワードを配置」とか「body 要素の直下に重要なキーワードを配置」とかあるようですが、今のところ全く行っていません。
本対策で効果がなければこれらの対策を行うかもしれません。

なお、yujiro.dyndns.org のアクセスが多いのは、前述の通り、Yahoo の検索結果に旧ドメインのページがヒットしており、そこから訪問される方がいらっしゃるのではないかと推測します。またドメイン移行前にテンプレートユーザになられたサイトのクレジットバナーに旧ドメインが設定されている可能性があり、それも僅かに含まれているかもしれません。

余談ですが、先日リンクした、「Web Artisan Search」で検索すると、Google・Yahoo の違いがはっきり出ます。Google 検索結果の方がはてなブックマークにひっかかっている率が高いのが興味深いです。

エントリー・アーカイブで、親カテゴリーに含まれる全エントリーをサブカテゴリー別に表示するカスタマイズです。

タイトルから機能を理解して頂くのは困難と思いますので、とりあえずサンプルで説明します。
まず、下記のようなサブカテゴリーリストを仮定します。

　植物
　　├ バラ科
　　│　　├ やまぶき
　　│　　└ ワレモコウ
　　├ ユリ科
　　│　　├ チューリップ
　　│　　└ ヒアシンス
　　└ ラン科
　　　　　├ サギソウ
　　　　　└ カトレア

　昆虫
　　├ コガネムシ科
　　│　　├ カブトムシ
　　│　　└ スジコガネ
　　└ アガハチョウ科
　　　　　├ キアゲハ
　　　　　└ アゲハ

このサブカテゴリーリストは次の規則にもとづいています。

• メインカテゴリー：「植物」または「昆虫」
• サブカテゴリー：科目
• エントリー：科目に属する植物または昆虫の「和名」

この前提で、ブラウザに表示するエントリー・アーカイブが「チューリップ」である場合、エントリー・アーカイブには親カテゴリー（植物）が属するすべてのエントリーをサブカテゴリー別に表示、つまり、

　植物
　　├ バラ科
　　│　　├ やまぶき
　　│　　└ ワレモコウ
　　├ ユリ科
　　│　　├ チューリップ
　　│　　└ ヒアシンス
　　└ ラン科
　　　　　├ サギソウ
　　　　　└ カトレア

を表示するというものです。

以下に、公開テンプレートを使ったサンプルを作ってみました。

サンプル

エントリー・アーカイブの左上に表示されている「親カテゴリーに属する全カテゴリー」が今回紹介するリストです。

エントリー・アーカイブに同一カテゴリーのエントリーを表示する方法は「個別エントリーアーカイブに同一カテゴリーのエントリーを表示」で紹介している通り、よく知られているテクニックですが、エントリーをカテゴリー別に表示したり、同じ親カテゴリーのエントリーを表示する方法は知られていません。

ただしこのカスタマイズには下記の制約があります。

• 親カテゴリー（「植物」や「昆虫」）にエントリーが存在しないこと。
• サブカテゴリーの下にサブカテゴリーが存在しない（「バラ科」の下に「サクラ属」というサブカテゴリーが存在しない）こと。

上記のリストを表示するMTタグです。

<MTParentCategory><MTSubCategories include_current="1">
<MTSubCatIsFirst><ul></MTSubCatIsFirst><MTIfNonZero tag="MTCategoryCount"><li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a>
<MTEntries><MTEntriesHeader><ul></MTEntriesHeader><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li><MTEntriesFooter></ul></MTEntriesFooter></MTEntries><MTElse><li><$MTCategoryLabel$></MTElse></MTIfNonZero><MTSubCatsRecurse max_depth="3"></li><MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories></MTParentCategory>

ツリー化するには、maketree.js を利用して、下記の青色部分を追加します。

<div class="side">
<div id="parentCategoryEntries">
<MTParentCategory><MTSubCategories include_current="1">
<MTSubCa