★movable type 5の概要 - h.fujimoto · ★movable type...

第1章 Movable Type 5の概要とインストール

- 16 -

★Movable Type 5の概要

本書では、Movable Type 5を使ってWebサイトを作る方法を解説していきます。その

第一歩として、Movable Typeの全体的な概要から話を始めます。

■Webサイト全体を管理するCMS ここ数年、CMS（Contents Management System、コンテンツ管理システム）という言

葉を聞く機会が多くなりました。Webサイトは多くのコンテンツから構成されますが、

それらのコンテンツを管理し、多彩な形態でWebページとして出力することができるの

が、CMSの特徴の1つです。

Movable Typeも、CMSの一種と言える製品です。Movable Typeは、元々はブログを管

理するための製品でしたが、ブロガーだけでなくWeb製作者に使われる機会が増え、そ

れにともなってCMS的な機能が強化されてきました。

そして、Movable Type 5では、「ウェブサイト」という概念があらたに導入されまし

た（詳しくは後述）。これによって、「CMS的な機能もあるブログ管理ツール」から、「ブ

ログも管理できるCMS」へと、変化を遂げたといえます。

■「ウェブサイト」機能でWebサイトを管理一般的なウェブサイトでは、トップページがあり、それ以外のページはフォルダ（デ

ィレクトリ）によって階層化されていることが多いです（図1.1）。

Movable Type 5の「ウェブサイト」の機能では、「ウェブサイト」の中に「フォルダ」

と「ウェブページ」を作って、このような構造のWebサイトを管理することができます。

また、個々のウェブページは、ひな型（テンプレート）に沿って出力します。その

ため、ウェブサイト内の各ウェブページの構造やデザインを、テンプレートで統一す

ることができます。

さらに、Webサイトの中には、スタイルシートや外部JavaScriptなど、HTML以外のフ

ァイルを入れることもあります。これらのファイルも、「インデックステンプレート」

というテンプレートで管理することができます。


- 17 -

図1.1 一般的なウェブサイトの構造

トップページ

フォルダ

Webページ

フォルダ

Webページ

Webページ

フォルダ

Webページ

Webページ

Webページ

フォルダ

Webページ

フォルダ

■ウェブサイトに「ブログ」を入れることもできる前述したように、Movable Typeは元々はブログを管理するツールでした。Movable

Type 5でも、当然ながら、ブログを管理することもできます。

時系列的に管理したい情報や（例：新着情報）、カテゴリに分けて管理したい情報は

（例：商品カタログ）、ブログとして管理するのに適しています。

ただし、Movable Type 5は、これまでのMovable Typeとは異なり、「ブログは、ウェ

ブサイトを構成する1つの部品」という扱いになっています。また、1つのウェブサイ

トの中には、複数のブログを入れることができます。

例えば、企業サイトを作る場合だと、1つのウェブサイトの中に、「新着情報」「商品

カタログ」「社長日記」などの複数のブログを立てて管理する、といったことができま

す。


- 18 -

図1.2 ウェブサイトの中にブログを入れて管理する

ウェブサイト

「商品カタログ」ブログ

「新着情報」ブログ

「社長日記」ブログ

ブログでは、記事をカテゴリごとにまとめたり、年別／月別／日別などでまとめた

りして出力することが一般的です。Movable Type 5のブログの機能でも、カテゴリご

とや年別などで記事をまとめて、「アーカイブページ」として出力することができます

（図1.3）。

また、個々のアーカイブページは、「アーカイブテンプレート」というテンプレート

に沿って出力されます。したがって、個々のアーカイブページも、ブログ全体で構造

やデザインを統一することができます。

さらに、アーカイブページは複数種類作ることができます。例えば、パソコン用の

アーカイブページと、携帯用のアーカイブページを作り分ける、といったことも可能

です(※)。

なお、ウェブページはフォルダで分類することができますが、時系列やフォルダ別

のアーカイブページを出力することができません。前述したように、時系列的な要素

があるページや、カテゴリ分けしたいページは、ブログを使って管理する方が良いで

しょう。

(※) Movable Type本体には、携帯電話対応機能は標準装備されていません。携帯用テンプレートを作るため

のプラグインを、別途購入する必要があります。


- 19 -

図1.3 記事をカテゴリごとや年ごとにまとめてアーカイブページを出力することができる

カテゴリA に2009年に書いた

記事

カテゴリB に2009 年に書いた

記事

カテゴリA に2008 年に書いた

記事


記事


記事


記事

カテゴリB のアーカイブページ


記事


記事

2009年のアーカイブページ


記事


記事

2008 年のアーカイブページ


記事


記事

元となる記事

カテゴリA のアーカイブページ

■ウェブサイト／ブログ間の連携 Movable Type 5では、ウェブサイトとその中の個々のブログを連携させたり、ブロ

グどうしを連携させたりすることもできます。例えば、ウェブサイトのトップページ

に、そのウェブサイトに属するブログの新着記事を一覧表示することができます（画

面1.1）。

ただし、紙面の都合上、本書ではウェブサイトとブログの間の連携については解説

しません。本書の続編で解説する予定です。


- 20 -

画面1.1 ウェブサイトのトップページに、そのウェブサイトに属するブログの新着記事を一覧表示する

■強力なテンプレートタグすでに述べたように、Movable Type 5では、サイト内の各ページはテンプレートに

沿って出力されます。ページに出力するデータは、「テンプレートタグ」で制御するこ

とができます。

テンプレートタグは、HTMLのタグと似たような書式で、出力するデータを指定する

タグです。例えば、「<$mt:PageTitle$>」というテンプレートタグは、出力先のHTMLフ

ァイルでは、個々のウェブページのタイトルに変換されます。

Movable Typeの特徴の1つは、テンプレートタグが非常に強力なことです。テンプレ

ートタグの種類が豊富で、また繰り返しや条件判断といったプログラミング的なテン

プレートタグもあるため、テンプレートタグを駆使することで、複雑なページを出力

することができます（その反面、「テンプレートタグを理解するのが難しい」とも言え

ます）。

また、テンプレートタグは、基本的にはあくまでも「データ」だけを出力し、HTML

のタグは出力しません。そのため、データをHTMLでマークアップする方法は、自由に

変えることができます。


- 21 -

■「テーマ」でサイトのデザインを変えられる Movable Type 5では、前述したように、サイト内の個々のページはテンプレートに

沿って出力されます。そのため、元となる記事等が同じでも、テンプレートの内容を

変えれば、出力されるページの構造やデザインを変えることができます。

Movable Type 5では、テンプレート等を一気に入れ替えるための機能として、「テー

マ」が追加されました。インターネット等で配布されているテーマを入手して、既存

のウェブサイトに適用することで、ウェブサイトの見た目を変えることができます（画

面1.2）。

また、自分で作ったテンプレート等を一まとめにして、テーマに書き出すこともで

きます。書き出したテーマは、インターネット等を利用して、広く一般に配布するこ


なお、テーマの書き出しについては、紙面の都合上、本書では基本的な手順のみ解

説します。詳細については、本書の続編で解説する予定です。

画面1.2 テーマの変更

★Movable Type 5をレンタルサーバーにインストールする

- 29 -


Movable Type 5は、Webサーバーにインストールして動作させるツールです。一般的

には、レンタルサーバーを使ってMovable Type 5を動作させることが多いです。この

節では、Movable Type 5をレンタルサーバーにインストールする手順を解説します。

■Movable Type 5の入手まず、Movable Typeを入手します。入手方法はライセンスによって異なります。

●商用ライセンスの入手商用ライセンスは、「ECバイヤーズ」というサイトで購入します。

まず、シックスアパートのMovable Type 5のトップページに接続します。アドレス

は以下の通りです。

http://www.sixapart.jp/movabletype/

このページの右上の方に、「クレジットカード購入」と「その他の購入方法」のボタ

ンがあります。購入方法に応じたボタンをクリックすると、ECバイヤーズのサイトに

移動しますので、購入の手続きを行います。

●個人無償ライセンス個人無償ライセンスも、ECバイヤーズでダウンロードすることができます。

Movable Type 5のトップページ（http://www.sixapart.jp/movabletype/）の右上に、

「個人ライセンス」のボタンがあります。

それをクリックすると、ECバイヤーズのダウンロードのページに進みます。画面の

指示に従ってダウンロードします。

●オープンソース版（MTOS）オープンソース版は、MOVABLE TYPE.JP（Movable Typeの情報サイト）でダウンロー


- 30 -

ドします。このサイトでオープンソース版のページに接続すると、右上に「今すぐダ

ウンロード」のリンクがありますので、そこをクリックします。

オープンソース版のページのアドレスは以下の通りです。

http://www.movabletype.jp/opensource/

■Zipファイルの解凍 Movable TypeのZipファイルを入手したら、そのファイルをご自分のパソコンで解凍

します。

現状では、Windows／Macともに標準でZipファイルを解凍する機能がありますので、

それを使います。Zipファイルを解凍したら、「MT-5.0-ja」というフォルダができます

そのフォルダの中身を確認しておきます。なお、MTOSでは「MTOS-5.0-ja」フォルダが

できます。以後適宜フォルダ名を読み替えてください。

「MT-5.0-ja」フォルダの中に、「addons」等のフォルダと「mt.cgi」等のファイル

がある場合は、そのフォルダをそのまま使います。

一方、「MT-5.0-ja」フォルダの中に、さらに「MT-5.0-ja」フォルダができる場合が

あります。その場合は、中の「MT-5.0-ja」フォルダを使うようにします（図1.4）。

図1.4 「MT-5.0-ja」フォルダの中に「MT-5.0-ja」フォルダができている場合は中のフォルダを使う

MT-5.0-ja フォルダ

MT-5.0-ja フォルダ

alt-tmpl 等のフォルダ

mt.cgi 等のファイル


- 31 -

■Movable Type 5のアップロード次に、レンタルサーバーに前述の「MT-5.0-ja」フォルダをアップロードします。ま

た、アップロード後に適宜フォルダの名前を変えます。

たとえば、以下のようなレンタルサーバーがあるとします。

・Webサイトのドメイン名は「http://www.sample.com/」

・このドメインに対応するサーバー上のディレクトリは

「/var/data/www.sample.com/」

このときに、Movable Typeのアドレスが「http://www.sample.com/mt/・・・」の形

になるようにしたい場合、以下の手順をとります。

①「MT-5.0-ja」フォルダ全体を、「/var/data/www.sample.com/」ディレクトリにアッ

プロードします。

②アップロード後の「MT-5.0-ja」ディレクトリの名前を「mt」に変えます。

●cgi-binディレクトリを使う場合レンタルサーバーによっては、CGIのファイルは「cgi-bin」ディレクトリにアップ

ロードしなければならないことがあります。

その場合、Movable Typeのフォルダの中にある「mt-static」フォルダは、「cgi-bin」

フォルダの外にアップロードします。そして、残りのファイル／フォルダを「cgi-bin」

ディレクトリにアップロードします。

■パーミッションの変更多くのレンタルサーバーでは、Linux等のUNIX系のシステムが使われています。その

場合、Movable TypeのCGIのパーミッションを変えて、実行可能に設定する必要があり

ます。

Movable Typeのアップロード先ディレクトリの中に、拡張子が「.cgi」のファイル

がいくつかあります（「mt.cgi」や「mt-comments.cgi」など）。これらすべてのCGIの

パーミッションを「705」や「755」等に変えます。

なお、実行可能にするためのパーミッションの設定値は、個々のレンタルサーバー


- 32 -

によって異なります。詳しくは、レンタルサーバーのヘルプ等を参照してください。

■データベースの作成 Movable Type 5では、MySQLのデータベースにデータを格納するようになっています。

あらかじめ、MySQLにデータベースを作っておくことが必要です。

レンタルサーバーによって、データベースを自分で作るかどうかが異なります。以

下のどのパターンに当てはまるかを確認してください。

●データベースがすでにある場合レンタルサーバーによっては、業者側であらかじめデータベースを作成していると

ころがあります。その場合は、作成済みのデータベースをそのまま利用します。

また、データベースを1つしか使えない業者であれば、そのデータベースを使うしか

ありません。一方、データベースを複数個使える業者なら、その中の1つを自分で選び

ます。

●データベースを作る場合一方、データベースを自分で作成しなければならない業者や、ユーザーからの申請

を受けて業者がデータベースを作成する場合もあります。このようなときは、データ

ベースを作ってから、Movable Typeのインストールに進みます。

なお、データベースの作成の手順は、レンタルサーバーによって異なります。詳し

くは、レンタルサーバーのヘルプ等を参照してください。

■動作環境のチェックインストールを行う前に、「mt-check.cgi」というスクリプトを使って、Movable Type

をインストールできるかどうかを確認しておきます。

Webブラウザを起動して、「http://Movable Typeのインストール先/mt-check.cgi」

にアクセスします。たとえば、前述の例のように、Movable Typeのアドレスが

「 http://www.sample.com/mt/ ・・・」の形になるようにした場合だと、

「http://www.sample.com/mt/mt-check.cgi」にアクセスします。

すると、Movable Typeの動作環境に関する情報が表示されます。以下の各部分をチ

ェックします。


- 33 -

●システム情報先頭の「システム情報」の部分では、Movable Typeのバージョン／サーバーの種類

／Perlのバージョンなどが表示されます。

ここでは、Perlのバージョンが「5.8.1」以上であることを確認します。Perlのバー

ジョンが5.8.1以前である場合は、動作保証がありません。

画面1.8 システム情報


- 34 -

●必須モジュール Movable Type 5の動作に必須のモジュールが、サーバーにインストールされている

かどうかを確認します（画面1.9）。Movable Type対応のレンタルサーバーであれば、

これらのモジュールはインストールされているはずです。

画面1.9 必須モジュールの情報

●データストレージモジュール次に、データストレージモジュール（Movable Type 5からデータベースにアクセス

するためのモジュール）が、サーバーにインストールされているかどうかを確認しま

す（画面1.10）。

「DBI」と「DBD::mysql」の2つのモジュールは必須です。それ以外のモジュールは、

インストールされていなくても問題ありません。


- 50 -

★ローカル環境の作成（Windows）

Windows用のローカル環境作成ソフトの中では、XAMPP for Windowsがもっとも有名

で、幅広く使われています。この節では、Windowsにローカル環境を作ることから、

Movable Type 5をインストールするまでの手順を解説します。

■XAMPP for Windowsの概要まず、XAMPP for Windowsの概要を紹介しておきます。

XAMPP for WindowsはApache Friendsが開発しているソフトで、Windows上でローカ

ルサーバーを簡単に構築することができます。WebサーバーのApacheや、PHP／MySQL、

さらにその他のサーバー関係ソフトがオールインワンにまとめられています。それで

いて、無料で利用することができ、非常に便利なソフトです。

■XAMPP for Windowsのダウンロード XAMPP for Windowsは数か月おきにバージョンアップが繰り返されていて、本書執筆

時点のバージョンは1.7.2です。この節の後半ではXAMPP上に各種のソフトをインスト

ールしますが、XAMPPのバージョンが変わると、XAMPPインストール後の手順が変わる

こともあります。そこで、本書ではバージョン1.7.2で話を進めます。

XAMPP for Windows 1.7.2は、以下のアドレスからダウンロードすることができます。

http://downloads.sourceforge.net/project/xampp/XAMPP%20Windows/1.7.2/xampp-w

in32-1.7.2.exe

■XAMPP for Windowsのインストール XAMPP for Windowsのダウンロードが終わったら、以下の手順でインストールを行い

ます。


- 51 -

●インストーラの起動まず、ダウンロードしたファイルのアイコンをダブルクリックして、インストール

プログラムを起動します。その際、「セキュリティの警告」のメッセージが表示されて

も、「実行」ボタンをクリックして、そのまま次に進みます。

最初に、解凍先を選ぶステップになります。設定を変えずに、そのまま「Install」

のボタンをクリックします（画面1.23）。

これで、XAMPPのファイルのコピーが始まります。コピーが終わるまで、しばらくの

間待ちます。

画面1.23 インストールを始める

●動作設定を行うファイルのコピーが終わると、XAMPP for Windowsの動作設定を行う状態になります。

まず、「Should I add shortcuts to the startmenu/desktop? (y/n): y」のメッセ

ージが表示されます。そのままEnterキーを押して、ショートカットアイコンをスター

トメニューとデスクトップに作ります（画面1.24）。


- 52 -

画面1.24 ショートカットアイコンをスタートメニューとデスクトップに作る

次に、「Should I locate the XAMPP paths correctly? Should I proceed? (y/x=exit

setup): y」とメッセージが表示されます。ここもそのままEnterキーを押します（画

面1.25）。

画面1.25 XAMPPのパスを正しく設定する

さらに、次のステップでは「Should I make a portable XAMPP without drive letters?」

のメッセージが表示されます。ここも、デフォルトの設定（n）のままEnterキーを押

します（画面1.26）。


- 53 -

画面1.26 XAMPPを持ち運べるようにするかどうかを設定

ここまでで設定が終わり、「XAMPP is ready to use」のメッセージが表示されます

（画面1.27）。

画面1.27 XAMPPのインストールが終わったところ


- 54 -

●タイムゾーンの設定次に、タイムゾーンの設定に関するメッセージが表示されます。「I have set the

timezone in 'php.ini' and 'my.ini' to "Asia/Tokyo".」と表示されていることを確

認して、Enterキーを押します（画面1.28）。

画面1.28 XAMPPのインストールが終わったところ

■XAMPP for Windowsのコントロールパネルを起動するインストールが終わると、画面1.29のメッセージが表示されます。ここで「1」と入

力してEnterキーを押し、XAMPP for Windowsのコントロールパネルを起動します。画

面1.30が表示されれば、正常な動作です。

なお、コントロールパネルが起動したら、コマンドプロンプトのウィンドウは閉じ

てかまいません。


- 55 -

画面1.29 XAMPPのセットアップ

画面1.30 XAMPPのコントロールパネル

第2章 Movable Type 5の基本操作

- 94 -

★管理画面の基本操作

Movable Type 5では、ウェブページの作成などの各種の操作を、管理画面上で行う

ようになっています。この節では、管理画面へのサインインや、管理画面上でのペー

ジの移動など、管理画面の基本的な使い方を解説します。

■Movable Type 5へのサインイン Movable Type 5で、ウェブページを作るなどの各種の作業を行うには、まず管理ペ

ージにサインイン（ログイン）します。

「http://インストール先ディレクトリ/mt.cgi」にアクセスすると、ログインのペ

ージが表示されます。「ユーザー名」と「パスワード」の欄に、インストール時に決め

たユーザー名／パスワードを入力し、「サインイン」のボタンをクリックします（画面

2.1）。

画面2.1 ユーザー名とパスワードを入力してサインインする

Movable Type 5にサインインすると、ユーザー毎の「ユーザーダッシュボード」と

いうページが表示されます。ダッシュボードのページには、そのユーザーが編集でき


- 95 -

るウェブサイトやブログが一覧表示されます（画面2.2）。

画面2.2 ユーザーのダッシュボード

なお、サインインのページで「ログイン情報を記憶する」のチェックをオンにして

サインインすると、ユーザー名／パスワードの情報がWebブラウザ（のCookie）に記憶

されます。次回以後は、サインインのページをスキップして、直接にダッシュボード

を開くことができるようになります。

■ウェブサイトのダッシュボードに移動するウェブサイトには、ウェブページやフォルダを作ることをはじめとして、さまざま

な機能があります。それらの機能は、ウェブサイト毎のダッシュボードから実行する

ことができます。

ユーザーのダッシュボード（画面2.2）でウェブサイト名をクリックすると、そのウ

ェブサイトのダッシュボードに移動します。また、管理画面左上のプルダウンメニュ

ーを開き、ウェブサイト一覧の部分でウェブサイト名をクリックすることでも（画面


- 96 -

2.3）、ウェブサイトのダッシュボードを開くことができます。

ウェブサイトのダッシュボードには、そのウェブサイトに含まれるブログが一覧表

示されます（画面2.4）。ただし、Movable Type 5をインストールした直後など、ウェ

ブサイトにブログを1つも作っていない時点では、「ブログが見つかりません」と表示

されます。

画面2.3 管理画面左上のプルダウンメニューからも、ウェブサイトのダッシュボードに移動できる

画面2.4 ウェブサイトのダッシュボード


- 97 -

■メニューの操作ウェブサイトのダッシュボードでは、ページの左端にメニューが表示されます。メ

ニューは二階層になっていて、親メニュー（「ブログ」「ブログ記事」「ウェブページ」

など）の右端にある「▼」のボタンをクリックすると、子メニューが開きます。そし

て、子メニューをクリックすると、個々の操作を行うページが開きます。

例えば、「ブログ」の子メニューを開き、その中の「新規」をクリックすると、ブロ

グを新規作成するページが開きます（画面2.5）。

なお、親メニューを直接にクリックすると、子メニューの先頭の項目を選んだのと

同じ動作になります。

画面2.5 子メニューを選んだ例（ブログの新規作成）


- 98 -

■ウェブサイトの再構築 Movable Type 5では、ウェブサイトやブログの個々のページを、静的なHTMLファイ

ルとして出力するのが基本的な使い方です。ウェブサイトやブログの各ページを出力

する作業のことを、「再構築」と呼びます。

ただ、Movable Type 5をインストールした直後の状態では、ウェブサイトの再構築

はまだ行われていません。そこで、一度再構築を行っておきます。

ウェブサイトのダッシュボードを開くと、画面右上の方に、「サイトを再構築」のボ

タンがあります（矢印が回っているアイコン、画面2.6）。

画面2.6 再構築のボタン

再構築のボタンをクリックすると、再構築のための別ウィンドウが開きます（画面

2.7）。「再構築」のボタンをクリックすると、ウェブサイトの各ページの再構築が行わ

れます。

画面2.7 再構築のウィンドウ


- 99 -

再構築が終わると、画面2.8のような表示になります。ここで、「サイトを見る」の

リンクをクリックすると、ウェブサイトのトップページが表示されます。なお、今の

段階では、記事等を何も入力していませんので、空のトップページが表示されます（画

面2.9）

画面2.8 再構築終了時の表示

画面2.9 ウェブサイトのトップページ（インストール直後の状態）

★ブログ記事の作成と編集

- 127 -


ブログにはブログ記事を投稿することができます。基本的な操作手順は、ウェブペ

ージを作成するときと同じです。

■ブログ記事の新規作成ブログ記事を新規作成するには、以下のいずれかの手順をとります。

①ユーザーダッシュボードのブログ一覧のタブで、記事を作成したいブログのところ

の「記事を作成」ボタンをクリックします（画面2.38）。

②個々のブログのダッシュボードに移動した後、ページ右上の「新規作成」→「ブロ

グ記事」メニューを選びます（画面2.39）。

③個々のブログのダッシュボードに移動した後、「ブログ記事」→「新規」のメニュー

を選びます（画面2.39）。


- 128 -

画面2.38 ユーザーダッシュボードからブログ記事を新規作成する方法

画面2.39 ブログのダッシュボードからブログ記事を新規作成する方法

ブログ記事を新規作成すると、ウェブページの作成のときとほぼ同じ画面が表示さ

れます（画面2.40）。ブログ記事の入力手順や、画像等を貼り付ける手順も、ウェブペ

ージの場合とほぼ同じです（100ページ参照）。


- 129 -

ただし、ウェブページはフォルダで分類するようになっていましたが、ブログ記事

は「カテゴリ」で分類する点が異なります。カテゴリの操作手順は、後の132ページで

解説します。

画面2.40 ブログ記事の作成

●ファイル名の設定通常の設定では、個々のブログ記事のアドレスは、「出力ファイル名」によって決ま

ります。また、出力ファイル名は、ブログ記事のタイトルを元に決められます。

ウェブページの場合と同様に、タイトルに日本語しか含まれていない場合、出力フ


- 130 -

ァイル名は「post_1」などの名前になります。これでは、タイトルと出力ファイル名

との関係が分かりにくいです。

そこで、出力ファイル名を手動で付けることをお勧めします。ブログ記事の作成画

面で、「公開」の部分に「出力ファイル名」の項目があり、そこの「編集」ボタンをク

リックすると（画面2.41）、出力ファイル名を書き換えることができます（画面2.42）。

画面2.41 「編集」のボタン

画面2.42 出力ファイル名を書き換える

■既存のブログ記事の編集と削除既存のブログ記事を、再度編集することもできます。

ブログのダッシュボードで、画面左端のメニューの「ブログ記事」→「一覧」メニ


- 131 -

ューを選ぶと、既存のブログ記事が一覧表示されます（画面2.43）。

ここで、編集したいブログ記事のタイトルをクリックすると、ブログ記事を新規作

成したときと同様のページに移動し、ブログ記事を編集することができる状態になり

ます。

また、既存のブログ記事を削除することもできます。ブログ記事一覧のページ（画

面2.43）で、削除したいブログ記事の左端にあるチェックをオンにした後、「削除」ボ

タンをクリックします。

画面2.43 既存のブログ記事の一覧


- 132 -

★カテゴリの利用

ブログ記事は、カテゴリで分類することができます。この節では、カテゴリの作成

／編集や、ブログ記事をカテゴリに割り当てる方法などを解説します。

■カテゴリの作成まず、カテゴリを作成することから始めます。

●トップレベルカテゴリの作成カテゴリは、フォルダと同様に、階層化して管理することができます。まず、最上

位のカテゴリ（トップレベルカテゴリ）から作ります。

カテゴリの管理を行うには、ブログのダッシュボードから、「ブログ記事」→「カテ

ゴリ」のメニューを選びます。ブログを作った直後など、カテゴリがない状態では、「カ

テゴリが見つかりませんでした」というメッセージが表示されます（画面2.44）。

画面2.44 「カテゴリが見つかりませんでした」のメッセージ

第3章ウェブサイトのテンプレートを作る

- 198 -

★テンプレートの概要

Movable Type 5のテンプレートは非常に多機能で、一度にウェブサイト全体を作る

のは大変です。そこで、段階を追って、1つひとつの部分を順に解説していくことにし

ます。まずは、テンプレートの第一歩として、テンプレートの概要を解説します。

■テンプレートとは？「テンプレート」という言葉を使ってきましたが、そもそも「テンプレート」とは

何でしょうか？まずはここから話を始めることにしましょう。

テンプレート（template）とは、もともとは「ひな形」というような意味です。Movable

Typeでのテンプレートは、ウェブサイトの各ページ（のHTML）のひな形を指します。

Movable Typeでウェブサイトやブログを作る場合、ページの左または右（あるいは

両方）にサイドバーを表示し、中央にコンテンツを表示する、という形を取ることが

多いです。こういったページの構造のひな形を決めるのが、テンプレートになります。

●マークアップの制限はほとんどない他のCMSでは、テンプレートでのマークアップの方法に制限があるものもあります

（例えば、「サイドバーは必ずul／li要素でマークアップしなければならない」など）。

一方、Movable Typeでは、テンプレートのマークアップにはほとんど制限がありま

せん（ただしコメント関連など、一部では制限もあります）。また、スタイルシートの

使い方も、ほとんど制限がありません。

例えば、既存のWebサイトのページを元にして、テンプレートを作っていくようなこ

ともできます。

■テンプレートの種類 Movable Typeのテンプレートには、いくつかの種類があります。大きく分けて、以

下のようなテンプレートがあります。


- 199 -

●インデックステンプレートインデックステンプレートは、1つのテンプレートから、1つのHTMLファイルを出力

するのに使います。インデックステンプレートは複数作ることができ、それぞれに出

力先のファイル名を指定することができます。

例えば、ウェブサイトのメインページを、「index.html」というHTMLファイルにした

いとしましょう。その場合、メインページに対応するテンプレートを作り、ウェブサ

イトの各種の情報を表示するように、テンプレートの中身を作っていきます。

また、現在のWebサイトでは、その全体の要約情報をRSSやAtomで出力することが一

般的です。こういったWebサイト全体に関するファイルも、インデックステンプレート

で出力することが一般的です。

さらに、Webサイトのデザインは、スタイルシートで決めることが一般的です。また、

jQueryなどのJavaScriptのライブラリを、個々のWebページに埋め込むことも多いです。

Movable Typeでは、スタイルシートや外部JavaScriptファイルも、インデックステン

プレートで管理することができます。

図3.1 インデックステンプレート

インデックステンプレート

「メインページ」テンプレート

「スタイルシート」テンプレート

「RSS」テンプレート

・・・

出力されるファイル

メインページのファイル(index.html)

スタイルシートのファイル

RSS のファイル

・・・

●アーカイブテンプレート「アーカイブ」（Archive）とは、ウェブページやブログ記事を分類してまとめたペ

ージのことを指します。そして、アーカイブ用のHTMLファイルを出力するテンプレー

トを、「アーカイブテンプレート」と呼びます。

ウェブサイトでは、「ウェブページ」というアーカイブテンプレートを作ることがで

きます。ウェブページテンプレートは、個々のウェブページを出力するためのテンプ

レートです。ウェブサイト内のすべてのウェブページが、ウェブページテンプレート


- 200 -

に沿って、HTMLファイルとして出力されます（図3.2）。

なお、ブログでは、「ブログ記事」「ブログ記事リスト」「ウェブページ」の3種類の

アーカイブテンプレートを作成することができます（252ページ参照）。

図3.2 アーカイブテンプレート

ウェブページテンプレート

ウェブページA のファイル

ウェブページB のファイル

・・・

ウェブページC のファイル

●テンプレートモジュールテンプレートを作っていく中で、複数のテンプレートに共通する部分が出てくるこ

とも多いです。そこで、そういった共通部分を1つの「テンプレートモジュール」にま

とめて、他のテンプレートに組み込むことができるようになっています。

例えば、各ページのヘッダー部分（<head>～</head>タグの部分）は、Webサイト内

の各ページで、ほぼ同じ内容になるでしょう。そこで、ヘッダー部分をテンプレート

モジュールとしてまとめておき、他のテンプレート（インデックステンプレートやア

ーカイブテンプレートなど）に組み込む、といった使い方が考えられます（図3.3）。

なお、紙面の都合上、テンプレートモジュールについては本書の続編で解説する予

定です。


- 201 -

図3.3 テンプレートモジュール

メインページのテンプレート

ウェブページテンプレート

「ヘッダー」テンプレートモジュール

●ウィジェット最近のWebサイトでは、サイドバーにさまざまな項目を表示することが多いです。例

えば、ブログなら、最近の記事の一覧や、カテゴリの一覧といった情報を表示します。

Movable Type 5では、これらのようなサイドバーを構成するパーツを、「ウィジェッ

ト」として管理することができます。そして、「ウィジェットマネージャー」という機

能を使って、サイドバーに表示するウィジェットを選んだり、ウィジェットの順序を

自由に入れ替えたりすることができます（画面3.1）。

ウィジェットもテンプレートの一種であり、自由に内容を編集することができます。

なお、ウィジェットについては、本書の続編で解説する予定です。


- 202 -

画面3.1 ウィジェットマネージャー

●システムテンプレート Movable Typeでは、ウェブページやブログ記事にコメントを投稿することができま

す。その際には、コメントの確認のページや、コメント送信エラーのページを表示す

ることがあり、その際にもテンプレートが使われます。

また、Movable Typeでは、ウェブページやブログ記事を検索することもできます。

検索結果を表示する際にも、テンプレートが使われます。

これらのように、特殊な用途で使われるテンプレートのことを、「システムテンプレ

ート」と呼びます。

●グローバルテンプレート Movable Type 5では、複数のウェブサイトやブログを管理することができます。そ

の場合、1つのテンプレートを複数のウェブサイト（またはブログ）で共有したい場合

も出てきます。

このようなときには、「グローバルテンプレート」というテンプレートを使うことが


- 203 -

できます。グローバルテンプレートはテンプレートモジュールの一種ですが、特定の

ウェブサイト／ブログに属するのではなく、すべてのウェブサイト／ブログで共有で

きるようになっています。

ただし、本書では紙面の都合上、グローバルテンプレートの使い方は解説しません。

本書の続編で解説する予定です。

★テンプレートにテンプレートタグを入れる

- 215 -


Movable Typeのテンプレートには、HTMLだけでなく、「テンプレートタグ」を入れて、

ウェブサイトやウェブページ等によって変化する情報を出力することもできます。

■この節で行うこと前の節で、テンプレートを少し触ってみました。その結果のページを見ると、ヘッ

ダー部分（ページの先頭）に「ウェブサイト名」と「ウェブサイトの概要」と表示さ

れています。これは、テンプレートに文字を直接に入力してあるためです。また、タ

イトルバーには「ページのタイトル」と表示されていますが、これもテンプレートに

直接に文字を入力してあるためです。

しかし、今あげた部分は、実際のウェブサイトの名前や概要に合わせて、自動的に

出力されるようにしたいところです。そこでこの節では、以下のような作業を行いま

す（画面3.10）。

①Webブラウザのタイトルバーに、ウェブサイトの名前を表示するようにします。

②ページの先頭にウェブサイトの名前と概要を自動的に表示できるようにします。

③ページ先頭のウェブサイト名をクリックすると、ウェブサイトのメインページに移

動するようにします。

画面3.10 ページの先頭にウェブサイト名と概要を表示し、タイトルバーにウェブサイトの名前を表示する


- 216 -

■テンプレートタグについてウェブサイトの名前や概要は、Movable Typeの設定によって変化します。このよう

に、状況によって変化する値をHTMLに出力するには、「テンプレートタグ」を使います。

テンプレートタグ（Template Tag）は、ウェブサイト等のデータを表すための、Movable

Type独自の記法です。実際にテンプレートタグを入力する前に、まずテンプレートタ

グの概要を解説しておきます。

●テンプレートタグの基本的な書き方 Movable Typeでは、ウェブサイトやブログなどのさまざまなデータを扱います。テ

ンプレートタグは、それらのデータをHTMLファイルに出力するために使います。

Movable Typeのテンプレートタグは、HTMLのタグと同様に、「<」と「>」でタグ名を

表します。また、テンプレートタグの名前は、すべて先頭に「MT」がつきます。

例えば、あるWebページのHTMLファイルに、以下のような形で、ウェブサイトの名前

を出力したいとします。

<h1>ウェブサイトの名前</h1>

ウェブサイトの名前は、「MTWebsiteName」というテンプレートタグで表すことがで

きます。したがって、テンプレートの中に以下のような部分を入れておくと、ページ

を再構築した時点で、「<$MTWebsiteName$>」のテンプレートタグが実際のウェブサイ

トの名前に置き換えられます（図3.6）。

<h1><$MTWebsiteName$></h1>

なお、この例では「<」の後と「>」の前に「$」を入れています。この「$」は、テ

ンプレートタグが「ファンクションタグ」という種類であることを意味します。ファ

ンクションタグ（Function Tag)は、そのテンプレートタグが、直接に何らかの値に置

き換わるタグです。

Movable Typeには、ファンクションタグの他に、「ブロックタグ」（Block Tag）とい

うテンプレートタグもあります。ブロックタグについては、後の224ページで解説しま

す。


- 217 -

図3.6 テンプレートタグが実際のデータに置き換えられる

<h1> ウェブサイトの名前 </h1>

<h1> <$MTWebsiteName$> </h1>

再構築するとテンプレートタグが実際のデータに置き換わる

●大文字／小文字の区別テンプレートタグには、大文字／小文字の区別はありません。また、先頭の「MT」

の後に「:」を入れてもかまいません。

上で取り上げたMTWebsiteNameタグだと、以下のどの書き方もできます。

・MTWEBSITENAME

・MTWebsiteName

・mtwebsitename

・MT:WebsiteName

・mt:WebsiteName

Movable Typeの標準のテンプレートでは、「mt:WebsiteName」のように、先頭の「mt」

を小文字で書き、その後に「:」を入れる書き方を使っています。

本書のこれ以降では、個別のタグの解説の中では、「MTWebsiteName」のように、先

頭の「MT」を大文字にし、「:」を入れない書き方を使うことにします。一方、テンプ

レート内では、Movable Typeの標準の書き方に従うことにします。

■ウェブサイトの情報を出力するテンプレートタグここまでで述べたように、Movable Typeでは、さまざまな情報をテンプレートタグ

を使って出力していきます。

ウェブサイトに関する情報を出力するには、表3.1のようなテンプレートタグを使い

ます。また、表3.1のそれぞれのテンプレートタグは、ウェブサイトの設定のページ（「設

定」→「全般」メニュー）で、画面3.11の各項目に対応しています。


- 218 -

ウェブサイトのID（MTWebsiteIDタグ）は、1番から順番に連番で付けられます(※)。

ウェブサイトのIDは、ウェブサイトの管理画面のアドレスに含まれる「・・・

&blog_id=1」の部分で分かります。

表3.1 ウェブサイトの情報を出力するテンプレートタグ

テンプレートタグ内容 MTWebsiteID ウェブサイトのID MTWebsiteName ウェブサイトの名前 MTWebsiteDescription ウェブサイトの概要 MTWebsiteURL ウェブサイトのアドレス MTWebsitePath ウェブサイトのサイトパス MTWebsiteRelativeURL ウェブサイトのアドレスから、「http://ドメイン名」を

除いた値

(※) ブログのIDも連番に含まれる

Movable Type 5のウェブサイトの機能は、内部的には旧来のブログの機能を拡張して作られています。そ

のため、ウェブサイトとブログとで、連番を共用するようになっています。

例えば、以下の順で作業を行ったとします。

①Movable Typeのインストール時にウェブサイトを作ります。

②その後にブログを2つ作ります。

③②の後にウェブサイトをもう1つ作ります。

すると、①のウェブサイトのIDは1番になり、②のブログのIDは2番と3番になります。そして、③のウェ

ブサイトのIDは4番になります。


- 219 -

画面3.11 表3.1のテンプレートタグに対応するウェブサイトの設定

例えば、テンプレートの中に、以下のような部分を入れたとします。

<a href="<$mt:WebsiteURL$>">メインページに戻る</a>

「<$mt:WebsiteURL$>」は、ウェブサイトのアドレスを表すテンプレートタグです（表

3.1）。そのため、テンプレートを再構築すると、この部分がウェブサイトの実際のア

ドレスに置き換えられ、リンクとして正しく動作するようになります。

■メインページのインデックステンプレートを書き換えるここまでの話を元に、215ページの画面3.10のようになるように、メインページのイ

ンデックステンプレートを書き換えて、以下のことを行えるようにします。

①Webブラウザのタイトルバーに、ウェブサイトの名前を表示するようにします。

②ページの先頭にウェブサイトの名前と概要を自動的に表示できるようにします。

③ページ先頭のウェブサイト名をクリックすると、ウェブサイトのメインページに移

動するようにします。


- 220 -

●title要素の書き換えまず、「①Webブラウザのタイトルバーに、ウェブサイトの名前を表示する」から考

えてみましょう。

タイトルバーに表示される内容は、HTMLのtitle要素（<title>～</title>）で決ま

ります。この部分を書き換えれば、タイトルバーにウェブサイトの名前を表示するこ


208ページでベースのテーマをインストールしました。このテーマのメインページの

テンプレートでは、title要素を以下のように書いていました。そのため、タイトルバ

ーには「ページのタイトル」と出力されました。

<title>ページのタイトル</title>

この文字列を、以下のようにMTWebsiteNameタグに置き換えます。これで、ウェブサ

イトの名前の設定に応じて、title要素を出力することができます。

<title><$mt:WebsiteName$></title>

●ウェブサイトの名前と概要の表示次に、ページの先頭の部分を書き換えて、前述の②のように表示するようにします。

208ページのベースのテーマでは、メインページのページ先頭部分は、リスト3.3の

ようになっています。そのため、h1要素で「ウェブサイト名」という文字が表示され、

またh2要素で「ウェブサイトの概要」の文字が表示されます。

リスト3.3 ベースのテーマでのページ先頭部分

01 <h1 id="header-name">ウェブサイト名</h1> 02 <h2 id="header-description">ウェブサイトの概要</h2>

この「ウェブサイト名」と「ウェブサイトの概要」を、それぞれMTWebsiteName／

MTWebsiteDescriptionタグに置き換えることで、ページの先頭にウェブサイトの名前

と概要を表示することができます。

リスト3.4 ウェブサイト名と概要をMTWebsiteName／MTWebsiteDescriptionタグに置き換える

01 <h1 id="header-name"><$mt:WebsiteName$></h1> 02 <h2 id="header-description"><$mt:WebsiteDescription$></h2>

第4章ブログのテンプレートを作る

- 252 -

★ブログのテンプレート作りの第一歩

ブログの出力方法も、ウェブサイトと同様にテンプレートで決めるようになってい

ます。この節では、ブログのテンプレート作りの第一歩から解説します。

■ウェブサイトのテンプレートとよく似た構造第3章で、ウェブサイトのテンプレート作りを解説しました。ウェブサイトでは、サ

イト全体のトップページ（メインページ）はインデックステンプレートで出力し、個々

のウェブページはウェブページのアーカイブテンプレートで出力する、という仕組み

でした。

ブログのテンプレートの構造も、ウェブサイトと似た構造になっています。ブログ

のトップページは、「メインページ」のインデックステンプレートで出力します。また、

個々のブログ記事のページは、「ブログ記事」のアーカイブテンプレートで出力します。

さらに、ブログではカテゴリ毎のアーカイブページや、月毎のアーカイブページも

出力することができます。これらはそれぞれ、「カテゴリ別ブログ記事リスト」「月別

ブログ記事リスト」のアーカイブテンプレートで出力します（図4.1）。

図4.1 ウェブサイト／ブログのテンプレートの比較


メインページ

その他（スタイルシート等）

アーカイブテンプレート

ウェブページ

ウェブサイトのテンプレート


メインページ

その他（スタイルシート等）

アーカイブテンプレート

ウェブページ

ブログのテンプレート

カテゴリ別ブログ記事リスト

月別ブログ記事リスト


- 253 -

■ベースブログテーマのインストール第3章でウェブページのテンプレートを作る際には、その元となる「ベースウェブサ

イト」のテーマをインストールして、そのテンプレートをカスタマイズしていきまし

た。

それと同様に、ブログのテンプレートも、元となる「ベースブログ」のテーマを用

意しました。このテーマのテンプレートをカスタマイズして、ブログのテンプレート

を作ることにします。

なお、ベースブログのHTMLおよびCSSの構造は、ベースウェブサイトと同じになって

います。HTML／CSS構造の解説は204ページを参照してください。

●ベースブログテーマのファイルのアップロードまず、ベースブログテーマのファイルを、Movable Type 5にアップロードします。

サンプルファイルの「part04」フォルダに、「base_blog」というフォルダがありま

す。このフォルダを、Movable Typeのインストール先にある「themes」ディレクトリ

の中にアップロードします。

●ベースブログテーマの適用次に、Movable Typeにログインして、ユーザーダッシュボードから、テーマを適用

したいブログに移動します。

そして、「デザイン」→「テーマ」メニューを選び、テーマを選ぶページを開きます。

すると、「ベースブログ1.0」というテーマが表示されますので、そのテーマの右上端

にある「適用」ボタンをクリックします（画面4.1）。


- 254 -

画面4.1 ベースブログテーマを適用する

■ブログのテンプレートの編集ブログのテンプレートを編集する手順は、ウェブサイトの場合と同じです。

まず、ブログの管理画面で「デザイン」→「テンプレート」メニューを選び、テン

プレートの一覧のページを開きます（画面4.2）。ここで、編集したいテンプレートの

名前をクリックすると、そのテンプレートを編集する状態になります。


- 255 -

画面4.2 ブログのテンプレートの一覧


- 256 -

★メインページの骨組みを作る

ブログのテンプレート作りの第一歩として、メインページの骨組みを作り、ブログ

のタイトルを表示できるようにするところから始めます。

■ウェブサイトのメインページのテーマをコピーするベースブログでは、ベースウェブサイトの各ページと同じ構造のHTML／CSSを使いま

す。したがって、ベースウェブサイトで作ったテンプレートを元に、ブログ用のテン

プレートを作っていくことができます。

ここでは、ウェブサイトのメインページのテンプレートを元に、ブログのメインペ

ージのテンプレートを作ります。

●テンプレートの編集を始めるまず、メインページのテンプレートを編集する状態にします。

ブログの管理画面で「デザイン」→「テンプレート」を選び、テンプレートの一覧

のページを開きます。そして、インデックステンプレートの一覧の中で、「メインペー

ジ」のテンプレートをクリックして、テンプレートを編集できるようにします。

なお、今の段階では、メインページのテンプレートは中身が空になっています。

●ウェブサイトのメインページのテンプレートを貼り付ける次に、ウェブサイトのメインページのテンプレートを貼り付けます。第3章の210ペ

ージで、骨組みだけのテンプレートを作りました。そのテンプレートを基に、ブログ

のメインページのテンプレートを作ります。

サンプルファイルの「part03」→「website」フォルダに、メインページの骨組みだ

けのテンプレートのサンプルファイルがあります（index.htmlファイル）。このファイ

ルの内容をコピーして、ブログのメインページのテンプレートを編集するページに貼

り付けます（画面4.3）。

★メインページの骨組みを作る

- 257 -

画面4.3 メインページのテンプレートを貼り付けたところ

■テンプレートタグを置き換えるウェブサイトのテンプレートでは、ウェブサイト自体の情報を扱うために、

「MTWebsiteName」等のテンプレートタグを使いました。一方、ブログのテンプレート

の中では、ウェブサイトの情報の代わりに、ブログの情報を出力する方が良いでしょ

う。

そこで、MTWebsite系のテンプレートタグを、ブログの情報を出力するテンプレート

タグに置き換えます。

●ブログの情報を出力するテンプレートタグブログの情報は、「MTBlogName」など、「MTBlog」から始まる名前のテンプレートタ

グで出力することができます。

主なテンプレートタグとして、表4.1のようなものがあります。また、ブログの設定


- 270 -

★ブログ記事毎にカテゴリの情報を表示する

ブログ記事は、カテゴリに分けて分類することができます。そこで、個々のブログ

記事を表示する際に、そのカテゴリを表示することもよくあります。この節では、ブ

ログ記事のカテゴリ名や、カテゴリアーカイブページへのリンクを表示する手順を解

説します。

■ブログ記事の主カテゴリを表示する－－－MTEntryCategoryタグブログ記事にカテゴリの情報を表示する場合、もっとも簡単な方法は、「主カテゴリ」

の情報だけを表示することです。まず、その方法から解説します。

●主カテゴリと副カテゴリ Movable Typeでは、1つのブログ記事を複数のカテゴリに結び付けることができます。

そのうち、最初に結び付けたカテゴリが「主カテゴリ」になり、それ以外のカテゴリ

は「副カテゴリ」になります。

ブログ記事の編集画面でブログ記事をカテゴリに結び付けると、最初のカテゴリが

太字で表示され、主カテゴリであることが示されます。また、それ以外のカテゴリは

通常の文字で表示され、副カテゴリであることが示されます（画面4.8）。


- 271 -

画面4.8 太字が主カテゴリで、それ以外が副カテゴリ

●主カテゴリの名前を出力する主カテゴリの名前を出力するには、「MTEntryCategory」というテンプレートタグを

使います。このテンプレートタグは、MTEntriesタグのブロックの中で使うことができ

ます。

●カテゴリアーカイブページへのリンクを設定する Movable Typeでは、ブログ記事をカテゴリごとにまとめて、カテゴリアーカイブペ

ージとして表示することができます（302ページ参照）。個々のブログ記事にカテゴリ

名を表示するなら、その部分をリンクに設定して、そこがクリックされたときには、

カテゴリアーカイブページを表示するようにしておくと良いでしょう。

主カテゴリのカテゴリアーカイブページへのリンクは、MTEntryPermalinkタグを使

って出力することができます。この場合は、「archive_type="Category"」というモデ


- 272 -

ィファイアを指定します。

●カテゴリ名を表示するサンプル前の節までで作ったメインページのテンプレートをベースに、MTEntryCategoryタグ

とMTEntryPermalinkタグを使って、カテゴリ名を表示し、かつその部分をカテゴリア

ーカイブページへのリンクにする例を考えてみます（画面4.9）。

画面4.9 カテゴリ名を表示する

実際にメインページのテンプレートを書き換えると、リスト4.4のようになります。

濃い網掛けの部分を追加しています。また、黒い網掛けは、テンプレートタグを表し

ます。

リスト4.4 ブログ記事毎にカテゴリを表示する

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 03 <html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"> 04 ・ 05 ・（途中略） 06 ・


- 273 -

07 <div class="asset-body"> 08 <$mt:EntryBody$> 09 </div> 10 <mt:If tag="EntryCategory"> 11 <div class="entry-categories"> 12 <h4>カテゴリ<span class="delimiter">:</span></h4> 13 <ul> 14 <li><a href="<$mt:EntryPermalink archive_type="Category"$>"><$mt:EntryCategory$></a></li>

15 </ul> 16 </div> 17 </mt:If> 18 <mt:If tag="EntryMore" convert_breaks="0"> 19 <div class="asset-more-link"> 20 ・ 21 ・（以後略） 22 ・

14行目で、MTEntryCategoryタグを使って、ブログ記事が属するカテゴリの名前を出

力しています。

また、MTEntryCategoryタグをHTMLのa要素に入れて、リンク先のアドレスを

「<$mt:EntryPermalink archive_type="Category"$>」のタグで出力しています。これ

によって、カテゴリ名をクリックすると、そのカテゴリのアーカイブページに移動す

るようになります。

なお、網掛けした部分では「entry-categories」等のクラスが使われています。こ

れらのクラスは、ベースブログのスタイルシートであらかじめ定義してあります。

また、10行目にMTIfタグがあります。このMTIfタグは、「主カテゴリの名前がある（＝

カテゴリに属している）」かどうかを条件判断して、名前がある時だけ、MTIfタグのブ

ロック内（11～16行目）を出力する処理を行っています。

このようにすることで、カテゴリに属していないブログ記事では、カテゴリの情報

を出力しないようにしています。

●サンプルファイルリスト4.4のサンプルファイルは、「part04」→「entry_categories」フォルダの

「index1.tmpl」ファイルです。


- 274 -

■ブログ記事が属するカテゴリをすべて出力する－－－MTEntryCategoriesタグ MTEntryCategoryタグでは、ブログ記事が複数のカテゴリに属していても、主カテゴ

リの情報しか出力することができません。副カテゴリも含めて情報を出力するには、

「MTEntryCategories」というタグを使います。

●MTEntryCategoriesタグの書き方 MTEntryCategoriesタグは、ブログ記事が属するカテゴリを順に出力するテンプレー

トタグです。複数のカテゴリを順に出力するので、ブロックタグになっています。ブ

ロックの内部に、カテゴリの情報を出力するためのHTMLやテンプレートタグを入れま

す（リスト4.5）。

リスト4.5 MTEntryCategoriesタグの書き方

01 <mt:EntryCategories> 02 各カテゴリの情報を出力するHTMLやテンプレートタグ 03 </mt:EntryCategories>

MTEntryCategoriesタグでは、「glue」というモディファイアを指定することができ

ます。このモディファイアは、各カテゴリの情報の間を文字で区切る際に使います。

例えば、「<mt:EntryCategories glue=", ">」とすると、各カテゴリの情報の間を「, 」

で区切って出力することができます。

●カテゴリの情報を出力するテンプレートタグ MTEntryCategoriesタグのブロックの中では、表4.6のテンプレートタグで、カテゴ

リの情報を出力することができます。

表4.6 カテゴリの情報を出力するテンプレートタグ

テンプレートタグ内容 MTCategoryID カテゴリのID MTCategoryLabel カテゴリの名前 MTCategoryArchiveLink カテゴリアーカイブページのURL MTCategoryCount カテゴリに属するエントリーの数 MTCategoryDescription カテゴリの説明


- 275 -

●ブログ記事が属するカテゴリをすべて出力する例 MTEntryCategoryタグを使った例（270ページのリスト）を、MTEntryCategoriesタグ

に変えて、ブログ記事が属するカテゴリをすべて出力するようにしてみます。

各カテゴリの名前はaタグで囲んでリンクにし、またカテゴリの間をカンマで区切る

ようにします（画面4.10）。また、各カテゴリはul／li要素のリストで出力するように

します。

画面4.10 ブログ記事が属するカテゴリをすべて出力する

実際にメインページのテンプレートを書き換えると、リスト4.6のようになります。

274ページのリスト4.5と異なるのは、網掛けをした行（14行目）です。また、黒い網

掛けは、テンプレートタグを表します。

リスト4.6 ブログ記事が属するカテゴリをすべて出力する

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 03 <html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"> 04 ・ 05 ・（途中略） 06 ・ 07 <div class="asset-body"> 08 <$mt:EntryBody$> 09 </div> 10 <mt:If tag="EntryCategory">

★カレンダーを表示する

- 295 -


毎日更新するブログでは、サイドバー等にカレンダーを表示して、更新した日が分

かるようにすることもあります。この節では、テンプレートタグを組み合わせてカレ

ンダーを作る方法を解説します。

■この節で取り上げる例この節では、メインページのサイドバーに、カレンダーを表組み（table要素）で表

示するようにします（画面4.14）。

カレンダーには、最後に再構築した月の情報を表示します。また、記事がある日は

リンクに設定し、その日の中でもっとも新しい記事のページに移動できるようにしま

す。

画面4.14 カレンダーの表示例


- 296 -

■カレンダーを出力するテンプレートタグカレンダーを出力するには、カレンダー関連のテンプレートタグを組み合わせて使

います。

●カレンダー全体を出力する－－－MTCalendarタグ 1ヶ月間のカレンダーは、「MTCalendar」というテンプレートタグで出力します。カ

レンダーには複数の日を出力しますので、MTCalendarタグはブロックタグです。

MTCalendarタグは、カレンダーを表組み（table要素）で出力しやすくすることを考

慮した仕様になっています。MTCalendarタグのブロックは、必ず日曜日の出力から始

まり、土曜日の出力で終わるようになっています。

月によっては、1日が日曜日でない月や、最後の日が土曜日でない月もあります。こ

のような場合、MTCalendarタグのブロックで、以下の順でセル（td要素）を出力しま

す。

①日曜日の列から1日の前の列までの、日付を出力しない空のセル

②1日の列から、月の最後の日の列までの、日付を出力するセル

③月の最後の日の次の日の列から、土曜日までの、日付を出力しない空のセル

例えば、2010年1月だと、1日は金曜日で、31日は日曜日です（表4.10）。この場合、

MTCalendarタグのブロックでは、以下の順にセルを出力します。空のセルも含めて、

ブロックの内部を42回（＝日～土曜日の7日間×6週間）繰り返すことになります。

①日曜日から木曜日までの空のセル

②1日から31日までのセル

③月曜日から土曜日までの空のセル

表4.10 2010年1月のカレンダー

日月火水木金土 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31


- 297 -

●行の最初／最後の判断－－－MTCalendarWeekHeader／MTCalendarWeekFooterタグカレンダーを表組みにして出力するには、各行の最初に<tr>タグを出力し、最後に

</tr>タグを出力する必要があります。そこで、行の最初／最後を判断するテンプレー

トタグとして、「MTCalendarWeekHeader」と「MTCalendarWeekFooter」が用意されてい

ます。

MTCalendarWeekHeader／MTCalendarWeekFooterタグは、どちらもブロックタグです。

行の最初／最後の時だけ、ブロック内の内容を出力します。

一般には、リスト4.17のような形でテンプレートタグを組んで、表の各行の先頭と

最後に、それぞれ<tr>／</tr>のタグを出力するようにします。3～5行目で、行の先頭

の時だけ（MTCalendarWeekHeaderタグ）、<tr>タグを出力します。また、7～9行目で、

行の最後の時だけ（MTCalendarWeekFooterタグ）、</tr>タグを出力します。

リスト4.17 カレンダーの各行の先頭と最後に<tr>／</tr>タグを出力する

01 <table> 02 <mt:Calendar> 03 <mt:CalendarWeekHeader> 04 <tr> 05 </mt:CalendarWeekHeader> 06 個々のセルを出力する部分 07 <mt:CalendarWeekFooter> 08 </tr> 09 </mt:CalendarWeekFooter> 10 </mt:Calendar> 11 </table>

●セルの種類の判断－－－MTCalendarIfBlank／MTCalendarIfNoEntries／MTCalendarIfEntriesタグここまででお話ししたように、MTCalendarタグでは、繰り返し1回毎にセルを1つ出

力します。個々のセルは、以下の3種類のどれかになります。

①空のセル（1日より前のセルと、月の最後の日から後のセル）

②ブログ記事を書いた日のセル

②ブログ記事を書いていない日のセル


- 298 -

これらを判断するテンプレートタグとして、表4.11のテンプレートタグがあります。

いずれもブロックタグで、セルの種類が条件に合う時だけ、ブロックの内部を出力す

ることができます。

表4.11 セルの種類を判断するテンプレートタグ

セルの種類テンプレートタグ空のセル MTCalendarIfBlank ブログ記事を書いた日のセル MTCalendarIfEntries ブログ記事を書いていない日のセル MTCalendarIfNoEntries

●日付の出力－－－MTCalendarDay／MTCalendarDateタグカレンダーのセルのうち、1日から月の最後の日までのセルには、個々の日の日付を

表示することが一般的です。この日付は、「MTCalendarDay」というテンプレートタグ

で出力することができます。

なお、MTCalendarDayタグは日付のみ（1～31）を出力します。通常のカレンダーで

はこれで問題ありませんが、場合によっては年／月／日が必要になることもあります。

その場合は、「MTCalendarDate」というテンプレートタグを使います。MTCalendarDate

タグは、format／format_nameモディファイア（265ページ参照）で出力方法をカスタ

マイズすることができます。

●個々の日に書いたブログ記事にリンクするブログ記事を書いた日のセルを出力する際には、MTEntriesタグのブロックを使って、

その日に書いたブログ記事の情報を出力することができます。また、MTEntriesタグに

「lastn="1"」のモディファイアを付けることで、その日の最新の記事1件だけを取り

出して、その記事の情報を出力することができます。

ここまでの話を元に、セルの種類の判断／日付の出力と合わせて、カレンダーの個々

のセルを出力するには、リスト4.18のようにテンプレートタグを組みます。

リスト4.18 カレンダーの個々のセルを出力する

01 <mt:CalendarIfEntries> 02 <mt:Entries lastn="1"> 03 <a href="<$mt:EntryPermalink$>"><$mt:CalendarDay$></a> 04 </mt:Entries> 05 </mt:CalendarIfEntries>


- 299 -

06 <mt:CalendarIfNoEntries> 07 <$mt:CalendarDay$> 08 </mt:CalendarIfNoEntries> 09 <mt:CalendarIfBlank> 10 11 </mt:CalendarIfBlank>

リストの内容は以下の通りです。

①1～5行目

ブログ記事がある日（MTCalendarIfEntriesタグ）に、その日付を出力する部分です。

3行目のMTCalendarDayタグで日付を出力し、それをaタグで囲んで、その日のブログ記

事にリンクします（MTEntryPermalinkタグ）。

また、その日の最新記事の情報を得るために、3行目をMTEntriesタグのブロックで

囲み（2／4行目）、「lastn="1"」のモディファイアを指定します。

②6～8行目

ブログ記事がない日（MTCalendarIfNoEntriesタグ）に、その日付だけを出力する部

分です（7行目のMTCalendarDayタグ）。

③9～11行目

空のセル（MTCalendarIfBlankタグ）に、スペース（）を出力する部分です。

■メインページのテンプレートにカレンダーを追加するここまでの話に基づいて、メインページのテンプレートにカレンダーを出力する部

分を追加すると、リスト4.19のようになります。濃い網掛けの部分が、追加した内容

です。また、黒い網掛けは、テンプレートタグを表します。

リスト4.19 カレンダーを出力する

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 03 <html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"> 04 ・ 05 ・（途中略） 06 ・ 07 </div> 08 </div> 09


- 300 -

10 <div id="beta"> 11 <div id="beta-inner"> 12 13 <div class="widget-archive widget-archive-category widget"> 14 ・ 15 ・（途中略） 16 ・ 17 </div> 18 19 <div class="widget-calendar widget"> 20 <h3 class="widget-header"><$mt:Date format="%B %Y"$></h3> 21 <div class="widget-content"> 22 <table> 23 <tr> 24 <th abbr="日曜日">日</th> 25 <th abbr="月曜日">月</th> 26 <th abbr="火曜日">火</th> 27 <th abbr="水曜日">水</th> 28 <th abbr="木曜日">木</th> 29 <th abbr="金曜日">金</th> 30 <th abbr="土曜日">土</th> 31 </tr> 32 <mt:Calendar> 33 <mt:CalendarWeekHeader> 34 <tr> 35 </mt:CalendarWeekHeader> 36 <td> 37 <mt:CalendarIfEntries> 38 <mt:Entries lastn="1"> 39 <a href="<$mt:EntryPermalink$>"><$mt:CalendarDay$></a> 40 </mt:Entries> 41 </mt:CalendarIfEntries> 42 <mt:CalendarIfNoEntries> 43 <$mt:CalendarDay$> 44 </mt:CalendarIfNoEntries> 45 <mt:CalendarIfBlank> </mt:CalendarIfBlank> 46 </td> 47 <mt:CalendarWeekFooter> 48 </tr> 49 </mt:CalendarWeekFooter> 50 </mt:Calendar> 51 </table> 52 </div> 53 </div> 54 55 </div>

★トラックバックの受信と表示

- 329 -


ウェブページやブログ記事は、トラックバックを受け付けるようにすることができ

ます。また、受信したトラックバックを一覧表示することもできます。この節ではそ

の方法を解説します。

■この節で行うことこの節では、以下のことを行います。

①トラックバックURLの表示

ブログ記事やウェブページでトラックバックを受け付ける場合、そのブログ記事／

ウェブページにトラックバックURLを表示することが必要です（画面5.2）。

②ブログ記事／ウェブページごとのトラックバック一覧の表示

トラックバックを受け付けているブログ記事／ウェブページでは、受信したトラッ

クバックの一覧も表示することが一般的です（画面5.2）。

③ブログ記事／ウェブページごとのトラックバック数の表示

メインページ等にブログ記事やウェブページの一覧を出力する場合、ブログ記事／

ウェブページごとのトラックバック数を表示することも一般的です（画面5.3）。

第5章各種機能の追加

- 330 -

画面5.2 トラックバックURL等の表示

画面5.3 ブログ記事ごとのトラックバック数の表示


- 331 -

④最近のトラックバックの一覧表示

サイドバー等に、ブログ／ウェブサイト全体での最近のトラックバック一覧を出力

することもあります（画面5.4）。その方法も紹介します。

画面5.4 最近のトラックバックの一覧

■トラックバックURLの表示まず、個々のウェブページやブログ記事のページに、トラックバックURLを表示する

ことから始めます。

●トラックバックURL－－－MTEntryTrackbackLinkタグトラックバックURLは、「MTEntryTrackbackLink」というテンプレートタグで出力す

ることができます。「MTEntry」とありますが、ウェブページのテンプレートでも、こ

のテンプレートタグを使います。

MTEntryTrackbackLinkタグは、MTEntry／MTPage系のテンプレートタグを使えるとこ

ろであれば、どこにでも書くことができます。

通常は、ブログ記事アーカイブテンプレートや、ウェブページアーカイブテンプレ

ートの中にMTEntryTrackbackLinkタグを入れて、ブログ記事／ウェブページごとのト


- 332 -

ラックバックURLを出力するのに使います。

●トラックバックを受け付けているかどうかを判断する－－－MTIfPingsAcceptedタグ Movable Typeでは、ブログ記事／ウェブページごとに、トラックバックを受け付け

るかどうかを設定することができます。そこで、トラックバックを受け付ける設定に

なっているときだけ、トラックバックURLを出力するようにすることが必要です。

トラックバックを受け付けるかどうかは、「MTIfPingsAccepted」というテンプレー

トタグ（ブロックタグ）で判断することができます。トラックバックを受け付けると

きだけ、MTIfPingsAcceptedタグのブロック内が出力されます。

●テンプレートに追加する部分ここまでの話に基づいて、トラックバックURLを出力する部分を作ると、リスト5.3

のようになります。

1行目のMTIfPingsAcceptedタグで、トラックバックを受け付けているかどうかを判

断します。これによって、トラックバックを受け付けているときだけ、

MTIfPingsAcceptedタグのブロック（2～4行目）が出力されます。

また、3行目にMTEntryTrackbackLinkタグがあり、これによってトラックバックURL

が出力されます。

なお、具体的にリスト5.3をテンプレートに組み込む方法は、この後の「ウェブペー

ジ／ブログ記事ごとのトラックバック一覧の表示」のところで解説します。

リスト5.3 トラックバックURLの出力

01 <mt:IfPingsAccepted> 02 <div class="trackbacks-info"> 03 <p>トラックバックURL: <$mt:EntryTrackbackLink$></p> 04 </div> 05 </mt:IfPingsAccepted>

■ウェブページ／ブログ記事ごとのトラックバック一覧の表示次に、個々のウェブページ／ブログ記事に、過去に受信したトラックバックを一覧

表示できるようにします。


- 333 -

●トラックバックの一覧を出力－－－MTPingsタグ／MTPing系タグトラックバックの一覧を出力するには、MTPingsというテンプレートタグ（ブロック

タグ）を使います。ウェブページアーカイブテンプレートや、ブログ記事アーカイブ

テンプレートの中では、MTPingsタグは個々のウェブページ／ブログ記事についたトラ

ックバックを出力します。

MTPingsタグのブロックの中では、表5.2のテンプレートタグを使って、個々のトラ

ックバックの情報を出力します。

MTPingDateタグは、format／format_nameモディファイアで書式を指定することがで

きます。また、MTPingsHeader／MTPingsFooterタグはブロックタグで、MTPingsタグの

繰り返しの中で、最初／最後の繰り返しかどうかを判断する際に使います。

表5.2 トラックバックの情報を出力するテンプレートタグ

テンプレートタグ内容種類 MTPingTitle トラックバックのタイトル F MTPingBlogName トラックバック元Blogの名前 F MTPingDate トラックバックが送信された日時 F MTPingExcerpt トラックバックの概要 F MTPingURL トラックバック元のURL F MTPingID トラックバックのID F MTPingsHeader 最初のトラックバックかどうかを判断する B MTPingsFooter 最後のトラックバックかどうかを判断する B ※ 種類の「F」はファンクションタグ、「B」はブロックタグを表します。

●トラックバックの件数の出力－－－MTEntryTrackbackCountタグ MTEntry系／MTPage系のテンプレートが使える箇所では、「MTEntryTrackbackCount」

というテンプレートタグで、個々のブログ記事／ウェブページに受信したトラックバ

ックの件数を出力することもできます。

●トラックバック一覧を出力するかどうかを判断するトラックバックの一覧は、以下のどちらかの場合にのみ出力するようにします。

①トラックバックを受け付けている場合

②今はトラックバックを受け付けていないが、過去に受け付けていて、受信済みのト

ラックバックがある場合


- 334 -

上記のどちらかの状況になっているかどうかは、「MTIfPingsActive」というテンプ

レートタグで判断することができます。どちらかの条件が成立しているときだけ、

MTIfPingsActiveタグのブロック内が実行されます。

●トラックバック一覧を出力する部分を追加するここまでの話に沿って、ウェブページおよびブログ記事のアーカイブテンプレート

に、トラックバックの一覧を出力する部分（およびトラックバックURLを出力する部分）

を追加します。

たとえば、ブログ記事アーカイブテンプレートで、ブログ記事本体の直後にトラッ

クバックの情報を出力する場合だと、テンプレートをリスト5.4のように書き換えます。

濃い網掛けが、新たに追加した部分です。また、黒い網掛けは、追加した部分の中で、

テンプレートタグを使っている箇所です。

リスト5.4 トラックバック一覧（およびトラックバックURL）を出力する

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 03 <html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"> 04 ・ 05 ・（途中略） 06 ・ 07 </div> 08 09 <div id="content"> 10 <div id="content-inner"> 11 12 <div id="alpha"> 13 <div id="alpha-inner"> 14 15 <div id="entry-<$mt:EntryID$>" class="entry-asset asset hentry"> 16 ・ 17 ・（途中略） 18 ・ 19 </div> 20 21 <mt:IfPingsActive> 22 <div id="trackbacks" class="trackbacks"> 23 <h2 class="trackbacks-header">トラックバック(<$mt:EntryTrackbackCount$>)</h2>

24 25 <mt:IfPingsAccepted>


- 346 -

★コメントの受信と表示－－－その①・コメント一覧とコメント投稿フォームの出力

ブログ記事やウェブページでは、コメントを受信することもできます。コメント機

能を付けるのは比較的複雑なので、節を分けて順に解説します。この節では、ブログ

記事／ウェブページアーカイブテンプレートを書き換えて、コメント一覧とコメント

投稿フォームを出力する方法から解説します。

■この節で行うことこの節では、ブログ記事アーカイブテンプレートやウェブページアーカイブテンプ

レートを書き換え、これまでに受信したコメントを一覧表示するようにします。また、

コメントの入力欄も表示できるようにします（画面5.6）。

画面5.6 コメントの一覧とコメント入力フォーム


- 347 -

■コメントの一覧の出力まず、コメントの一覧を出力する方法から解説します。

●コメント一覧に関係するテンプレートタグブログ記事やウェブページに受信したコメントは、「MTComments」というブロックタ

グを使って出力することができます。

MTCommentsタグのブロックの中では、表5.7のテンプレートタグを使って、個々のコ

メントの情報を出力することができます。

また、ウェブページ／ブログ記事に投稿されたコメントの件数は、

「MTEntryCommentCount」というテンプレートタグで出力することができます。

表5.7 コメントの情報を表示するテンプレートタグ

テンプレートタグ内容 MTCommentID コメントのID MTCommentBody コメントの本文 MTCommentDate コメントが入力された日付 MTCommentAuthor コメントを書いた人の名前 MTCommentURL コメントを書いた人のWebサイトのURL MTCommentAuthorLink コメントを書いた人がURLを記入していれば、そのURLへ

のリンク記入していなければ、コメントを書いた人の名前

MTCommentIP コメントを書き込んだホストのIPアドレス MTCommentOrderNumber コメント一覧の中でのコメントの番号（先頭が1） MTCommentLink コメントの投稿先ブログ記事／ウェブページのアドレス MTCommentAuthorIdentify ログインしてコメントしたことを示すリンクや画像

●コメントを受け付ける／コメント投稿済みの判断 Movable Typeでは、個々のブログ記事／ウェブページで、コメントを受け付けるか

どうかを指定することができます（142ページ参照）。

コメントの一覧は、コメントを受け付けている場合か、またはすでにコメントを受

信している場合に出力するようにします。このことを判断するには、

「MTIfCommentsActive」というテンプレートタグ（ブロックタグ）を使います。

また、コメント入力フォームなど、コメントを受け付ける場合だけ、何かを表示し

たいこともあります。このことを判断するには、「MTIfCommentsAccepted」というテン


- 348 -

プレートタグ（ブロックタグ）を使います。

MTIfCommentsActive／MTIfCommentsAcceptedタグとも、条件を満たすときだけ、ブ

ロックの内部が出力されます。

●コメント／返信の判断と返信用リンクの出力 Movable Type 4以降では、コメントと、それに対する返信とを、区別して扱うこと

ができるようになりました。

あるコメントが、他のコメントの返信である（＝親になるコメントがある）かどう

かを判断するには、「MTIfCommentParent」というテンプレートタグ（ブロックタグ）

を使います。

また、コメント一覧を出力する際に、「MTCommentReplyToLink」というテンプレート

タグを使うと、返信用のリンクも出力することができます。

●自分が書いたコメントを判断する自分が書いたコメントだけ、他のコメントと別のスタイルシートを適用するなどし

て出力したいこともあります。この処理を行うには、「MTIfCommenterIsEntryAuthor」

というテンプレートタグ（ブロックタグ）を使います。

なお、「自分が書いたコメント」とは、コメント先のブログ記事を書いた人が、Movable

Typeにログインした状態で書いたコメントのことを指します。

●ブログ記事のテンプレートの書き換えここまでの話に基づいて、実際にブログ記事テンプレートを書き換えた例は、リス

ト5.9のようになります。トラックバック関係（332ページ参照）の後に、コメントの

一覧を出力する部分を追加しています。

リスト5.9 コメント一覧を出力する部分を追加

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 03 <html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"> 04 ・ 05 ・（途中略） 06 ・ 07 <div id="alpha"> 08 <div id="alpha-inner"> 09 ・ 10 ・（途中略） 11 ・ 12 </mt:IfPingsActive>


- 349 -

13 14 <mt:IfCommentsActive> 15 <div id="comments" class="comments"> 16 <h2 class="comments-header">コメント(<$mt:EntryCommentCount$>)</h2>

17 <div id="comments-content" class="comments-content" style="clear: left;">

18 <mt:Comments sort_order="ascend"> 19 20 <div id="comment-<$mt:CommentID$>" class="comment<mt:IfCommentParent> comment-reply</mt:IfCommentParent><mt:IfCommenterIsEntryAuthor> entry-author-comment</mt:IfCommenterIsEntryAuthor>">

21 <div class="inner"> 22 <div class="comment-header"> 23 <div class="asset-meta"> 24 <span class="byline"> 25 <$mt:CommentAuthorIdentity$> 26 <mt:IfCommentParent> 27 <span class="vcard author"><$mt:CommentAuthorLink$></span>から<mt:CommentParent><a href="<$mt:CommentLink$>"><$mt:CommentAuthor$></a></mt:CommentParent>への返信

28 <mt:Else> 29 <span class="vcard author"><$mt:CommentAuthorLink$></span>

30 </mt:IfCommentParent> 31 | <a href="<$mt:CommentLink$>"><abbr class="published" title="<$mt:CommentDate format_name="iso8601"$>"><$mt:CommentDate$></abbr></a>

32 <mt:IfCommentsAccepted> 33 | <$mt:CommentReplyToLink$> 34 </mt:IfCommentsAccepted> 35 </span> 36 </div> 37 </div> 38 <div class="comment-content"> 39 <$mt:CommentBody$> 40 </div> 41 </div> 42 </div> 43 </mt:Comments> 44 </div> 45 </div> 46 </mt:IfCommentsActive> 47 48 </div> 49 ・ 50 ・（以後略）


- 350 -

51 ・

リストの内容は以下の通りです。

①14／46行目

MTIfCommentsActiveタグを使って、コメントを受け付けているか、または過去にコ

メントを受信しているときだけ、ブロック内（コメントの一覧）を出力するようにし

ます。

②16行目

h2要素で、「コメント（○○)」（○○は受信したコメントの件数）と出力します。

③18／43行目

MTCommentsタグで、コメント一覧を出力します。

④20／42行目

各コメントを囲むdiv要素を出力します。

class属性の指定で、テンプレートタグを使っています。そのコメントが返信である

なら（MTifCommentParentタグ）、「 comment-reply」を出力します（「comment」の前に

半角スペースあり）。また、自分が書いたコメントであるなら

（MTIfCommenterIsEntryAuthor）、「 entry-author」を出力します（「entry」の前に半

角スペースあり）。

上記のことから、返信であるかどうか、また自分で書いたコメントであるかどうか

によって、class属性の出力は表5.8のようになります。

表5.8 class属性に出力される値

返信自分のコメント

class属性に出力される値

× × class="comment" ○ × class="comment comment-reply" × ○ class="comment entry-author-comment" ○ ○ class="comment comment-reply entry-author-comment"

⑤25行目

Movable Typeでは、各種の方法でログインしてからコメントすることができます。

ログインして投稿されたコメントでは、MTCommentAuthorIdentifyタグによって、以下

のようなHTMLを出力することができます。


- 351 -

<a class="commenter-profile" href="コメントした人のアドレス"><img alt="Author Profile Page" src="ログインの種類に応じた画像のアドレス" width="16" height="16" /></a>

⑥26～30行目

MTIfCommentParentタグとMTElseタグを使って、返信のコメントであるかどうかによ

って、出力を分けています。

返信のコメントである場合は、27行目に処理が進みます。そして、コメントした人

の名前をリンク付きで出力し（MTCommentAuthorLinkタグ）、また返信先のコメントを

書いた人の名前と、そのコメントへのリンク（MTCommentAuthor／MTCommentLinkタグ）

を出力します。

一方、返信のコメントでない場合は、MTCommentAuthorLinkタグで、コメントした人

の名前（とリンク）のみを出力します。

⑦31行目

コメントが投稿された日時（MTCommentDateタグ）と、コメントへのリンク

（MTCommentLinkタグ）を出力します。

⑧32～34行目

コメントを受け付ける状態であれば（MTIfCommentsAcceptedタグ）、コメントに返信

できるように、「返信」のリンクを出力します（MTCommentReplyToLinkタグ）。

⑨39行目

コメントの本文を出力します。

■コメント投稿フォームの出力個々のブログ記事（ウェブページ）には、コメント投稿フォームも出力するように

します。また、コメント投稿フォームでは、JavaScriptで細かな操作を行いますので、

JavaScriptも組み込みます。

●HTMLのヘッダー部分にJavaScriptを追加まず、ブログ記事（ウェブページ）アーカイブテンプレートで、HTMLヘッダー（<head>

～</head>）に、以下のscriptタグを追加します。

<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>

★検索フォームと検索結果の表示

- 373 -


Movable Typeでは、ブログ記事／ウェブページのタイトルや本文を対象にして、検

索を行うことができます。この節では、ウェブサイトやブログに検索の機能を追加す

る方法を解説します。

■この節で行うことこの節では、以下のことを行います。

●サイドバーに検索フォームを設置まず、サイドバーに検索フォームを設置します。キーワードを入力する欄と、「検索」

のボタンを入れます（画面5.12）。

画面5.12 検索フォーム


- 374 -

●検索結果の表示入力されたキーワードに応じて、その検索結果を一覧表示できるようにします（画

面5.13）。

画面5.13 検索結果

■Movable Typeの検索の仕組み Movable Typeの検索は、以下のような仕組みになっています。

●キーワードでの検索 Movable Typeでは、ブログ記事およびウェブページを対象に、以下の項目をキーワ

ードで検索することができます。

①タイトル

②本文

③続き


- 375 -

④キーワード(※)

検索のフォームは、ウェブサイト／ブログの各ページに入れることができます。フ

ォームには、テキストの入力欄と、検索を実行するためのボタンを設置します。

また、検索を行うと、mt-search.cgiというCGIによって検索が行われ、「検索結果」

というシステムテンプレートに基づいて、検索結果が出力されるようになっています。

この節の後半では、検索結果テンプレートを実際に作っていきます。

●タグでの検索ウェブページやブログ記事にはタグを付けることができ、ウェブページ／ブログ記

事ごとにその一覧を出力することもできます（278ページ参照）。

その際に、MTTagSearchLinkタグを使って、同じタグを含むウェブページ／ブログ記

事の一覧のページに、リンクするようにしました。このリンク先のページも、検索結

果のテンプレートによって出力されます。

■検索フォームの設置まず、サイドバーに検索フォームを設置します。

●検索フォームに必要な要素検索フォームには、キーワードを入力する欄と、「検索」のボタンを入れることが必

要でます。キーワードを入力する欄（input要素）では、name属性を「search」にする

必要があります。

また、隠し要素（<input type="hidden"・・・>）で、検索対象のウェブサイト（ま

たはブログ）のIDと、検索結果の1ページあたりの表示件数も指定する必要があります。

ウェブサイト（ブログ）のIDは、MTWebsiteID／MTBlogIDタグで出力することができ

ます。また、検索結果の1ページあたりの表示件数は、通常は「MTSearchMaxResults」

というテンプレートタグで出力するようにします（リスト5.18）。

(※) キーワード

ブログ記事やウェブページを編集するページで、「キーワード」の欄に入力した内容も検索対象になりま

す。


- 376 -

リスト5.18 検索フォームに必要な隠し要素

01 <input type="hidden" name="IncludeBlogs" value="ウェブサイト（ブログ）のID" /> 02 <input type="hidden" name="limit" value="<$mt:SearchMaxResults$>" />

なお、MTSearchMaxResultsタグの値は、Movable Typeの設定ファイル（mt-config.cgi）

の「SearchMaxResults」の設定値になります。デフォルト値は20です。また、

mt-config.cgiファイルに以下のように記述することで、設定を変えることができます。

SearchMaxResults 検索結果の1ページあたりの表示件数

たとえば、mt-config.cgiに以下のような行を追加すると、検索結果1ページあたり

の表示件数は10件になります。

SearchMaxResults 10

●フォームの送信先検索フォームで入力された内容は、通常は「mt-search.cgi」というCGIに送信しま

す。このCGIのアドレスは、以下のテンプレートタグで得ることができます。

<$mt:CGIPath$><$mt:SearchScript$>

また、検索フォームの内容は、GETプロトコルで送信するようにします（formタグに

「method="get"」と記述します）。

基本的には、検索フォームのformタグは、以下のように記述します。この中の

MTCGIPathタグは、Movable TypeのCGIがあるディレクトリのアドレスを表します。ま

た、MTSearchScriptタグは、検索のCGI（通常はmt-search.cgi）のファイル名を表し

ます。

<form method="get" action="<$mt:CGIPath$><$mt:SearchScript$>">

●ブログ用の検索フォームの例ここまでの話に基づいて、ブログ用の検索フォームの例を作ると、リスト5.19のよ

うになります。この部分を、ブログの各テンプレートのサイドバー部分に入れます。


- 377 -

リスト5.19 検索フォーム

01 <div class="widget-search widget"> 02 <h3 class="widget-header">検索</h3> 03 <div class="widget-content"> 04 <form method="get" action="<$mt:CGIPath$><$mt:SearchScript$>"> 05 <input type="text" id="search" class="ti" name="search" value="" /> 06 <input type="hidden" name="IncludeBlogs" value="<$mt:BlogID$>" /> 07 <input type="hidden" name="limit" value="<$mt:SearchMaxResults$>" /> 08 <input type="submit" value="検索" /> 09 </form> 10 </div> 11 </div>

各行の内容は以下の通りです。

①4行目

フォームの送信先を、Movable Typeのmt-search.cgiにします（MTCGIPathタグと

MTSearchScriptタグ）。また、フォームの送信時のプロトコルをGETにします。

②5行目

テキストの入力欄を出力します。name属性は「search」にする必要があります。

③6行目

ブログのID（MTBlogIDタグ）を、隠し要素で送信できるようにします。

④7行目

検索結果の1ページあたりの表示件数（MTSearchMaxResultsタグ）を、隠し要素で送

信できるようにします。

●ウェブサイト用の検索フォームウェブサイト用の検索フォームでは、ウェブサイトと、その配下のすべてのブログ

を、検索の対象にすることが多いです。

この場合、リスト5.19の6行目（IncludeBlogsを送信する行）を、以下のように書き

換えます。この記述は、ウェブサイトとその配下のすべてのブログのIDを、「1,2,3」

のようにコンマで区切った値を、IncludeBlogsの隠し要素の値にすることを意味しま

す。


- 378 -

<input type="hidden" name="IncludeBlogs" value="<$mt:WebsiteID$><mt:WebsiteHasBlog><mt:Blogs include_blogs="children">,<mt:BlogID></mt:Blogs></mt:WebsiteHasBlog>" />

なお、この行では「MTWebsiteHagBlog」と「MTBlogs」というテンプレートタグを使

っています。これらのテンプレートタグの意味は、本書の続編で解説します。

●サンプルファイルブログの各テンプレートに検索フォームを入れたサンプルファイルは、以下の通り

です。

①メインページ

「part05」→「search」フォルダの「index.tmpl」ファイル

②カテゴリアーカイブテンプレート

「part05」→「search」フォルダの「category_archive.tmpl」ファイル

③月別アーカイブテンプレート

「part05」→「search」フォルダの「monthly_archive.tmpl」ファイル

④ブログ記事アーカイブテンプレート

「part05」→「search」フォルダの「entry_archive.tmpl」ファイル

⑤ウェブページアーカイブテンプレート

「part05」→「search」フォルダの「blog_webpage_archive.tmpl」ファイル

また、ウェブサイト用のテンプレートに検索フォームを入れたサンプルファイルは、

以下の通りです。

①メインページ

「part05」→「search」フォルダの「website_index.tmpl」ファイル

②ウェブページアーカイブテンプレート

「part05」→「search」フォルダの「website_webpage_archive.tmpl」

■検索関連のテンプレートタグ次に、検索結果テンプレートを作って、検索結果を表示できるようにします。まず、

検索関連のテンプレートタグを解説します。

第6章テンプレート関係の各種のテクニック

- 388 -

★ブログ記事／ウェブページの著者の情報を出力する

複数のユーザーでウェブサイトを作る場合、個々のブログ記事（またはウェブペー

ジ）に、その文章を書いた人の名前等を出力したいこともあります。その方法を紹介

します。

■この節で行うことこの節では、個々のブログ記事のタイトルの後に、その記事を書いた人の名前（ユ

ーザー名）と、各ユーザーのアイコンを出力するようにします。

複数のユーザーで1つのブログに記事を投稿していると、それぞれの記事に、異なる

ユーザー名／アイコンが表示されます（画面6.1）。

画面6.1 それぞれの記事にユーザー名／ユーザーのアイコンが表示される

★ブログ記事／ウェブページの著者の情報を出力する

- 389 -

■投稿したユーザーの情報を出力するブログ記事を投稿したユーザーの情報は、「MTEntryAuthor～」のテンプレートタグ

で出力することができます（表6.1）。また、各テンプレートタグと、ユーザー情報の

設定画面との対応は、画面6.2のようになります。

表6.1 ユーザーの情報を出力するテンプレートタグ

テンプレートタグ内容 MTEntryAuthorID ユーザーのID MTEntryAuthorDisplayName ユーザーの表示名 MTEntryAuthorEmail ユーザーのメールアドレス MTEntryAuthorURL ユーザーのウェブサイトのアドレス MTEntryAuthorUserpic ユーザーのアイコンを出力するためのimg要素 MTEntryAuthorUserpicURL ユーザーのアイコンのアドレス

画面6.2 テンプレートタグとユーザー情報の設定画面との対応

■テンプレートの書き換えの例 MTEntryAuthor系のテンプレートタグを使って、ブログのメインページで、個々のブ

ログ記事にユーザーの情報を出力するようにテンプレートを書き換えると、リスト6.1

のようになります。

15行目で、MTEntryAuthorUserPicタグとMTEntryAuthorDisplayNameタグを使って、


- 390 -

ユーザーのアイコンと表示名を出力しています。

リスト6.1 ユーザーの情報を出力する

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 03 <html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"> 04 ・ 05 ・ 06 ・ 07 <div id="alpha"> 08 <div id="alpha-inner"> 09 <mt:Entries> 10 <div id="entry-<$mt:EntryID$>" class="entry-asset asset hentry"> 11 <div class="asset-header"> 12 <h2 class="asset-name entry-title"><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></h2>

13 <div class="asset-meta"> 14 <span> 15 <$mt:EntryAuthorUserpic$> <$mt:EntryAuthorDisplayName$> | 16 </span> 17 <span class="separator">|</span> 18 <span class="byline"> 19 <abbr class="published" title="<$mt:EntryDate format_name="iso8601"$>"><$mt:EntryDate format="%x %X"$></abbr>

20 ・ 21 ・ 22 ・

●サンプルファイルリスト6.1を含むメインページのインデックステンプレートのサンプルファイルは、

「part06」→「entry_author」フォルダの「index.tmpl」ファイルです。

- 426 -

★テンプレートにコメントを入れる

テンプレートによっては、内容が複雑になって分かりにくくなることもあります。

そこで、テンプレートにコメントを入れておくこともできます。

■MTIgnoreタグテンプレートにコメントを入れるには、「MTIgnore」というタグを使います。MTIgnore

タグはブロックタグで、ブロックの内部にコメントを書くことができます。また、

MTIgnoreタグのブロックは、再構築後のファイルには出力されません。

例えば、テンプレートにリスト6.21のような部分を入れたとします。このテンプレ

ートを再構築すると、MTIgnoreタグのブロックは出力されないので、再構築結果はリ

スト6.22のようになります。

リスト6.21 MTIgnoreタグの例

01 <mt:Entries> 02 <mt:Ignore>ブログ記事のタイトル</mt:Ignore> 03 <h2><$mt:EntryTitle$></h2> 04 </mt:Entries>

リスト6.22 リスト6.21の部分の再構築結果(※)

01 <h2>1番目のブログ記事のタイトル</h2> 02 <h2>2番目のブログ記事のタイトル</h2> 03 ・ 04 ・ 05 ・ 06 <h2>最後のブログ記事のタイトル</h2>

●HTMLのコメントの違い HTMLにも、コメントを表すタグがあります（）。また、テンプレー

トにHTMLのコメントを入れることもできます。

(※) 実際には、各行の間に改行だけの行が入ります。

★テンプレートにコメントを入れる

- 427 -

ただ、MTIgnoreタグとは異なり、テンプレートにHTMLのコメントを書くと、その部

分はそのまま再構築結果のファイルに出力されます。

■テンプレートを部分的に再構築しないようにするテンプレートを作っているときに、テンプレート内のある部分を、一時的に出力し

ないようにしたいことが出る場合があります。

そのときは、テンプレートからその部分を切り取るのも、1つの方法です。しかし、

後でテンプレートを元に戻す際に、切り取った部分を間違った箇所に貼り付けてしま

ったりするなど、ミスをしてしまうことがあり得ます。

そこで、テンプレートからそのような部分を切り取るのではなく、その部分を

MTIgnoreタグのブロックで囲む、という方法があります。これだと、MTIgnoreタグを

削除すれば元通りの状態になりますので、ミスを起こしにくくなります。

■MTIgnoreタグを使ってテンプレートの不具合を探すテンプレートを作っていると、時には思っているのとは違った出力になってしまう

ことがあります。例えば、div要素等を入れ子にしたときに、開始タグと終了タグの入

れ子をミスしてしまい、ページのレイアウトが崩れる、といったことがあります。

このようなときには、以下の手法をとって、不具合の原因になっている箇所を探す

ことが考えられます。

①テンプレートの中で、怪しそうな部分をMTIgnoreタグのブロックで囲み、一時的に

再構築しないようにします。

②MTIgnoreタグで囲む範囲を、少しずつ狭くしていきます。

③MTIgnoreタグで囲む範囲を変えたときに不具合が発生した場合、その前に囲んでい

た範囲と、範囲を変えた後の部分との間に、不具合の原因があることがわかります。

★movable type 5の概要 - h.fujimoto · ★movable type...

Documents