中央カラムにバナー広告を表示する
公開テンプレートの固定3カラムの中央カラムの幅を補正して、バナー広告を設定するカスタマイズを紹介します。ここでは標準サイズである、幅 468px(468x60)のキーワード広告を設定してみます。下のスクリーンショットは完成例です。
1.カスタマイズ前の状態
現在公開中のテンプレートは、2年ほど前に初めて Movable Type 用の3カラムテンプレートを作成した時からカラム幅を変更しておりませんらず、その後公開した Serene Bach、FC2ブログ、Seesaaブログ等のテンプレートも同じデザインを使用しています。
しかしながら広告の配置について全く考慮していなかったため、例えば固定3カラムの中央カラムのデフォルト幅は、標準バナーサイズの 468px より 20px ほど狭い状態になったままです。
ということで、デフォルト状態のままバナー広告を設定すると、下のスクリーンショットのように中央カラムから広告がはみ出してしまい、右カラムが中央カラムの下に折り返してしまいます。またバナー広告の位置補正もできていません。
サイズ補正したテンプレートの公開云々についてはさておき、以下、中央カラム上部(または下部)にバナー広告を表示するための設定方法です。
2.テンプレートの修正
バナー広告をサンプルのように中央カラム上部に表示する場合、各テンプレート(メインページ/カテゴリー・アーカイブ/日付アーカイブ/エントリーアーカイブ)の下記の位置に挿入しています。またバナー広告全体を 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 -->
:
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 #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
}
以上です。
これで再構築を行えば冒頭のスクリーンショットのようになると思います。
MovableTypeで今日から始めるカスタムブログ 3.3完全対応
久しぶりに 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化(その2:.html のままPHPを有効にする)
Movable Type の PHP化(その1)では拡張子を変更する方法を説明しましたが、このエントリーでは拡張子を変更せず、html のままPHP化を行うカスタマイズを紹介します。
このカスタマイズを行えば、モジュール化やページ分割等を、拡張子の変更なしで利用できるようになります。
1年以上前、自宅サーバで運営している時にこのテクニックを知ったのですが、.htaccess を利用すればレンタルサーバでも可能であることに最近気がつきました。
ここでは、
- AddType ディレクティブによる設定
- ForceType ディレクティブによる設定
- AddHandler ディレクティブと Action ディレクティブによる設定
の3つの方法を紹介します。
基本的には1項の設定で動作するはずですが、さくらインターネットでは3項の方法でしか有効になりませんでした。4項以降の作業は1?3項共通です。
なお本カスタマイズは全てのレンタルサーバで動作を保証するものではありません。予めご了承ください。
1.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 がある場合は上記の設定を追加してください。
2.ForceType ディレクティブによる設定
.htaccess を作成し、下記の内容を記述します。
<FilesMatch "html$">
ForceType application/x-httpd-php
</FilesMatch>
3.AddHandler ディレクティブと Action ディレクティブによる設定
さくらインターネットでは1項の設定が有効になりません。ネットを検索したところ、AddHandler ディレクティブと Action ディレクティブによる方法で実現できることが判明しました。
参考サイトは下記です。ありがとうございました。
以下、設定手順です。
3.1 php のコピーとリネーム
/usr/local/bin/php を自ブログのディレクトリに、php.cgi という名前でコピーします。FTPツールであれば /usr/local/bin でアクセスして、一覧の中にある php を一旦ご自身のPCにダウンロードし、それからご自身のブログのトップディレクトリにアップロードし、php.cgi にリネームします。アップロード後は属性を705または755に変更します。
このファイルは /home/~/www 直下にアップロードしても大丈夫と思いますが、ブログのトップディレクトリが www 直下でない場合、例えば hogehoge というディレクトリがある場合は、hogehoge 配下にアップロードしてください。
3.2 .htaccess の設定
.htaccess に下記の設定を記述します。
AddHandler myphp-script .html
Action myphp-script /php.cgi
このファイルは 2.1項で配置した php.cgi と同じディレクトリに配置してください。
実験したところ、Action ディレクティブの /php.cgi という記述は .htaccess と同じディレクトリにある php.cgi を参照するようです。ということで、いずれのファイルもブログのトップディレクトリに配置すると良いでしょう。
3.1項の説明で、php.cgi を hogehoge というディレクトリアップロードした場合は、.htaccess に下記の設定を記述します。
AddHandler myphp-script .html
Action myphp-script /hogehoge/php.cgi
4.ファイル・ディレクトリのパーミッション変更
html ファイルが実行ファイルとして動作するように、再構築で生成されるディレクトリおよびファイルのパーミッションを変更します。
なお、3項のさくらインターネットの場合では、パーミッションの変更なしで動作したことを付け加えておきます。
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 の機能については下記を参照ください。
5.テスト
下記の1行を記述した任意のHTMLファイル(test.html 等)を作成します。
<?php phpinfo(); ?>
これをブログのトップディレクトリにアップロードしてアクセスしてみてください。下記のように表示が出れば成功です。

2006.10.27
3項の php のパスが誤っていましたので修正しました。
2008.08.03
3.2項の説明を追記しました。
Movable Type の PHP化(その1)
Movable Type をPHP化するカスタマイズです。PHP化には何通りかの方法があり、このエントリーでは拡張子を html から php に変更して、PHPを利用できるようにする方法を紹介します。
PHP化を行うことで、モジュール化やページ分割ができるようになります。
Movable Type には何種類かのテンプレートがあります。その中で、PHP化の対象は「インデックス・テンプレート」と「アーカイブ・テンプレート」の2つで、それぞれの拡張子を変更する方法を説明します。
1.インデックス・テンプレートの拡張子を変更する
インデックス・テンプレートでPHP化をするのは「メインページ」と「アーカイブページ」の2つです。ここではメインページをサンプルに説明します。
1.1 拡張子の変更
ブログ管理画面の左にある「テンプレート」クリックします。 |
表示されたページにインデックステンプレートの一覧が表示されます。このリストの右側にファイル名が表示されており、メインページのファイル名が「index.html」であることが分かります。
ここでは「メインページ」のリンクをクリックします。

次ページで表示された「出力ファイル名」欄が下のように index.html になっています。 |
これを index.php に変更し、「保存」あるいは「保存と再構築」をクリックします。 |
アーカイブページも同様に archives.html から archives.php に変更します。
変更した後、アーカイブページを含め、全てのページを再構築してください。これは各ページの index.html や archives.html のリンクを index.php または archives.php に変更するためです(ただし公開テンプレートには archives.html へのリンクはありません)。
1.2 不要ファイルの削除
ブログのトップディレクトリにある古いファイル、つまり 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 ディレクティブ」で行います。
このディレクティブに記述されたファイルがひとつもみつからない場合はそのディレクトリのファイルリストが表示される、という仕組みになっています。
2.アーカイブ・テンプレートの拡張子を変更する
2.1 表示モードの切替(3.3以降)
各ブログ管理画面左にある「設定」をクリックします。Movable Type 3.2 をお使いの場合は2.2項に進んでください。
Movable Type 3.3 以降をお使いの場合、管理画面の表示モードが「基本モード」と「詳細モード」の2つに切り替えられるようになっており、デフォルトでは「基本モード」になっているので、ページ右側にある「詳細モードに切り替え」をクリックしてください。 |
2.2 拡張子の変更
ページ上にある「公開」をクリックします。

表示されたページ中段に「公開」欄があります。その2つめの「アーカイブの拡張子」を書き換えます。
デフォルトは「html」になっています。 |
これを「php」に書き換えます。書き換えたら一番下の「変更を保存」をクリックします。 |
2.3 旧ファイルの削除
2.2項の設定が終わったら再構築を実施しますが、再構築を実施する前に html ファイルを全て削除することを推奨します。*1
ただし旧ファイルへのアクセスでデッドリンクにさせないことと、4項のリダイレクト実施等との手順を考慮して、削除は後回しにして頂いて構いません。
Movable Type にはファイルを削除する機能はありませんので、FTPツールあるいは TeraTerm 等を利用してログインしてディレクトリ(またはファイル)を削除します。ファイルが大量にある場合はひとつずつ削除するのではなく、「アーカイブディレクトリ」を丸ごと削除する方法が便利です。
「アーカイブディレクトリ」はこのエントリーの便宜上の用語で「アーカイブページが保存されるディレクトリ」を指しますが、「アーカイブの設定」の有無によって「アーカイブディレクトリ」の位置が若干異なります。
2.3.1 「アーカイブの設定」を行っている場合
管理画面の「設定」→「公開」にある「アーカイブの設定」をチェックしていれば、その最初のディレクトリまたは配下のファイルを削除します。

上記の例では、FTPツール等で archives ディレクトリを削除します。削除したディレクトリは再構築によって作成されます。
2.3.2 「アーカイブの設定」を行っていない場合
「アーカイブの設定」にチェックを入れてない場合は、管理画面の「設定」→「公開」にある「アーカイブ・マッピング」の規則にしたがったディレクトリが、トップディレクトリ直下に作成されています。それらのディレクトリを削除します。誤って必要なディレクトリを削除しないようにしてください。
参考までに、「アーカイブ・マッピング」欄をカスタマイズしていなければ、
- 月別・週別・日別アーカイブ:「年(「2006」等)」ディレクトリ
- カテゴリー・アーカイブ:「catX」ディレクトリ
が最上位のディレクトリになると思います。ディレクトリやファイルを削除する前に(削除して良いファイルであることを)確認してください。
3.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が解釈可能なフォーマットに変更してください。
4.ファイル・ディレクトリのパーミッション変更
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 の機能については下記を参照ください。
5.ファイルのリダイレクト
アーカイブページについて、旧ファイル(html)から新ファイル(php)へのリダイレクトを行います。リダイレクトを利用すれば、外部からリンクされてしまっている旧ファイルへのリンクを、新ファイルへ転送することができます。
設定の詳細は「.htaccess によるリダイレクト」を参照ください。
6.出力フォーマットをカスタマイズしている場合
1項および2項で MovableType の全ての拡張子は .php に変更されますが、アーカイブページ(カテゴリー/月別/日別/週別/エントリー等)のパスおよびファイル名をカスタマイズしていて、「出力フォーマット」欄に拡張子 "html" を直接設定している場合は2.2項の設定が反映されません。
この場合、「出力フォーマット」欄の拡張子の代わりに %f または %x を使用します。2.2項の設定により、%x は ".php" に変換されます。
詳細については下記のページを参照ください。
Movable Type 3.3マニュアル:アーカイブ・ファイル名定義
2006,08.28 追記
4項のパーミッション変更作業がもれていたので追加しました。
2006,08.30
XML宣言の修正について追加しました。
2007.10.28
記事のページ分割を解除しました。
*1 旧ファイルを削除する理由は、もし削除しなければ同じ内容のファイルが2つ存在することになります。内部リンクから旧ファイルへのアクセスがなくても、外部からのリンク等が残っている場合、検索エンジンのクロール対象となり、ペナルティを受ける可能性があるためです。
YST(Yahoo! Search Technology)との戦い:その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)
ホルスト 組曲「惑星」 作品32(冥王星付き)
国際天文学連合の総会開催中、冥王星降格に反対するかのように、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 |
サイドメニューの折りたたみマークに画像を使用する
とりあえずサンプルを作成しましたのでお試しください。表示されたページの左サイドバーにある「Recent Entries」が対象部分です。 |
改変したスクリプト menufolder.js は下記のリンクよりダウンロードできます。バージョン 6.01(または 6.01en)以降が対応版です。
以下、折りたたみマークに画像を用いる場合の設定方法です。スクリプトの基本的な設定内容につきましては、マニュアルまたはサイドメニュー折りたたみの各記事を参照願います。
なお、タイトル枠全体に画像を用いるカスタマイズは「サイドメニューの折りたたみに画像を使用する」を参照ください。
1.スクリプト 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 と同じディレクトリに配置すれば、パスの記述は不要です。
2.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」がスタートしたようです。
本日から、シックス・アパートのエンジニアによるブログがスタートしました。技術的な内容はもちろん、彼らの日々の活動や思いが垣間見えるようなブログになると思いますので、ぜひご覧ください。
技術的な記事だけでなく、エンジニアの方々の日頃の様子も伺えそうな予感です。
カテゴリーリストで MTArchiveListHeader と MTArchiveListFooter が正常に動作しない問題
昨日の「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 を用いたツリー表示が必要となります。
JavaScript 不要なサイドメニューのツリー化 for Movable Type
以前、「サイドメニューのツリー化スクリプト(改)」という記事で Movable Type の各リストを JavaScript を用いてツリー化するカスタマイズを紹介しておりますが、3.2 以降で新しいMTタグ *1 が追加されたことで、ほとんど全てのリストについて、JavaScript を使用せずにツリー化が可能であることが判明しました。 |
この方法は JavaScript を用いたカスタマイズと比較して、下記のメリットがあります。
- ブラウザで JavaScript を OFF にしている場合でもツリー表示が可能
- JavaScript 起動による表示遅延がなし
- JavaScript 関連のカスタマイズが不要
ということで、Movable Type のツリー化については本エントリーの方法を推奨します。
1.基本的な設定方法
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タグは異なります。具体的な設定内容については2項を参照してください。
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>
2.MTタグにツリー表示用 class 属性追加
ツリー表示用の class 属性を追加した各リストのMTタグを以下に掲載します。マウスコピーして表示したいテンプレートにペーストしてお使いください。
青色は1項(前半)の設定部分を示しています。必要最小限のタグを掲載してますので、ツリー化以外の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>
3.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)だけが異なっています。
4.ツリー画像のダウンロード
下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。
保存方法は、(IEの場合)リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。なお実線につきましては我楽さんより提供いただきました。ありがとうございました。
なお実線を公開テンプレートに適用した場合、Mozzila系ブラウザ(Netscape/Firefox)で線が途切れる事象が確認されています。スタイルシートの設定で解消されるかもしれませんが予めご了承ください。
5.画像の配置
ダウンロードした画像をローカル・サイト・パスに配置してください。「配置」とはレンタルサーバの場合はFTPツール等によるアップロード、自宅サーバの場合は単なるコピーを示します。
これでツリーが表示されればOKです。
6.参考:ツリー表示の仕組み
ツリー化を行うために、「順序無しリスト(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 属性(名称は任意)を設定
- ツリー化のカスタマイズを実施する
カテゴリー内で(そのカテゴリーの)エントリーを月別表示をするというテクニックはこれまでなかったと思われます。個人ブログ・ビジネスブログに関わらず色々活用できるのではないでしょうか。
YST(Yahoo! Search Technology)との戦い
いつ頃か失念しましたが、ある日を境に 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 検索結果の方がはてなブックマークにひっかかっている率が高いのが興味深いです。
エントリー・アーカイブで親カテゴリーに含まれる全エントリーをサブカテゴリー別に表示
Category:[エントリー, カテゴリー]
Tag:[Customize, Entry, MovableType, SubCategory]
Permalink
エントリー・アーカイブで、親カテゴリーに含まれる全エントリーをサブカテゴリー別に表示するカスタマイズです。
タイトルから機能を理解して頂くのは困難と思いますので、とりあえずサンプルで説明します。
まず、下記のようなサブカテゴリーリストを仮定します。
植物
├ バラ科
│ ├ やまぶき
│ └ ワレモコウ
├ ユリ科
│ ├ チューリップ
│ └ ヒアシンス
└ ラン科
├ サギソウ
└ カトレア
昆虫
├ コガネムシ科
│ ├ カブトムシ
│ └ スジコガネ
└ アガハチョウ科
├ キアゲハ
└ アゲハ
このサブカテゴリーリストは次の規則にもとづいています。
- メインカテゴリー:「植物」または「昆虫」
- サブカテゴリー:科目
- エントリー:科目に属する植物または昆虫の「和名」
この前提で、ブラウザに表示するエントリー・アーカイブが「チューリップ」である場合、エントリー・アーカイブには親カテゴリー(植物)が属するすべてのエントリーをサブカテゴリー別に表示、つまり、
植物
├ バラ科
│ ├ やまぶき
│ └ ワレモコウ
├ ユリ科
│ ├ チューリップ
│ └ ヒアシンス
└ ラン科
├ サギソウ
└ カトレア
を表示するというものです。
以下に、公開テンプレートを使ったサンプルを作ってみました。
エントリー・アーカイブの左上に表示されている「親カテゴリーに属する全カテゴリー」が今回紹介するリストです。
エントリー・アーカイブに同一カテゴリーのエントリーを表示する方法は「個別エントリーアーカイブに同一カテゴリーのエントリーを表示」で紹介している通り、よく知られているテクニックですが、エントリーをカテゴリー別に表示したり、同じ親カテゴリーのエントリーを表示する方法は知られていません。
ただしこのカスタマイズには下記の制約があります。
- 親カテゴリー(「植物」や「昆虫」)にエントリーが存在しないこと。
- サブカテゴリーの下にサブカテゴリーが存在しない(「バラ科」の下に「サクラ属」というサブカテゴリーが存在しない)こと。
上記のリストを表示する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">
<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>
</div>
</div>
<script type="text/javascript">
generateTreeForTreeStructure('parentCategoryEntries');
</script>
CSSは下記です。
ul.tree {
margin: 0px!important;
padding: 0px!important;
font-size: 9px;
list-style: none!important;
}
ul.tree ul {
margin-left: 10px;
padding: 0!important;
}
ul.tree li {
margin: 0;
padding: 0;
background: none;
list-style: none!important;
}
ul.tree li ul li {
margin: 0 0 0 10px;
padding-left: 13px;
background-image: url(tree_lst.gif);
background-repeat: no-repeat;
list-style: none;
}
ul.tree li ul li.end {
background-image: url(tree_end.gif);
list-style: none;
}
このカスタマイズはカテゴリー・アーカイブに適用した場合も同様の動作をします。
Movable Type 3.2 と 3.31 におけるサブカテゴリーリストの表示の違いについて
Category:[トラブルシューティング]
Tag:[MovableType, SubCategory, TroubleShooting]
Permalink
3.31-ja でサブカテゴリーリストの動作を確認している途中、3.2-ja-2 と比較して下記の違いを発見しましたので、ご報告まで。
まず、次のような構造のカテゴリーがあると仮定します。
趣味
└ パソコン
├ mixi
└ ブログ
このカテゴリーを、公開テンプレートで利用しているサブカテゴリーリストのMTタグ
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
を使用して、トップページおよびカテゴリー・アーカイブでの表示を 3.2 と 3.31 で比較してみます。
まず 3.2-ja-2 のサブカテゴリーリストとして表示した結果です。
トップページ:全カテゴリーが表示される |
「趣味」カテゴリー・アーカイブ:サブカテゴリーの「パソコン」カテゴリー以下を表示 |
「パソコン」カテゴリー・アーカイブ:サブカテゴリーの「mixi」「ブログ」カテゴリーを表示 |
「ブログ」または「mixi」カテゴリー・アーカイブ:表示なし |
次に全く同じタグを使用して、3.31-ja のサブカテゴリーリストとして表示した結果です。
トップページ:全カテゴリーが表示される |
「趣味」カテゴリー・アーカイブ:サブカテゴリーの「パソコン」カテゴリー以下を表示 |
「パソコン」カテゴリー・アーカイブ:サブカテゴリーの「mixi」「ブログ」カテゴリーを表示 |
「ブログ」または「mixi」カテゴリー・アーカイブ:全カテゴリーが表示される |
青色と赤色で示した文言からお分かりの通り、3.31-ja では最下層のサブカテゴリーで全カテゴリーが表示されます。
とりあえずシックス・アパートのフィードバックには報告させて頂きました。
3.31-ja で 3.2-ja-2 と同様の表示、つまり最下層のカテゴリー・アーカイブでサブカテゴリーリストを非表示にするためには、
lib/MT/Template/ContextHandlers.pm
に対して下記のパッチをあてると良いでしょう。
--- lib/MT/Template/ContextHandlers.pm.bak Thu Aug 17 01:54:30 2006
+++ lib/MT/Template/ContextHandlers.pm Thu Aug 17 01:55:33 2006
@@ -3937,7 +3937,7 @@
}
}
}
- if (!@cats) {
+ if (!@cats && ($ctx->{current_archive_type} ne 'Category')) {
# Otherwise, use the top level categories
@cats = MT::Category->top_level_categories($ctx->stash('blog_id'));
}
他に適切な対処があるようでしたらお許しください。
バナー広告不要・アクセス解析ツール「Research Artisan」
普段のアクセス解析は Google Analytics を利用していますが、もうひとつ「Research Artisan(リサーチ・アルチザン)」という無料解析ツールに登録してみました。
このツールは、Web開発・インターネットサービスのリスタートシステム社が提供しているもので、2005年10月からβ版がリリースされています。「Artisan」とは「職人」を意味します。
「Research Artisan」で気に入ったのは主に下記の通りです。
バナー広告表示不要
無料アクセス解析ツールではバナー広告の表示を義務付けられているものが少なくありませんが、Google Analytics と同様、「Research Artisan」では表示不要です。個人的にはこれが一番ポイント高いです。
リアルタイム解析
アクセス解析情報をほぼリアルタイムに取得することができます。他の解析ツールでもリアルタイムなツールはあると思いますが、Google Analytics は解析結果取得までにかなりタイムラグがあるため、この点については「Research Artisan」にアドバンテージがあります。
リンククリック測定
外部サイトへのリンクは自動で測定されますが、サイト内の各リンクに対して特定の rel 属性を指定することで測定してくれます。ダウンロード数とかをカウントするのに便利そうです。
アクセスランキング表示
「ページ別」「検索フレーズ」「検索ワード」「リンク元」等のランキングを、ご自身のページに表示することができます。また表示用タグはCSSを利用できるマークアップになっているので、(多分)デザインをきめ細かく設定することができます。
その他、管理者のアクセスをカウントしない、メールで解析結果を送信など、機能は充実しています。
基本的な利用方法は、メンバー登録をして、ログイン後、左下にあるメニューから「管理画面」をクリック。ページ後方にある「解析用JavaScriptタグ」を解析したいページの </body> の前に貼り付ければOKです。
また、7月から同社で提供されている検索マッシュアップサイト「Web Artisan Search」もなかなか面白く、入力した検索キーワードに対し、「Yahoo(サイト、画像、動画)」・「Google(サイト)」・「Amazon(書籍)」・「YouTube(動画)」・「はてな(ブックマーク)」・「Flickr(画像)」等での検索結果を一度に表示してくれます。
Ajax 使いまくりで快適です。
新着トラックバックに New マークをつける
新着エントリーに New マークをつけるの「最近のトラックバック」版で、「最近のトラックバック」の新着トラックバックに「New!!」というテキストや画像を表示するカスタマイズです。
「トラックバック送信後×時間以内」という指定により任意のテキストまたは画像を指定したリストに表示することができます。JavaScript で書きましたのでテンプレートにタグを追加するだけで動作します。また JavaScript OFF の場合は何も表示されないようにしています。Windows2000/XPのIE6.0・Firefox1.0・Opera8.0で動作確認しています。
動作は、トラックバック受信時間をページ上に表示させておき(CSSで非表示)、JavaScript でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であればテキストまたは画像を表示する、という仕組みです。
1.テンプレートの修正
1.1 公開テンプレートの場合
<!-- 最近のトラックバック開始 -->
<div class="sidetitle">
Recent Trackbacks
</div>
<div class="side">
<MTPings lastn="10">
<a href="<$MTPingURL$>" target="_blank" title="t<$MTPingID$>"><$MTPingTitle$></a><br />
from <$MTPingBlogName$> <$MTPingDate format="%m/%d %X"$> <span class="new"><$MTPingDate format="%Y:%m:%d:%H:%M:%S"$></span><br />
</MTPings>
</div>
<!-- 最近のトラックバック終了 -->
1.2 recently_pinged_on プラグインの場合
Ogawa::Memoranda さんの recently_pinged_on プラグインに設定する方法です。
<dl>
<MTEntries recently_pinged_on="5">
<dt><a href="<$MTEntryLink$>"><$MTEntryTitle$></a></dt>
<MTPings lastn="5">
<dd><a href="<$MTPingURL$>" rel="nofollow">
<$MTPingBlogName$>: <$MTPingTitle$></a> <span class="new"><$MTPingDate format="%Y:%m:%d:%H:%M:%S"$></span></dd>
</MTPings>
</MTEntries>
</dl>
1.3 Recents プラグインの場合
The blog of H.Fujimoto さんのRecents プラグインに設定する方法です。
<ul>
<MTPingsRecent lastn="10" ping_sort_order="ascend">
<MTPingsRecentIfEntry><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></MTPingsRecentIfEntry>
<MTPingsRecentIfPing>
<MTPingsRecentHeader><ul></MTPingsRecentHeader>
<li><a href="<$MTPingURL$>"><$MTPingTitle$></a> <$MTPingDate format="%m/%d"$> <span class="new"><$MTPingDate format="%Y:%m:%d:%H:%M:%S"$></span></li>
<MTPingsRecentFooter></ul></li></MTPingsRecentFooter>
</MTPingsRecentIfPing>
</MTPingsRecent>
</ul>
2.スクリプトの追加
1項のタグを設定したテンプレートの最後の方に、下記のスクリプトを追加します(上記タグの中に埋め込まないでください)。
他の新着表示で利用している場合、スクリプトの設定は不要ですが、スクリプトがトラックバック表示より後方になるように設定してください。
<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" />';
とすれば画像を表示することもできます。
3.CSS設定
スタイルシートに下記の設定を追加します。最初の display プロパティで1項のタグに設定したタイムスタンプを非表示にします。その下の color プロパティと font-weight プロパティは、 New!! という文字が表示された場合に適用される設定です。
span.new {
display: none;
color: red;
font-weight: bold;
}
破損した Word 文書を修復する方法
Word 2000 でテキストの他に図や表をごちゃごちゃ挿入した文書を作成していたところ、ある時点から「保存」を実行するとエラーが発生するという事態に陥りました。具体的には、テキストを1文字追加しただけでも保存でエラーになるという悲惨な状況です。
こういう場合、新規 Word 文書を作成し、エラーになったファイルのテキストや表・図形等からちょっとずつコピーしたりしていたのですが、もっとエレガントな方法はないかと検索したら、Microsoft のサポートページに修復方法がありました。
今回の場合、このページの「ファイルの修復方法」に掲載されている「方法1」の手順で修復することができました。以下、修復方法および関連ページをご紹介します。
1.ファイルは開くが、おかしな動作をする場合
1.1 方法1. 他のファイル形式に変換した後、 Word 形式に変換し直す
- エラーとなるファイルを開く
- [ファイル] - [名前を付けて保存] を選択し、[ファイルの種類] で [リッチテキスト形式 (*.rtf)] を選択
- 適当な名前をつけてファイルを保存
- 手順 3. で保存したファイルを Word 2000 で開き、 [ファイル] - [名前を付けて保存] を選択し、 [ファイルの種類] で [Word 文書 (*.doc)] を選択
- 適当な名前を入力し、[保存] をクリック
要するに、リッチ テキスト形式で一旦保存して、それをWord文書で開き直すという方法です。
リッチ テキスト形式は Word の書式をほぼそのままの状態で保存します。この方法で修復された場合、変換中に破損された部分が修復されたことになります。
ということで一部の書式を除き、テキストだけでなく図形や表もほとんどそのままの状態で修復することができました。
リッチテキスト形式ではなくテキスト形式を選択すれば大概のファイルは修復できるようです(ただし書式や図形情報は失われます)。
1.2 方法2.最後の段落記号を除いてすべて選択し、新規文書に貼り付ける
Word では、文書の最後の段落記号にセクションやスタイル設定など、さまざまな情報が保存されています。最後の段落記号を除いた部分をすべてコピーして新規文書に貼り付けることにより、破損した部分が取り除かれる場合があります。
1.3 方法3.破損していない部分をコピーし新規文書に貼り付ける
ある特定の個所で問題が発生するなど、破損している部分がある程度限定できる場合には、以下の手順(破損したファイルのうち正常と思われる部分を範囲選択してコピー、破損ファイルはテキスト形式で保存し、破損部分を抽出)をお試しください。
方法2、方法3については冒頭に述べた作戦と似ています。
2.ファイルが開けない場合
ファイルが開けない場合も方法が3つ挙げられていて、
- 「下書きモード」でファイルを開く
- 新規文書に破損ファイルを挿入する
- ファイルをリンクする
のいずれかで修復可能な場合があるようです。
手順の詳細については上記ページを参照ください。
3.ファイル修復コンバータ
任意のファイルからテキストを抽出できる「ファイル修復コンバータ」について解説されています。
4.Word 2002 / Word 2003 の場合
下記に情報があります。
Word 文書が破損している場合のトラブルシューティング方法
Microsoft Office Word 2003 および Microsoft Word 2002 ではファイルに問題が検出されると、破損している文書を自動的に修復します。Word で文書を開く際に、"強制的に" ファイルを修復することもできます。これを行うには、次の手順を実行します。
Word 2003 等では、ファイル選択画面の「開く」ボタンの右側の矢印から「開いて修復」を選択することができ、これで強制的に修復できるようです。
5.その他
まだまだ色々出てきます。諦めてファイルを削除する前にとりあえず試してみましょう。
エントリーの文字数を表示する
|
1.プラグインのダウンロード
下記のページよりプラグインをダウンロードします。
アーカイブを解凍して、中にある mt-i18n.pl を plugins ディレクトリにアップロードします。特に設定項目はありません。
/plugins/mt-i18n.pl
2.エントリー本文の文字数を表示
下記のコードをテンプレートの <MTEntries>~</MTEntries> の間(エントリー・アーカイブはどこでもいいです)に設定します。
HTMLマークアップをカウントする場合
<MTLengthText><$MTEntryBody$></MTLengthText>
HTMLマークアップをカウントしない場合
<MTLengthText><$MTEntryBody remove_html="1"$></MTLengthText>
とします。
上記の例では記事の文字数が表示されるだけですので、
<MTLengthText><$MTEntryBody remove_html="1"$></MTLengthText>文字です。
と適当な説明をつけ加えましょう。
3.エントリータイトル・エントリー本文・追記の文字数を全て合計して表示
下記のように JavaScript を利用します。エントリータイトル・エントリー本文・追記の文字数を個別に取得し、その合計を JavaScript で表示します。
<script type="text/javascript">
var length = <MTLengthText><$MTEntryTitle remove_html="1"$></MTLengthText>+<MTLengthText><$MTEntryBody remove_html="1"$></MTLengthText>+<MTLengthText><$MTEntryMore remove_html="1"$></MTLengthText>;
document.write('この記事は ' + length + ' 文字です');
</script>
PHPを利用するのであれば
<?php
$length = <MTLengthText><$MTEntryTitle remove_html="1"$></MTLengthText>+<MTLengthText><$MTEntryBody remove_html="1"$></MTLengthText>+<MTLengthText><$MTEntryMore remove_html="1"$></MTLengthText>;
print "この記事は $length 文字です";
?>
という具合です。
エントリー一覧でサブカテゴリーをインデント表示するプラグイン
Movable Type 管理画面のエントリー一覧表示画面では、表示するエントリーをフィルタリングすることができます。フィルタリング条件として「カテゴリー」を選択した場合、プルダウンメニューのサブカテゴリーがインデント表示されないのですが、本プラグインを利用することでサブカテゴリーをインデント表示します。
このプラグインは 3.2 用です(3.3 ではこの不具合は解消されています)。
次のスクリーンショットはプラグイン導入前のサンプル画面です。プルダウンメニューに表示されているサブカテゴリーリストがインデントされておらず、特に異なる親カテゴリーの同名のサブカテゴリーを選択する場合に判別がやや困難です。
プラグインを導入することで、サブカテゴリーがインデントされるようになり、カテゴリー選択が容易になります。
プラグイン自体は半年程前に作ったもので、公開するのを忘れている間に Movable Type がバージョンアップしてしまいました。(笑)
まだ 3.2 をお使いの方も結構いらっしゃると思いますので、本エントリーにて公開します。
1.動作条件
本プラグインご利用にあたって、BigPAPI プラグインがインストールされていることが必要です。
2.ダウンロード
下記リンクより IndentedCategories.zip または IndentedCategories.lzh をダウンロードし、アーカイブを解凍してください。
IndentedCategories.zip
IndentedCategories.lzh
3.インストール
アーカイブを解凍して、中にある IndentedCategories.pl を Movable Type の plugins ディレクトリにアップロードしてください(下記)。
- MTディレクトリ/plugins/IndentedCategories.pl
管理画面から「メイン・メニュー > システム・メニュー > プラグイン」に進み、一覧に「IndentedCategorise ?」が表示されればインストールOKです。その他特に設定する必要はありません。
ビジネスブログの基礎知識
シックス・アパート社が連載記事「ビジネスブログの基礎知識」を開始しました。
シックス・アパート:「ビジネスブログの基礎知識」が始まりました
ブログのビジネス利用について、統計データなどを踏まえながら解説するコンテンツ、「ビジネスブログの基礎知識」が始まりました。ぜひご覧ください。
記事本文は下記のリンクからどうぞ。
ビジネスブログの基礎知識:第1回:ブロガーって、どんな人たち?
第1回の記事は、インターネット白書等の統計情報を元に、
- 「ブログ」という言葉が市民権を得ていること
- インターネットユーザの多くが「ブログ」に関わっていること
- 消費者が「ブロガー」化することの重要性
等について分かりやすく解説されています。
RSSフィードも提供されていますので、継続して購読される方は取得されると良いでしょう。
Movable Type コンテスト 2006
Movable Type コンテスト事務局より「Movable Type コンテスト 2006」のご案内メールを頂きました(昨年参加者)。ということで、Movable Type をお使いの方は奮ってご応募ください。 |
Movable Type コンテスト2006
- エントリー受付:2006年8月8日(火) - 2006年12月15日(金) 18:00
- 結果発表 :2007年2月上旬
- 賞品発送 :2007年2月下旬
- 各賞詳細 :http://mt.rsh.jp/2006_prize/index.html
そういえば、前回コンテストの結果発表で「Web2.0」という単語を初めて耳にしたような気がします。
次世代ブログサービス「Vox」日本語ベータ版公開
ちょっと出遅れましたが、シックス・アパートよりブログサービス「Vox」の日本語ベータ版がリリースされました。 |
VOX - See it. Hear it. Vox it.
以下、CNET Japan の報道です。
シックスアパートの次世代ブログサービス「Vox」日本語版が登場 - CNET Japan
シックスアパートは8月3日、ブログサービス「Vox」の日本語ベータ版を2日より公開したと発表した。
Vox は個人向けブログサービスですが、これまでのブログと異なるのは「必要に応じて記事や写真等の閲覧を制限できる」ことで、いわゆるアクセスコントロール(情報を共有する範囲を制限する)機能が追加されたことです。「閲覧の制限が可能」という意味ではSNSに似ており、関連記事によると「家族」「友人」等、5つの公開レベルを指定できるようです。
また記事の投稿、編集、管理を可能な限り簡単にし、さらに Amazon 等のウェブサービスにも連携する予定で、Movable Type・TypePad よりも簡単に利用できるように工夫されているとのこと。
製品名「Vox」の由来は下記のサイトに掲載されていました。
takeshi kouno's blog:だんだんすごくなる
「Vox」はラテン語で「声」という意味だそうです。「Movable Type」は「活字」で、けっこうシックス・アパートの製品はコミュニケーションについて真剣に考えた製品名をつけていたりします。
米国ではベータ版サービスが開始されており、日本語版は年内に正式公開されるようです。Vox についての詳細は下記のブログでも紹介されています。
Vox は基本的に招待制ですが、Vox のサイトからメールアドレスを登録すればシックス・アパートより招待状を送ってもらえます(いつ招待されるかは未定)。
ということで私も登録致しました。
水沢うどん大澤屋 「謹製肉うどん」

日本の三大うどんといえば、高松の「讃岐うどん」、秋田の「稲庭うどん」、そして群馬の「水沢うどん」。
その中から今回ご紹介するのは、水沢うどんの名店「大澤屋」の通信販売用商品「謹製肉うどん」です。
「水沢うどん」で有名な群馬県伊香保町水沢地区には13軒のうどん店が軒を連ねており(群馬県温泉宿情報 伊香保づくし【伊香保泊書】)、その中でも大澤屋はお客様からの信頼が最も厚く、高い評価を得ているお店です。
「謹製肉うどん」は、店舗で販売している本生うどんに限りなく近い「謹製半生うどん」と、調理済みの上州和牛肉とお揚げをセットにしたもので、最近流行りの「お取り寄せ」で手軽に美味しい水沢うどんがご自宅で食べられます。
うどんはやや細め。少しもちもちしていて、繊細で上品な食感。セットの味付け牛肉は上州和牛を使用、砂糖・醤油・生姜等で調理されたもので、レトルトながら本格的な味。さらに味付けお揚げと大澤屋自家製のかけ汁の組み合わせで、全体的にバランスの良いハーモニーを生み出しています。
この商品は2人前1760円ですが、下のリンクから「水沢うどん大澤屋 「謹製肉うどん」」が抽選で20名様にプレゼントされるキャンペーンを実施中です(8月20日まで)。
3大うどんのひとつ、「水沢うどん」をこの機会に是非お試しください。
ようやく
英語版 Movable Type 個人ライセンスが「無償」に
米Six Apart の Movable Type News で「Movable Type の個人ライセンスが無償」と記されています(注:3.3 リリース時点から無償であったかもしれません)。
Movable Type is Free for Personal Bloggers
以下、ITmedia エンタープライズからの引用です。
ITmedia エンタープライズ:Movable Type、個人ブロガーは「無償」に
ブログサービスの米Six Apartは8月4日、主力ブログ製品の1つであるMovable Type 3.3を個人ブロガー向けに無償提供すると発表した。?(中略)?個人ライセンスは無償の1種類となり、サポートの有無のみがオプションとなった。
個人ライセンスの英語版 Movable Type は下記のページからダウンロードできます。
Movable Type - Personal Pricing and Licenses
補足:
日本語版 Movable Type 3.3 非商用利用での個人ライセンスはもともと無償で、サポートを希望する場合は年間サポート(6,300円)の購入が可能です。また日本語版での非営利運営であればアフィリエイトは可能です(「アフィリエイトを利用したいのですが、商用扱いになるのでしょうか?」参照)
Webサイトで多言語表示をする方法
当サイトのテンプレートご利用者の方より「ハングル文字が表示されません」というご質問を頂きましたので調査致しました。
以下、ブログ等のウェブサイトで多言語表示をする方法をご紹介致します。なお、確認環境は Windows2000/XP + IE6/Firefox1.5/Opera9 です。
1.多言語表示をする
1.1 文字コードを UTF-8 にする
UTF-8 は多言語を扱うための Unicode の符号方式のひとつです。ブログの文字コードを UTF-8 で運用することで、多言語表示が可能になります。
入力方法については言及しません(任意)が、例えばオンラインでは下記のサイトがあります。
その他、エキサイト翻訳も使えそうです。
1.2 数値文字参照を使用する
数値文字参照とは、例えば「<」を「&60;」という特殊な数値および記号で表示することです。なお「<」を「<」と表現するのは文字実体参照です。
ブログの文字コードを Shift_JIS 等で運用している場合、数値文字参照を利用することで多言語表示が可能になります。
他言語を数値文字参照に変換するには下記のサイトが便利です。
2.他言語を正しく表示するために
下記は「ブログでハングル語を表示します」という語句をエキサイト翻訳したハングル語を表示しています。Firefox/Opera では正常にハングル文字が表示されますが、IEでは「・・・・・」という風になってしまいます。
?? ???? ???? ?????.
これは1.1項または1.2項の方法で他言語を入力しても、表示するページの html 属性の lang 属性に "ja" が指定されている場合、IEで正しく表示されないためです。
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
下記のように lang 属性を削除することで表示されるようになります。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
なお、XHTML1.0 では lang 属性と xml:lang 属性に同じ値を指定することになっているため(後方互換性の考慮)、テンプレートには修正前の設定を行っています。XHTML1.1 では lang 属性自体が非許容になります。
3.Opera について
Opera では設定を変更しないと中国語(簡体字)が正常に表示されないようです。下記のページを参考にしてください。
UTF-8ページのフォント指定
UTF-8のベージで中国語のフォントが真当に表示されない
4.参考サイト
上記以外で参考にさせて頂いたサイトです。ありがとうございました。
日本語 Windows でハングルを使うには?
ブラウザ別・メールソフト別UTF-8対応状況
@IT:第11回 多言語対応の問題と解決を考える
Movable Type プラグイン開発関連リンク
Movable Type のプラグイン開発に関するページです。毎回検索で探すのもなんなのでまとめてみました。
Movable Type 3.3 マニュアル
- プラグインの開発について
- http://www.sixapart.jp/movabletype/manual/3.3/03_blog_admin_guide/customizing_blogs/developing_plugins.html
シックス・アパート
- Movable Type オブジェクト・リファレンス
- http://www.sixapart.jp/movabletype/manual/object_reference/
- プラグイン開発のためのファーストステップ
- http://www.sixapart.jp/pronet/developers/movabletype/plugin_development_guide.html
- テンプレート・タグ(変数タグ) プラグインの開発
- http://www.sixapart.jp/pronet/developers/plugin/variable_tag.html
- ローカライズ技術の解説
- http://www.sixapart.jp/pronet/developers/plugin/l10n.html
- フィルター プラグインの開発
- http://www.sixapart.jp/pronet/developers/plugin/global_filter.html
- テンプレート・タグ(コンテナ・タグ) プラグインの開発
- http://www.sixapart.jp/pronet/developers/plugin/container_tag.html
- テンプレート・タグ(条件タグ) プラグインの開発
- http://www.sixapart.jp/pronet/developers/plugin/conditional_tag.html
- Transformerプラグインの開発
- http://www.sixapart.jp/pronet/developers/plugin/transformer.html
O'Reilly Network
- Developing Movable Type Plug-ins
- http://www.oreillynet.com/pub/a/javascript/2003/03/18/movabletype.html
Fenrir's BLog
- MovableTypeのプラグイン作成(邦訳)
- http://fenrir.naruoka.org/archives/000106.html
Intelligent Systems Design Laboratory
- Movable Type プラグイン作成の基礎
- http://mikilab.doshisha.ac.jp/dia/research/report/2005/0813/009/report20050813009.html
Coevolving with ...
- Movable Typeのプラグインを作ろう -第1回-
- http://www.sato-ryu.is-a-geek.com/blog/archives/movable_type_1_1.html
- Movable Typeのプラグインを作ろう -第2回-
- http://www.sato-ryu.is-a-geek.com/blog/archives/movable_type_2_1.html
PC Memorandum of augustus
- Movable Type プラグイン作成入門(1)
- http://www.augustus.to/blog/3128/archives/000071.html
- Movable Type プラグイン作成入門(2)
- http://www.augustus.to/blog/3128/archives/000072.html
- Movable Type プラグイン作成入門(3)
- http://www.augustus.to/blog/3128/archives/000073.html
- Movable Type プラグイン作成入門(4)
- http://www.augustus.to/blog/3128/archives/000074.html
- Movable Type プラグイン作成入門(5)
- http://www.augustus.to/blog/3128/archives/000076.html
hirata's techknow MT
- プラグインの作りかた (その1)
- http://www.movabletype.jp/developers/hirata/archives/2004/08/_1.html
- プラグインの作りかた (その2)
- http://www.movabletype.jp/developers/hirata/archives/2004/08/_2.html
Techknow Movable Type
- Movable Type Perl API Hacks その1 - MT API の基礎
- http://www.movabletype.jp/developers/naoya/archives/2004/11/movable_type_pe.html
- Movable Type Perl API Hacks その2 - MT API の基礎(2)
- http://www.sixapart.jp/movabletype/developers/naoya/archives/2004/11/movable_type_pe_1.html
- プラグイン開発
- http://www.movabletype.jp/developers/naoya/archives/2004/11/movable_type_ap.html
The blog of H.Fujimoto
- Transformerプラグインの作成方法
- http://www.h-fj.com/blog/archives/2006/06/29-160858.php
2006.08.13 追記
テンプレート・タグ(変数タグ) プラグインの開発を追加しました。
2006.09.05 追記
ローカライズ技術の解説とフィルター プラグインの開発を追加しました。
2006.11.01 追記
テンプレート・タグ(コンテナ・タグ) プラグインの開発、テンプレート・タグ(条件タグ) プラグインの開発、Transformerプラグインの開発、Movable Type オブジェクト・リファレンスを追加しました。
YouTube 動画共有サイト完全攻略ガイド
最近流行の Web2.0 系のサービス YouTube のハウツー本が出ました。
![]() | YouTube 動画共有サイト完全攻略ガイド アスキー書籍編集部 アスキー 2006-08-02 売り上げランキング : 10931 Amazonで詳しく見る by G-Tools |
YouTube の利用方法(メンバー登録・動画の再生/アップロード/検索・ブログへの登録方法・RSS他)および YouTube からの動画の保存・再生方法、動画を携帯やiPodで再生するための形式変換まで、これ一冊に YouTube と関連ツールの使い方がほぼ全て網羅されています。
サイズはA5版、スクリーンショットをふんだんに使っているので YouTube の画面に表示されている各項目の意味や各ツールの操作方法等が一発で分かります。
YouTube を活用してみたいけど「よく分からない」「ちょっと不安」といった方、また英語を読むのが面倒という方にお勧めです。
カレンダースクリプト不具合のお知らせ
当サイトで公開している「休日表示付きカレンダースクリプト」について、コメントで「8月の本日表示ができません」という頂き、調査したところ、スクリプトの不具合であることが判明しました。ご迷惑をおかけして大変申し訳ございません。
原因は、本日の日付を判定する際、月の判定に parseInt() を利用しているのですが、この関数の第2引数に進数指定をしておらず、このため8月および9月の場合、正しい値が取得できなかった("0"を取得)ようです。
参考:JavaScript コラム:『parseInt()について』
お急ぎの方は dayChecker.js に対し、下記の修正を行ってください。
修正前
function isToday(year, month, day) {
if (year == currentYear && parseInt(month) == currentMonth && day == currentDay) {
return true;
}
return false;
}
修正後
function isToday(year, month, day) {
if (year == currentYear && parseInt(month,10) == currentMonth && day == currentDay) {
return true;
}
return false;
}
ダウンロードスクリプトにつきましては、修正ができ次第このエントリーでお知らせ致します。
「究極のマウスパッド」エアーパッドプロIII・エアーパッドソール
随分以前から気に入って使っているマウスパッドを改めて紹介したいと思います。下記はブログを始める前にホームページに書いていた記事をリファクタリングしたものです。
秋葉原のとある電気屋でマウスコーナーを見ていた時、様々なマウスのサンプルと一緒に、薄黒い色のマウスパッドが敷かれていたのが出会いのきっかけです。
そのパッドには「究極のマウスパッド」というステッカーが張られており、試しにその上で横に置いてあったマウスを乗せて動かしてみると、妙にマウスが気持ち良く動き、それが大変気に入りました。
もともとマウスを買いに行ったのですが、そのマウスパッドが気に入ってしまった私は即座にマウスパッド売り場に移動。数多く並べられているマウスパッドの中から「究極のマウスパッド」という大胆なラベルが貼られた商品をみつけました。
パッケージの説明には
- シリコンゴム製
- テフロン加工と同等の表面滑性
- 倍のスピード感覚
- 汚れがつきにくい
- 理想の操作性を実現するためにコストを無視して開発
といった、食指の動く台詞がずらりと並んでいました。
そういえば今まで何種類か使ってきたマウスパッドはどれも汚れがつきやすく、また絵柄が入っているものなどは光学式マウスでは感度がいまひとつ良くなかったりと、これといった製品には巡り合ったことがありません。それ以前に「どれもたいして変わらないだろう」という先入観もあり、積極的に探したこともありませんでした。
値段は約3000円と、他のマウスパッドに比較すると明らかに高額ですが、それを加味しても惹かれるものがあり、何より絶妙な滑り心地が気に入りました。ということで思い切って購入。
製品名はPower Support社の「エアーパッド プロ・究極セット」(現在は「究極セット?」)。ホイールマウス・光学式マウス・ワイヤレス光学式と、ほぼ全てのタイプが使用可能。またこのセットには「エアーパッドソール」と呼ばれるものが付属しており、これが「究極セット」と銘打っている理由です。
![]() | AK-77 究極セットIII シグマA.P.Oシステム販売 売り上げランキング : 1378 おすすめ平均 ![]() Amazonで詳しく見る by G-Tools |
これでも十分満足ですが、付属の「エアーパッドソール」を装着すると、マウスはまさにエアーホッケーのラケットのような感覚になり、パッド上で指で押すと少ししか動かなかったマウスが明らかに「滑る」ようになりました。
「エアーパッドソール」は直径約5mmの丸型および楕円型等の、マウスの底面に貼る滑性シートで、丸型は厚さが異なるものが0.45mm/0.65mm/0.95mmと3種類入っています。Apple社光学式マウス用には大型のソールも販売されています。
「動き過ぎるのは良くないのでは?」という疑問も起こりそうですが、とにかく無駄な力が必要なくなりました。例えば、1ドット単位で動かしたい図形描画等のドラッグ操作の場合、微妙な力加減でのマウスの移動がうまくできず苦労していましたが、このマウスパッドを使えば余分な力を加えずに楽に行えます。
この気持良さは他のマウスパッドでは得られるものではなく、そういう意味では割高感も感じられず、まさに「いいモノ」に巡り合えたという印象です。
Amazon のレビューを読むと、説明がわかりにくいためか、サイズを間違って購入されている方がいらっしゃるようですので、以下にまとめてみました。
| 品番 | サイズ | カラー | ソール形状 |
|---|---|---|---|
| AK-37 | 標準 | ダークグラファイト | Apple社光学式マウス用 0.8/1.0mm厚…各1セット |
| AK-47 | 大 | ダークグラファイト | |
| AK-57 | 特大 | ダークグラファイト | |
| AK-17 | 超大 | ダークグラファイト | |
| AK-67 | 薄 | ダークグラファイト | ほぼ全てのマウス用 ・丸型(6mm) 0.35/0.45/0.65mm厚…各6個 ・楕円形(12×6mm) 0.45/0.65mm厚…各4個 |
| AK-77 | 標準 | ダークグラファイト | |
| AK-78 | 標準 | スノー (夜光タイプ) | |
| AK-87 | 大 | ダークグラファイト | |
| AK-88 | 大 | スノー (夜光タイプ) | |
| AK-97 | 特大 | ダークグラファイト | |
| AK-98 | 特大 | スノー (夜光タイプ) | |
| AK-07 | 超大 | ダークグラファイト |
- 薄:W142×D178mm
- 標準:W148×D206mm
- 大:W174×D218mm
- 特大:W198×D252mm
- 超大:W408×D306mm
捺印マットにもいいようです。
so:エアーパッドプロの意外な効能
Thumbnail プラグイン
MTタグに指定した画像ファイルからサムネイル画像を生成し、同時に img タグや画像リンクも生成する Movable Type プラグインを作りました。
Movable Type の既存機能として、ファイルアップロード時のサムネイル画像作成がサポートされていますが、このプラグインの特徴はエントリーに MTタグを直接書き込んで、img タグに変換し、アーカイブ別に元画像とサムネイル画像の表示振り分け機能を実現していることです。
1.設定イメージ
エントリーに、本プラグインで提供する MTThumbnail タグ
<$MTThumbnail file="hogehoge.jpg" width="150" height="100" alt="sample"$>
を記述すると、MTThumbnail タグは img タグ
<img src="http://domain/images/hogehoge_thumb.jpg" width="150" height="100" alt="sample" title="sample" />
に置き換えられ、アップロードした hogehoge.jpg のサムネイル画像 hogehoge_thumb.jpg を自動生成します。src 属性にはサムネイル画像のURLが設定されます。
また MTThumbnail タグにオプション属性でリンクの指定、例えば青色の
<$MTThumbnail file="hogehoge.jpg" width="150" height="100" alt="sample" link="image"$>
を記述すれば、生成された img タグに
<a href="[任意のURL]"><img src="http://domain/images/hogehoge_thumb.jpg" width="150" height="100" alt="sample" title="sample" /></a>
と、元画像のリンクタグを与えることもできます。
2.利用シーン
- ショッピングモール
- メインページやカテゴリー・アーカイブでサムネイル画像を表示、エントリー・アーカイブで元画像を表示。
- Photolog
- メインページにサムネイル画像をパーマリンクつきで表示し、エントリーアーカイブでは元画像を表示。
- 通常の画像表示用
- 全ページでサムネイル画像を表示。画像リンクには元画像のURLを指定して拡大表示。
3.主な仕様
- 本プラグインで提供する MTThumbnail タグに元画像の URL を指定することで、サムネイル画像を自動生成・保存します。
- エントリーを公開すると、MTThumbnail タグが img タグに変換され、src 属性に元画像の URL または、サムネイル画像の URL が埋め込まれます。
- 生成・参照するサムネイルファイル名は Movable Type のサムネイル生成機能のファイル名に準拠(拡張子の前に "-thumb" を付与)していますので、Movable Type のファイルアップロード時に生成したサムネイルを利用することができます。
- アーカイブタイプ(インデックス/カテゴリー・アーカイブ/月別アーカイブ/週別アーカイブ/日別アーカイブ/エントリー・アーカイブ)別に、元画像・サムネイル画像の選択表示を制御できます。
- サムネイル画像のサイズは、「高さ・幅指定」「幅指定」「高さ指定」「デフォルト」の4通りの設定が可能です。「幅指定」または「高さ指定」の場合、縦横比を固定してもう一方のサイズを自動算出します。
- サムネイル画像に元画像のリンクやパーマリンク、あるいは任意のリンクを与えることが可能です。
- 生成する img タグに各属性を設定することが可能です。
4.動作条件
本プラグインご利用にあたって下記の環境が必要です。
4.1 Perl モジュール
下記の Perl モジュールが必要です。さくらインターネット・スタンダードは大丈夫のようです。
Image::Magick
4.2 Movable Type プラグイン
下記のいずれかのプラグインがインストールされ、エントリー内でMTタグが使用可能な状態になっていることが必要です。
eval-template
Process Tags plugin
5.ドネーション
プラグインのご利用および質問に対する回答等について、ご支援・ご賛同くださる方からの寄付をお待ち申し上げます。
将来に向けてのご寄付(例:ドネーションによる機能追加や改善要望)は、それらが実現しない可能性があるため、ご遠慮ください。
- 現状のプラグインで役立った
- 質問の回答で疑問や不具合が解消された
- エントリーの修正等で要望内容が満たされた
等の後に判断して頂ければ結構です。
参考:Web投げ銭
上記の「寄付」のリンクをクリックすると Paypal によるお支払いページにジャンプします。
6.ダウンロード
下記リンクより Thumbnail.zip または Thumbnail.lzh をダウンロードし、アーカイブを解凍してください。
2006.08.01 Ver 1.00
2006.08.03 Ver 1.01 サムネイルファイル名修正、および link 属性に "permalink" 追加
2006.08.12 名称を「MTThumbnail」から「Thumbnail」に変更しました
2006.08.18 Ver 1.02 エラーチェックを強化しました
2006.08.24 Ver 1.11 元画像取得方法を変更
2006.08.26 Ver 1.12 サムネイル設定方法を変更
7.インストール
アーカイブを解凍すると中に Thumbnail フォルダがありますので、フォルダごと Movable Type の plugins ディレクトリにアップロードしてください(下記)。
- MTディレクトリ/plugins/Thumbnail/Thumbnail.pl
- MTディレクトリ/plugins/Thumbnail/tmpl/config.tmpl
管理画面のメイン・メニューの「利用可能なプラグインの設定」に「Thumbnail ?」が表示されればインストールOKです。プラグインの設定については次項以降を参照ください。
8.プラグイン設定
インストール後はプラグインの各設定が初期状態になっています。各設定をするには、ブログ別管理メニューの[設定]→[プラグイン]→[Thumbnail]の右側にある「設定を表示」をクリックして、下記の項目を設定後、「変更を保存」をクリックしてください。
- Thumbnail URL:
- 元画像およびサムネイル画像の URL を指定します。具体的には、次項の「Thumbnail path:」で画像ファイルの保存先を指定しますので、そのURLになります。
例えば、メインページのファイルがあるディレクトリ(トップディレクトリ)の直下に "images" というディレクトリを作成し、そこにサムネイル画像を保存するのであれば、指定する URL は「http://domain/images/」となります。
URLの最後はスラッシュをつけてください。
- Thumbnail path:
- 元画像およびサムネイル画像保存用のパスを指定します。パスの最後にスラッシュを付与しないでください。
このパスは予め作成しておいてください。またファイルを書き込めるよう、事前にパーミッションを変更してください。
- Thumbnail default size:
- サムネイル画像のデフォルトサイズです。MTThumbnail タグに width 属性および height 属性の両方が設定されていない場合のみ、この値が適用されます。
- 幅:サムネイル画像の幅を設定します。
- 高さ:サムネイル画像の高さを設定します。
- Thumbnail:
- サムネイル画像を表示したいアーカイブにチェックをつけます。チェックしないアーカイブには元画像が表示されます。
9.プラグイン利用手順
上記の設定完了後、下記の手順でエントリーしてください。
- 元画像を任意のディレクトリにアップロード
- MTThumbnail タグをエントリーに記述。src 属性には元画像の URL を記述し、その他必要な属性(10項参照)を記述。
- エントリーを公開保存
Movable Type のファイルアップロード機能を利用すれば、もう少し設定の手間が省けます。
- ファイルのアップロード機能で元画像およびディレクトリを指定して「アップロード」をクリック
- 次画面で「エントリーを投稿」を選択、「この画像のサムネイルを作る」にチェックしてサイズを設定し、「埋め込み」をクリック(サムネイルは Movable Type 側の機能で生成されます)
- img タグが埋め込まれたエントリーが表示されるので、"img" を "MTThumbnail" に書き換え、タグ末尾の "/" を削除。width・height をサムネイルの値に修正(もしくは削除)し、その他必要な属性(10項参照)を記述。
- エントリーを公開保存
インデックスおよび各アーカイブページで、プラグインの設定通りにサムネイル画像または元画像が表示されればOKです。
10.タグ・アトリビュート
注:1.11 より src 属性は file 属性に変更されています。
MTThumbnail タグは下記のタグ・アトリビュート(属性)をサポートしています。概ね img タグの属性をイメージしています。
- file
- 元画像のファイル名を設定してください。
- width
- サムネイル画像表示の幅を設定し、width 属性に反映されます。元画像表示の場合、この値は無視されて Image::Magick で取得した値を width 属性に反映します。
- height
- サムネイル画像表示の高さを設定し、height 属性に反映されます。元画像表示の場合、この値は無視されて Image::Magick で取得した値を height 属性に反映します。
- class
- class 属性値を設定した場合、img タグの class 属性に「設定した class 属性値+半角空白+アーカイブ名_[image|thumb]」が反映されます。class 属性値を設定しない場合、「アーカイブ名_[image|thumb]」が反映されます。
例えばメインページでサムネイルを表示する場合、class 属性の指定がなければ、img タグの class 属性は "index_thumb" となります。
- alt
- alt 属性および title 属性として反映されます。
- link
- link="image":img タグを a タグで括り、href 属性に元画像のURLが設定されます。
- link="permalink":img タグ a タグで括り、href 属性にパーマリンクのURLが設定されます。エントリー・アーカイブではパーマリンクは設定されません(パーマリンクを他のアーカイブに設定している場合はご注意ください)。
- link="lightbox":img タグ a タグで括り、href 属性に元画像のURLが設定されます。さらに rel 属性に "lightbox" を付与します。
- link="[url]":img タグに [url] で指定した、任意のURLを与えます。
元画像にはリンクの設定を行わないようにしていますが、ご要望がありましたらご連絡ください。
11.サムネイルの上書きについて
デフォルトでは一旦作成したサムネイルを上書きしない設定にしています。上書きする場合は、
our $overwrite = '0';
を
our $overwrite = '1';
にしてください。
12.FAQ
- Q:MTThumbnail タグがそのまま表示されますが?
- A:表示されたアーカイブに4.2項のプラグインが設定されていません。
- Q:再構築で「Can't call method "permalink" on an undefined value ? MTThumbnail.pl line xxx.」というエラーになりますが?
- A:4.2項のプラグインの設定(eval="1" または process_tag="1")を MTEntries タグではなく、MTEntryBody タグに設定してください。
以上です。
エラーチェック等、不完全な部分があるので暇をみてボチボチなおしていきます。
2006.08.03 追記
サムネイルファイル名を Movable Type 機能で生成するサムネイルファイル名に合わせました。また画像リンクにパーマリンクを設定可能にしました。
2006.08.18 追記
プラグインのエラーチェックを強化しました。
2006.08.22 追記
本文を若干修正しました。
2006.08.25 追記
プラグインを 1.11 にバージョンアップしました。またそれに伴う本文を修正。

ブログ管理画面の左にある「テンプレート」クリックします。
次ページで表示された「出力ファイル名」欄が下のように index.html になっています。
これを index.php に変更し、「保存」あるいは「保存と再構築」をクリックします。
Movable Type 3.3 以降をお使いの場合、管理画面の表示モードが「基本モード」と「詳細モード」の2つに切り替えられるようになっており、デフォルトでは「基本モード」になっているので、ページ右側にある「詳細モードに切り替え」をクリックしてください。
デフォルトは「html」になっています。
これを「php」に書き換えます。書き換えたら一番下の「変更を保存」をクリックします。

![ホルスト:組曲「惑星」op.32[冥王星付]](http://www.koikikukan.com/images/20060826_planets1.jpg)


Movable Type で JavaScript を用いずにサイドメニューのリストをツリー化するカスタマイズです。
カテゴリー・アーカイブに当該カテゴリーのエントリーを月別に表示するカスタマイズを紹介します。
トップページ:全カテゴリーが表示される
「趣味」カテゴリー・アーカイブ:サブカテゴリーの「パソコン」カテゴリー以下を表示
「パソコン」カテゴリー・アーカイブ:サブカテゴリーの「mixi」「ブログ」カテゴリーを表示
「ブログ」または「mixi」カテゴリー・アーカイブ:
Movable Type でエントリータイトルやエントリー本文等の文字数を表示する方法です。

ちょっと出遅れましたが、シックス・アパートよりブログサービス「Vox」の日本語ベータ版がリリースされました。


