76
第1章 Movable Type 5.1の概要とインストール - 16 - Movable Type 5.1の概要 本書では、Movable Type 5.1を使って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.1の「ウェブサイト」の機能では、「ウェブサイト」の中に「フォル ダ」と「ウェブページ」を作って、このような構造のWebサイトを管理することができ ます。 また、個々のウェブページは、ひな型(テンプレート)に沿って出力します。その ため、ウェブサイト内の各ウェブページの構造やデザインを、テンプレートで統一す ることができます。 さらに、Webサイトの中には、スタイルシートや外部JavaScriptなど、HTML以外のフ ァイルを入れることもあります。これらのファイルも、「インデックステンプレート」 というテンプレートで管理することができます。

Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 16 -

★Movable Type 5.1の概要

本書では、Movable Type 5.1を使って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.1の「ウェブサイト」の機能では、「ウェブサイト」の中に「フォル

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

ます。

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

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

ることができます。

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

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

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

Page 2: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★Movable Type 5.1の概要

- 17 -

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

トップページ

フォルダ

Webページ

フォルダ

Webページ

Webページ

フォルダ

Webページ

Webページ

Webページ

フォルダ

Webページ

フォルダ

■ウェブサイトに「ブログ」を入れることもできる

前述したように、Movable Typeは元々はブログを管理するツールでした。Movable

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

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

(例:商品カタログ)、ブログとして管理するのに適しています。

ただし、Movable Type 5.1は、Movable Type 4.xまでとは異なり、「ブログは、ウェ

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

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

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

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

す。

Page 3: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 18 -

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

ウェブサイト

「商品カタログ」ブログ

「新着情報」ブログ

「社長日記」ブログ

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

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

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

す(図1.3)。

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

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

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

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

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

です(※)。

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

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

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

しょう。

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

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

Page 4: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★Movable Type 5.1の概要

- 19 -

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

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

記事

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

記事

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

記事

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

記事

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

記事

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

記事

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

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

記事

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

記事

2009年のアーカイブページ

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

記事

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

記事

2008 年のアーカイブページ

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

記事

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

記事

元となる記事

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

■ウェブサイト/ブログ間の連携

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

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

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

面1.1)。

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

しません。本書の続編(Volume 2)で解説します。

Page 5: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 20 -

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

■強力なテンプレートタグ

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

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

とができます。

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

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

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

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

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

プレートタグもあります。そのため、テンプレートタグを駆使することで、複雑なペ

ージを出力することができます(その反面、「テンプレートタグを理解するのが難しい」

とも言えます)。

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

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

変えることができます。

Page 6: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★Movable Type 5.1の概要

- 21 -

■「テーマ」でサイトのデザインを変えられる

Movable Type 5.1では、前述したように、サイト内の個々のページはテンプレート

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

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

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

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

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

(画面1.2)。

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

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

とができます。

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

説します。詳細については、本書の続編(Volume 2)で解説します。

画面1.2 テーマの変更

Page 7: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 22 -

■カスタムフィールドでウェブページ等にさまざまなデータを追加

一般的なブログのシステムでは、個々の記事はタイトル/本文/カテゴリなどのい

くつかの情報から構成されます。ただ、ブログではない一般的なWebサイトを製作する

には、記事に入れる情報を自由に増やせることが必要になります。

例えば、マンション等の賃貸の物件を扱うサイトを作り、1件の物件を個々の記事に

対応させたいとします。その場合、間取り/家賃/敷金/ 寄駅といった情報を、個々

の記事に入れることが必要になります。

Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな

どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable Type 5

以降の新機能として、ブログ記事とウェブページでは、カテゴリ/フォルダ毎に追加

するフィールドを変えることができるようになりました。

なお、カスタムフィールドについては、紙面の都合上、本書では解説しません。本

書の続編(Volume 2)で解説します。

画面1.3 カスタムフィールドの設定

Page 8: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★Movable Type 5.1の概要

- 23 -

■リビジョン(履歴)管理機能

CMSに必須な機能の1つとして、「リビジョン(履歴)管理」を挙げることができます。

リビジョン管理機能は、記事等を編集して保存しなおしたときに、編集前の過去のリ

ビジョンも残しておいて、元に戻したりできるようにする機能です。

Movable Type 5以降では、ブログ記事/ウェブページ/テンプレートの編集履歴を

管理する機能が搭載されました(画面1.4)。

画面1.4 履歴管理機能

■商用ライセンスとオープンソース版

Movable Typeの特徴の1つとして、商用ライセンスとオープンソース版があることが

あげられます。

商用ライセンスには、基本ライセンス(1サーバー・5ユーザー用、63,000円)と、

サーバーライセンス(1サーバー・ユーザー数無制限、126,000円)があります。商用

ライセンスは、Web製作会社の方が、クライアントの依頼を受けてWebサイトを製作し、

納品するような場合に使うライセンスです。

また、「個人無償ライセンス」もあります。個人が自分のブログ等を発信することに

限定したライセンスで、無料で利用できます。機能的には商用ライセンスと同じです。

Page 9: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★ローカル環境の作成(Windows)

- 47 -

★ローカル環境の作成(Windows)

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

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

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

■XAMPP for Windowsの概要

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

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

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

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

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

■XAMPP for Windowsのダウンロード

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

時点のバージョンは1.7.4です。この節の後半ではXAMPP上にいくつかのソフトをイン

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

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

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

http://sourceforge.net/projects/xampp/files/XAMPP%20Windows/1.7.4/xampp-win3

2-1.7.4-VC6-installer.exe.md5/download

■XAMPP for Windowsのインストール

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

ます。

Page 10: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 48 -

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

プログラムを起動します。その際、「ユーザーアカウント制御」のメッセージが表示さ

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

初に、言語を選ぶステップになります。設定を変えずに、そのまま「OK」のボタ

ンをクリックします(画面1.23)。

この後、「Important MS Vista Note!」のメッセージが表示された場合は、「OK」ボ

タンをクリックして次に進みます。

画面1.23 言語を選ぶ

●インストール方法を設定する インストーラが起動したら、画面の指示に従ってインストールを進めていきます。

途中で「XAMPP Options」のステップがあります。ここでは、「Install Apache as

service」と「Install MySQL as service」のチェックをオンにします(画面1.24)

画面1.24 「Install Apache as service」と「Install MySQL as service」のチェックをオンにする

Page 11: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★ローカル環境の作成(Windows)

- 49 -

インストール方法を設定すると、ファイルのコピーが始まります。コピーが終わる

までには、しばらく時間がかかります。

コピーが終わると、「Completing the XAMPP 1.7.4 Setup Wizard」の画面が表示さ

れますので、「Finish」のボタンをクリックします。この後、ApacheとMySQLを起動す

るステップになりますので、画面の指示に従って操作します。

なお、Apache等の起動時に、「Windowsセキュリティの重要な警告」の画面が表示さ

れることがあります。この場合は、「アクセスを許可する(A)」のボタンをクリックし

ます。

■XAMPP for Windowsのコントロールパネルを起動する

インストールが終わると、「Congratulations! The installation was successfull!

Start the XAMPP Control Panel now?」のメッセージが表示されます。ここで「はい」

のボタンをクリックして、XAMPP for Windowsのコントロールパネルを起動します。画

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

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

Page 12: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 50 -

■XAMPP for Windowsの動作確認

XAMPP for Windowsのインストールが終わったら、コントロールパネルの「Apache」

の行にある「Admin」のボタンをクリックします。すると、画面1.26が表示されますの

で、「日本語」のリンクをクリックします。これで、XAMPP for Windowsのトップペー

ジが表示されます(画面1.27)。

なお、これ以後は、Webブラウザで「http://localhost」に接続すると、画面1.27が

表示されるようになります。

画面1.26 「日本語」のリンクをクリックする

Page 13: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★ローカル環境の作成(Windows)

- 51 -

画面1.27 XAMPP for Windowsのトップページ

■MySQLにパスワードを設定する

XAMPP for Windowsをインストールした時点では、MySQLにはパスワードが設定され

ていません。そのため、あなたのパソコンを触れる人であれば、誰でもMySQLのデータ

ベースの内容を見ることができます。そこで、MySQLにパスワードを設定して、自分以

外はアクセスできないようにします。

「http://localhost/security/index.php」のアドレスにアクセスすると、XAMPPの

セ キ ュ リ テ ィ を 設 定 す る ペ ー ジ が 開 き ま す 。 こ の ペ ー ジ の 中 に 、

「http://localhost/security/xamppsecurity.php」のページへのリンクがありますの

で、それをクリックします。

すると、MySQLのパスワードを設定するページが開きます。「新しいパスワード」と

「新しいパスワード(確認)」の欄に、パスワードを自分で決めて入力し、「パスワー

ドを変更しました」のボタンをクリックします(画面1.28)。

Page 14: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 52 -

画面1.28 MySQLのパスワードを設定する

次に、以下の手順で、MySQLを再起動します。

①XAMPP for Windowsのコントロールパネルで、右端に縦に並んでいるボタンの中で、

右上にある「SCM」のボタンをクリックします(画面1.29)。

②Windowsのサービス一覧が表示されます。

③「mysql」のサービスを選び、「サービスの再起動」のリンクをクリックします(画

面1.30)。

Page 15: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★ローカル環境の作成(Windows)

- 53 -

画面1.29 「SCM」のボタンをクリックする

画面1.30 MySQLのサービスを再起動する

■GDのインストール

Movable Type 5.1をXAMPP for Windowsにインストールするために、「GD」というPerl

のモジュールをインストールします。その手順は以下の通りです。

①Windowsのスタートボタンをクリックし、「すべてのプログラム」→「アクセサリ」

→「コマンドプロンプト」の順にメニューを選んで、コマンドプロンプトを起動しま

す。

Page 16: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 54 -

②以下のようにコマンドを順に入力します。 c:

cd c:\xampp\perl\bin

ppm install GD

③GDのインストールが終わり、コマンドを入力できる状態に戻ったら、コマンドプロ

ンプトのウィンドウを閉じます。

■Movable Type 5.1のインストール

ここまでで、Movable Type 5.1を動作させるための環境ができました。続いて、

Movable Type 5.1のインストールに移ります。

●データベースの作成 インストールを始める前に、まずMySQLにデータベースを作っておき、Movable Type

のデータを保存できるようにします。手順は以下の通りです。

①「http://localhost/phpmyadmin/」にアクセスします。

②ログインのページが開きますので、ユーザー名の欄に「root」、パスワードの欄には

自分で決めたパスワード(51ページ参照)を入力して、「実行する」ボタンをクリック

します(画面1.31)。

③「新規データベースを作成する」の下の欄に「mt」と入力し、その右の「照合順序」

の欄で「utf8_unicode_ci」を選んで、「作成」ボタンをクリックします(画面1.32)。

Page 17: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

第2章 Movable Type 5の基本操作

- 78 -

★管理画面の基本操作

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

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

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

■Movable Type 5.1へのサインイン

Movable Type 5.1で、ウェブページを作るなどの各種の作業を行うには、まず管理

ページにサインイン(ログイン)します。

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

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

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

2.1)。

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

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

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

Page 18: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★管理画面の基本操作

- 79 -

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

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

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

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

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

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

■ウェブサイトのダッシュボードに移動する

ウェブサイトには、ウェブページやフォルダを作ることをはじめとして、さまざま

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

ことができます。

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

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

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

Page 19: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

第2章 Movable Type 5の基本操作

- 80 -

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

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

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

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

されます。

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

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

Page 20: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★管理画面の基本操作

- 81 -

■メニューの操作

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

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

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

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

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

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

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

たときと同じ動作になります。

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

Page 21: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

第2章 Movable Type 5の基本操作

- 82 -

■ウェブサイトの再構築

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

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

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

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

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

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

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

画面2.6 再構築のボタン

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

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

れます。

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

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

Page 22: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★管理画面の基本操作

- 83 -

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

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

面2.9)

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

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

Page 23: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★ブログの作成

- 105 -

★ブログの作成

Movable Typeは、元々はブログを管理するためのソフトです。Movable Type 5.1も、

当然ながらブログを管理することができます。この節では、ブログを作成する手順を

解説します。

■ブログの新規作成

第1章の17ページで述べたように、Movable Type 5.1では、ブログはウェブサイトの

1つの構成要素という扱いになります。また、Movable Type 5.1をインストールした直

後では、ウェブサイトだけが作られ、その中にはブログは作られません。

ブログを新規作成するには、以下のいずれかの操作を行います。

①ユーザーダッシュボードのページでウェブサイト一覧を表示し、ブログを作りたい

ウェブサイトのところで「新しいブログ」のボタンをクリックします(画面2.33)。

②ウェブサイトのダッシュボードで、画面右上の「新規作成」のところの「▼」をク

リックして、メニューの中から「ブログ」を選びます(画面2.34)。

③ウェブサイトのダッシュボードで、「ブログ」→「新規」のメニューを選びます(画

面2.34)。

Page 24: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

第2章 Movable Type 5の基本操作

- 106 -

画面2.33 ユーザーダッシュボードからのブログ作成

画面2.34 ウェブサイトのダッシュボードからのブログ作成

上記のいずれかの操作を行うと、「ブログの作成」というページが表示されます(画

面2.35)。

Page 25: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★ブログの作成

- 107 -

画面2.35 ブログの作成

「ブログの作成」のページでは、以下の各項目を設定します。

①「ブログテーマ」

ブログのテーマ(テンプレートのセット)を選びます。

商用ライセンスおよび個人無償ライセンスのMovable Typeでは、「クラシックブログ」

「プロフェッショナルブログ」など、いくつかのテーマを選ぶことができます。また、

MTOSでは「クラシックブログ」か「Pico」を選択することができます。

②「ブログ名」

ブログの名前を自分で決めて入力します。

③「ブログURL」

ブログのトップページのアドレスを決めます。アドレスの 後には「/」を付けるよ

うにします。

なお、ブログのアドレスは、ウェブサイトのサブディレクトリにするか、もしくは

Page 26: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

第2章 Movable Type 5の基本操作

- 108 -

サブドメインにする必要があります。サブドメインを使いたい場合は、「サブドメイン

の利用」のチェックをオンにします。

例えば、ウェブサイトのアドレスが「http://www.hoge.com」の場合、ブログのアド

レスは以下のどちらかのような形式にする必要があります。

・サブディレクトリ

http://www.hoge.com/ディレクトリ名/

・サブドメイン

http://サブドメイン名.www.hoge.com/ディレクトリ名/

④「ブログパス」

ブログのトップページのアドレスに対応する、サーバー上のパスを指定します。こ

の決め方は、インストール時にウェブサイトを作ったときと同じです(44ページ参照)。

なお、「絶対パスの利用」のチェックをオンにすると、ブログの出力先ディレクトリ

を自由な形で指定することもできます。

⑤その他の設定項目

上記以外にも「タイムゾーン」と「使用言語」の設定項目がありますが、通常はそ

れらの設定項目はデフォルトのままにしておきます。日本語以外の環境で使う場合は、

その言語に合わせて適宜設定します。

各項目を設定し終わったら、「ブログの作成」ボタンをクリックします。これでブロ

グが新規作成されます。

■作成済みのブログの操作

ユーザーダッシュボードで「ブログ」のタブをクリックすると、作成済みのブログ

が一覧表示されます(画面2.36)。ここでブログの名前をクリックすると、そのブログ

のダッシュボードに移動します(画面2.37)。

Page 27: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★ブログの作成

- 109 -

画面2.36 ユーザーダッシュボードのブログの一覧

画面2.37 ブログのダッシュボード

Page 28: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

第2章 Movable Type 5の基本操作

- 110 -

また、画面左上のメニューにも、作成済みのブログが一覧表示されます(画面2.38)。

そこでブログ名をクリックすることでも、ブログのダッシュボードに移動することが

できます。

画面2.38 画面左上のメニューにも作成済みのブログの一覧が表示される

■ブログの設定

ブログのダッシュボードで「設定」以下のメニューを選ぶと、ブログの各種の設定

を行うことができます。

ただし、今の段階では、基本的には設定を変えるところはあまりありません。しい

て言えば、「ブログの説明」を入力するぐらいです。ブログの説明には、ブログの大ま

かな説明文を入れておきます。

ブログのダッシュボードで「設定」→「全般」メニューを選ぶと、ブログの全般的

な設定を行うページが表示されます。その先頭の「ブログ設定」の部分に「説明」の

欄があり、そこでブログの説明を入力することができます(画面2.39)。

なお、ブログではコメントやトラックバックを受信することもでき、その関係の設

定を行うこともできます。それらの設定については、コメントは133ページ、トラック

バックは139ページで解説します。

Page 29: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★ブログの作成

- 111 -

画面2.39 ブログの説明の入力

Page 30: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

第2章 Movable Type 5の基本操作

- 112 -

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

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

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

■ブログ記事の新規作成

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

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

の「記事を作成」ボタンをクリックします(画面2.40)。

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

グ記事」メニューを選びます(画面2.41)。

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

を選びます(画面2.41)。

Page 31: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 188 -

★テンプレートの概要

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

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

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

■テンプレートとは?

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

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

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

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

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

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

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

ます。

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

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

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

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

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

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

ともできます。

■テンプレートの種類

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

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

Page 32: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★テンプレートの概要

- 189 -

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

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

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

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

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

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

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

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

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

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

JavaScriptのプログラムを、個々のWebページに埋め込むこともよくあります。Movable

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

で管理することができます。

ただし、ウェブサイトやブログの情報を一切使わないファイルは、テンプレートで

管理せずに、直接にサーバーにアップロードする方が簡単です(例:jQueryのライブ

ラリなど)。

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

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

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

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

「RSS」テンプレート

・・・

出力されるファイル

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

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

RSS のファイル

・・・

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

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

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

Page 33: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 190 -

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

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

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

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

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

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

図3.2 ウェブページのアーカイブテンプレート

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

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

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

・・・

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

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

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

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

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

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

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

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

なお、紙面の都合上、テンプレートモジュールについては本書の続編(Volume 2)

で解説します。

Page 34: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★テンプレートの概要

- 191 -

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

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

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

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

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

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

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

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

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

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

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

なお、ウィジェットについては、本書の続編(Volume 2)で解説します。

Page 35: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 192 -

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

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

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

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

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

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

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

ート」と呼びます。

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

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

合も出てきます。

Page 36: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★テンプレートの概要

- 193 -

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

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

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

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

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

本書の続編(Volume 2)で解説します。

Page 37: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★メインページにウェブページのタイトルを一覧表示する

- 213 -

★メインページにウェブページのタイトルを一覧

表示する

ウェブサイトのサイドバーには、そのウェブサイト内のウェブページの一覧を表示

することがよくあります。そこでこの節では、ウェブページのタイトルを一覧表示す

る方法を解説します。その中で、「ブロックタグ」という概念についても解説します。

■この節で取り上げる例

この節では、メインページのサイドバーに、そのウェブサイトにあるウェブページ

のタイトルを一覧表示することを取り上げます(画面3.13)。

なお、ウェブページはフォルダで分類することができますが、この節ではとりあえ

ずフォルダは無視して、すべてのウェブページをフラットに出力します。

画面3.13 サイドバーにウェブページのタイトルを一覧表示する

■ウェブページの一覧を出力する---MTPagesタグ

ウェブページの一覧を出力するには、「MTPages」というテンプレートタグを使いま

Page 38: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 214 -

す。まず、MTPagesタグの使い方から解説します。

●ブロックタグについて 「一連のウェブページ」など、同じ種類のオブジェクト(※)を繰り返し出力するには、

「ブロックタグ」という種類のテンプレートタグを使います。

ブロックタグは、HTMLの開始タグと終了タグで同様に、「<タグ名>」と「</タグ名>」

でブロックを囲むテンプレートタグです(リスト3.6)。「ブロックの内容」の部分が繰

り返し出力されます。

リスト3.6 ブロックタグの書き方

01 <タグ名>

02 ブロックの内容

03 </タグ名>

なお、ブロックタグの中には、繰り返しに使うタグだけでなく、条件によってブロ

ック内を出力するかどうかを決めるタグもあります。本書のこの後の部分では、条件

判断を行うブロックタグも出てきます。

●MTPagesタグの基本的な書き方 ウェブサイト内のすべてのウェブページを出力する際には、「MTPages」というブロ

ックタグを使います(リスト3.7)。開始タグの「<mt:Pages>」と、終了タグの

「</mt:Pages>」の間のブロックが繰り返し出力されます。

繰り返しの1回毎に、個々のウェブページの情報を出力することができます。例えば、

ウェブページA~Cの3件のウェブページがある場合、リスト3.7の部分を再構築すると、

図3.7のような形に出力されます。

リスト3.7 ブロックタグの例(MTPagesタグ)

01 <mt:Pages>

02 個々のウェブページの情報を出力するためのHTMLやテンプレートタグ

03 </mt:Pages>

(※) オブジェクト

ウェブページ/ブログ記事/カテゴリ/フォルダなど、ウェブサイトを構成する要素を総称して、「オブ

ジェクト」(Object)と呼びます。

Page 39: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★メインページにウェブページのタイトルを一覧表示する

- 215 -

図3.7 MTPagesタグのブロックの動作例

<mt:Pages> 個々のウェブページの情報を 出力するための HTMLやテンプレートタグ</mt:Pages>

ウェブページB の情報やそれらをマークアップする

HTMLなど

ウェブページA の情報やそれらをマークアップする

HTMLなど

ウェブページC の情報やそれらをマークアップする

HTMLなど

MTPagesタグのブロックの中では、「MTPageTitle」など、「MTPage○○○」と名のつ

くテンプレートタグ(ファンクションタグ)で、個々のウェブページの情報を出力す

ることができます(表3.2)。これらのテンプレートタグは、ウェブページの編集画面

の各要素と画面3.14のように対応します。

なお、ウェブページのIDを調べるには、以下の手順を取ります。

①ウェブページの一覧のページを開きます。

②①のページの右上にある「表示オプション」のリンクをクリックします。

③表示オプションが開きますので、「表示項目」の左端にある「ID」のチェックをオン

にします。

④ウェブページの一覧の左端に、各ウェブページのIDが表示されます。

表3.2 ウェブページの情報を出力するテンプレートタグ

テンプレートタグ 内容

MTPageID ウェブページのID

MTPageTitle ウェブページのタイトル

MTPageBody ウェブページの「本文」欄に入力した内容

MTPageMore ウェブページの「続き」欄に入力した内容

MTPageDate ウェブページを作成した日付

MTPageExcerpt ウェブページの概要

MTPageKeywords ウェブページのキーワード

MTPageBasename ウェブページのファイル名

MTPageAuthorDisplayName ページを書いたユーザーの名前

MTPagePermalink そのウェブページ個別のページのアドレス

Page 40: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 216 -

画面3.14 ウェブページの編集画面の各要素とテンプレートタグの対応

■サイドバーにウェブページの一覧を出力する

ここまでの話に基づいて、サイドバーにウェブページの一覧を出力できるように、

メインページのインデックステンプレートを書き換えます。ここでは、IDがbetaのサ

イドバー(195ページの図3.4を参照)に、ウェブページの一覧を出力することにしま

す。

●サイドバーの各項目のHTML ベーステーマでは、サイドバーに出力する各項目は、リスト3.8のようなHTMLの構造

にします。

項目全体を、「<div class="widget">」と「</div>」のdiv要素で囲みます。また、

項目のタイトルは、「<h3 class="widget-header">」~「</h3>」のh3要素で表します。

Page 41: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★メインページにウェブページのタイトルを一覧表示する

- 217 -

そして、項目の中身は、「<div class="widget-content">」~「</div>」のdiv要素で

表します。

なお、widget/widget-header/widget-contentの各クラスは、スタイルシート

(styles.css)の中であらかじめ定義してあります。

リスト3.8 サイドバーの各項目のHTML

01 <div class="widget">

02 <h3 class="widget-header">項目のタイトル</h3>

03 <div class="widget-content">

04 項目の内容

05 </div>

06 </div>

●betaサイドバーの書き換え IDがbetaのサイドバーを実際に書き換えると、リスト3.9のようになります。濃い網

掛けで白抜き文字の部分(7~9行目)で、MTPagesタグを使って、ウェブページの一覧

を出力しています。

ブロックの中(8行目)にはMTPageTitleタグがありますので、各ウェブページのタ

イトルが順に出力されます。

また、 MTPageTitle タグを a要素で囲んでいて、リンク先のアドレスを

MTPagePermalinkタグで出力しています。そのため、ウェブページのタイトルをクリッ

クすると、そのウェブページに移動する動作になります。

ただし、現時点では、ウェブページのテンプレートは内容が空になっています(後

の227ページで中身を作ります)。そのため、リンクをクリックすると、真っ白のペー

ジが表示されます。

リスト3.9 ウェブページの一覧を出力する

01 <div id="beta">

02 <div id="beta-inner">

03 <div class="widget">

04 <h3 class="widget-header">ウェブページ一覧</h3>

05 <div class="widget-content">

06 <ul>

07 <mt:Pages>

08 <li><a href="<$mt:PagePermalink$>"><$mt:PageTitle$></a></li>

09 </mt:Pages>

10 </ul>

11 </div>

Page 42: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 218 -

12 </div>

13 </div>

14 </div>

●サンプルファイル リスト3.9を含むサンプルテーマは、「part03」→「mtpages」フォルダにあります。

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

にアップロードすると、「ウェブページ一覧の表示」というテーマが追加されます。こ

のテーマをウェブサイトに適用すると、「メインページ」のインデックステンプレート

が、リスト3.9で書き換えたものになります。

■出力する件数を指定する

MTPagesタグでページの一覧を出力する場合、標準の設定では、 新の10件のウェブ

ページだけが出力されます。

必要に応じて、出力する件数を指定することもできます。それには、MTPagesタグに

「lastn="○○"」という記述を追加します(「○○」は出力する件数)。例えば、 新

の5件のウェブページだけを出力するには、MTPagesタグをリスト3.10のように書きま

す。

リスト3.10 最新5件のウェブページを出力する

01 <mt:Pages lastn="5">

02 個々のウェブページの情報を出力する部分

03 </mt:Pages>

また、残念ながら、無条件にすべてのウェブページを出力する方法はないようです。

「lastn="9999"」など、まずあり得ないような大きな数字を指定する方法が、一般的

によく使われています。

なお、「lastn="5"」のように、テンプレートタグに追加するオプションのことを、

Movable Typeでは「モディファイア」(modifier)と呼びます。今後、さまざまなモデ

ィファイアを使う場面がありますので、モディファイアという用語も頭に入れておい

てください。

Page 43: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 240 -

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

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

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

■ウェブサイトのテンプレートとよく似た構造

第3章で、ウェブサイトのテンプレート作りを解説しました。ウェブサイトでは、サ

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

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

でした。

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

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

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

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

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

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

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

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

メインページ

その他(スタイルシート等)

アーカイブテンプレート

ウェブページ

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

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

メインページ

その他(スタイルシート等)

アーカイブテンプレート

ウェブページ

ブログのテンプレート

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

月別ブログ記事リスト

Page 44: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 241 -

■ベースブログテーマのインストール

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

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

た。

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

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

を作ることにします。

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

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

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

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

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

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

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

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

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

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

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

Page 45: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 242 -

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

■ブログのテンプレートの編集

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

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

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

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

Page 46: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 243 -

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

Page 47: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 244 -

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

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

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

■ウェブサイトのメインページのテーマをコピーする

ベースブログでは、ベースウェブサイトの各ページと同じ構造のHTML/CSSを使いま

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

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

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

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

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

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

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

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

なお、「ベースブログ」のテーマを適用した段階では、メインページのテンプレート

は中身が空になっています。

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

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

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

サンプルファイルの「part03」→「website」→「templates」フォルダを開き、そ

の中の「main_index.mtml」ファイルをテキストエディタで開きます。そして、このフ

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

に貼り付けます(画面4.3)。

Page 48: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 245 -

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

■テンプレートタグを置き換える

ウェブサイトのテンプレートでは、ウェブサイト自体の情報を扱うために、

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

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

う。

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

タグに置き換えます。

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

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

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

画面とテンプレートタグの対応は、画面4.4のようになっています。

Page 49: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 246 -

表4.1 ブログの情報を出力するテンプレートタグ

テンプレートタグ 内容

MTBlogID ブログのID

MTBlogName ブログの名前

MTBlogDescription ブログの概要

MTBlogURL ブログのアドレス

MTBlogPath ブログのサイトパス

MTBlogRelativeURL ブログのアドレスから、「http://ドメイン名」を除いた値

MTBlogEntryCount ブログ内のブログ記事の総数

MTBlogCommentCount ブログ内の記事についたコメントの総数

MTBlogPingCount ブログ内の記事についたトラックバックの総数

画面4.4 ブログの設定画面とテンプレートタグの対応

●テンプレートタグの置き換え それでは、メインページのテンプレートで、実際にテンプレートタグを置き換えて

みましょう。

ウ ェ ブ サ イ ト の メ イ ン ペ ー ジ の テ ン プ レ ー ト で は 、 MTWebsiteName /

MTWebsiteDescription/MTWebsiteURLの3つのテンプレートタグが使われています。こ

れらのテンプレートタグを、ブログ用のテンプレートタグに置き換えます(表4.2)。

Page 50: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 247 -

表4.2 テンプレートタグの置き換え

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

MTWebsiteName MTBlogName

MTWebsiteDescription MTBlogDescription

MTWebsiteURL MTBlogURL

実際にテンプレートを書き換えると、リスト4.1のようになります。網掛けした部分

が、ウェブサイト用のメインページのテンプレートから書き換えた箇所です。表4.2の

通り、テンプレートタグをブログ用のものに書き換えています。

リスト4.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 <head>

05 <meta http-equiv="Content-Type" content="text/html; charset=<$mt:PublishCharset$

>" />

06 <meta name="generator" content="<$mt:ProductName version="1"$>" />

07 <link rel="stylesheet" href="<$mt:BlogURL$>styles.css" type="text/css" />

08 <title><$mt:BlogName$></title>

09 </head>

10 <body id="classic-website" class="mt-main-index layout-wtt">

11 <div id="container">

12 <div id="container-inner">

13

14 <div id="header">

15 <div id="header-inner">

16 <div id="header-content">

17 <h1 id="header-name"><a href="<$mt:BlogURL$>"><$mt:BlogName$></a></h1>

18 <h2 id="header-description"><$mt:BlogDescription$></h2>

19 </div>

20 </div>

21 </div>

22 ・

23 ・(以後略)

24 ・

●ブログの再構築とページの確認 テンプレートの入力が終わったら、テンプレート編集画面を一番下までスクロール

し、「変更を保存」のボタンをクリックします。

その後、管理画面右上の「サイトを再構築」のボタンをクリックし、再構築のダイ

Page 51: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 292 -

★カテゴリ/月別アーカイブテンプレートの作成

ブログでは、メインページのほかに、カテゴリ別や月別のアーカイブページを作る

ことが一般的です。その方法を解説します。

■この節で行うこと

この節では、カテゴリ毎のアーカイブページと、月別のアーカイブページを出力で

きるようにします(画面4.17)。それぞれに対応するアーカイブテンプレートを作り、

ブログ全体を再構築すれば、これらのアーカイブページを出力することができます。

画面4.17 カテゴリ毎のアーカイブページの例

Page 52: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★カテゴリ/月別アーカイブテンプレートの作成

- 293 -

■メインページのテンプレートを流用する

カテゴリ/月別アーカイブページは、メインページと同じく、複数のブログ記事を

まとめて出力するのに使います。メインページはブログ全体の 新記事を出力するの

に対し、カテゴリアーカイブページは、カテゴリ毎のブログ記事を出力するのに使い

ます。また、月別アーカイブページは、それぞれの月のブログ記事を出力するのに使

います。

また、カテゴリ/月別アーカイブページのテンプレートでは、メインページのテン

プレートと同じテンプレートタグを使うことができます。ただし、一部のテンプレー

トタグは、アーカイブの種類に応じて、インデックステンプレートとは異なる動作を

します。

そこで、メインページのテンプレートをコピーして、アーカイブの種類に合わせて

テンプレートを部分的に書き換えれば、カテゴリ/月別のアーカイブページを出力す

ることができます。

■MTEntriesタグの動作の違い

すでに述べたように、カテゴリ/月別アーカイブページのテンプレートでは、一部

のテンプレートタグの動作が、インデックステンプレートの場合と異なります。この

点を押さえておくことが必要です。特に重要な点として、「MTEntriesタグの動作が変

わる」ということが挙げられます。

●出力対象になるブログ記事 インデックステンプレートでは、MTEntriesタグの通常の動作は、「ブログ内のすべ

ての記事から、 新の記事を出力する」ことです。一方、カテゴリ/月別アーカイブ

ページのテンプレートでは、MTEntriesタグの動作は以下のようになります。

①カテゴリアーカイブテンプレートの場合

個々のカテゴリに属するブログ記事だけが、出力対象になります。

例えば、「PC」というカテゴリのアーカイブページを再構築しているときには、「PC」

カテゴリのブログ記事だけが出力対象になります。

②月別アーカイブテンプレートの場合

個々のアーカイブの月(または年や日など)に属するブログ記事だけが、出力対象

になります。

Page 53: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 294 -

例えば、2010年1月の月別アーカイブページを再構築しているときには、2010年1月

のブログ記事だけが出力対象になります。

いずれの場合も、MTEntriesタグはアーカイブの出力に適した動作になっていると言

えます。

●出力されるブログ記事の件数 もう1つの違いとして、出力されるブログ記事の件数が異なります。

インデックステンプレートの場合、標準では、ブログの「設定」→「投稿」メニュ

ーの「表示される記事数」の設定に応じて記事が出力されます。また、MTEntriesタグ

に「lastn="○"」のモディファイアを付けて、出力する件数を明示することもできま

す。

一方、カテゴリ/月別アーカイブページのテンプレートでは、MTEntriesタグにモデ

ィファイアを何も指定しない場合は、それぞれのアーカイブに属するすべてのブログ

記事が出力対象になります。

例えば、「PC」というカテゴリのアーカイブページを再構築する場合、MTEntriesタ

グにモディファイアを何も付けないと、「PC」カテゴリ内のすべてのブログ記事が出力

対象になります。

■アーカイブテンプレートで使えるテンプレートタグ

カテゴリ等のアーカイブテンプレートの中では、以下のようなテンプレートタグを

使うことができます。

●MTArchive系のテンプレートタグ まず、MTArchive系のテンプレートタグ(282ページの表4.9)を使って、アーカイブ

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

例えば、アーカイブテンプレートにMTArchiveTitleタグを入れるとします。そのア

ーカイブテンプレートを再構築すると、MTArchiveTitleタグが、個々のアーカイブの

タイトルに変換されます。

カテゴリアーカイブテンプレートであれば、MTArchiveTitleタグはカテゴリ名に変

換されます。また、月別アーカイブテンプレートであれば、MTArchiveTitleタグは「○

○年□□月」のように変換されます。

●前後のアーカイブページに移動する アーカイブページでは、前後のアーカイブに移動する機能を入れることができます。

Page 54: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★カテゴリ/月別アーカイブテンプレートの作成

- 295 -

月別アーカイブなら、前後の月のアーカイブページに移動することができます。また、

カテゴリアーカイブであれば、同じ階層のカテゴリで、Movable Type 5.1のカテゴリ

の並べ替え機能での前後のカテゴリのアーカイブページに移動することができます。

前後のアーカイブページの情報は、「MTArchivePrevious」および「MTArchiveNext」

タグで出力することができます。これらのタグはブロックタグになっていて、ブロッ

ク内でMTArchive系のタグ(282ページの表4.9)を使って前後のアーカイブの情報を出

力することができます(リスト4.22)。

リスト4.22 MTArchivePrevious/MTArchiveNextタグの書き方

01 <mt:ArchivePrevious>

02 前のアーカイブの情報を出力するHTMLやテンプレートタグ

03 </mt:ArchivePrevious>

04 <mt:ArchiveNext>

05 前のアーカイブの情報を出力するHTMLやテンプレートタグ

06 </mt:ArchiveNext>

■カテゴリアーカイブのテンプレートの作成

それでは、カテゴリアーカイブのテンプレートを実際に作っていくことにしましょ

う。

●テンプレートの編集を始める ベースブログのテーマでは、Movable Type 5の「クラシックブログ」テーマに合わ

せて、カテゴリアーカイブのテンプレートに、「カテゴリ別ブログ記事リスト」という

名前を付けています。まず、このテンプレートを編集する状態にします。

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

トの一覧のページを開きます。「アーカイブテンプレート」の部分までスクロールする

と、アーカイブテンプレートの名前が一覧表示され、その中に「カテゴリ別ブログ記

事リスト」があります(画面4.18)。

この「カテゴリ別ブログ記事リスト」をクリックすると、テンプレートを編集する

状態になります。なお、ベースブログのテーマでは、「カテゴリ別ブログ記事リスト」

の内容は空にしてあります。

Page 55: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 296 -

画面4.18 アーカイブテンプレートの中に「カテゴリ別ブログ記事リスト」がある

●メインページのテンプレートを貼り付ける 293ページで述べたように、カテゴリアーカイブのテンプレートは、メインページの

テンプレートをベースにして作ります。そこで、メインページのテンプレートを開き、

その内容をコピーして、カテゴリアーカイブテンプレートの入力欄に貼り付けます。

●テンプレートの内容を書き換える 次に、テンプレートの内容を書き換えて、カテゴリアーカイブに適した出力になる

ようにします。

実際にテンプレートを書き換えると、リスト4.23のようになります。書き換えた(ま

Page 56: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★カテゴリ/月別アーカイブテンプレートの作成

- 297 -

たは追加した)箇所を、濃い網掛けで示しています。また、テンプレートタグは黒い

網掛けで示しています。

リスト4.23 カテゴリアーカイブのテンプレート

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 <head>

05 <meta http-equiv="Content-Type" content="text/html; charset=<$mt:PublishCharset$

>" />

06 <meta name="generator" content="<$mt:ProductName version="1"$>" />

07 <link rel="stylesheet" href="<$mt:BlogURL$>styles.css" type="text/css" />

08 <title><$mt:ArchiveTitle$>カテゴリアーカイブ - <$mt:BlogName$></title>

09 </head>

10 <body id="classic-website" class="mt-archive-listing layout-wtt">

11 <div id="container">

12 <div id="container-inner">

13

14 <div id="header">

15 <div id="header-inner">

16 <div id="header-content">

17 <div id="header-name"><a href="<$mt:BlogURL$>"><$mt:BlogName$></a></di

v>

18 <div id="header-description"><$mt:BlogDescription$></div>

19 </div>

20 </div>

21 </div>

22

23 <div id="content">

24 <div id="content-inner">

25

26 <div id="alpha">

27 <div id="alpha-inner">

28 <h1 id="page-title" class="archive-title"><em><$mt:ArchiveTitle$></e

m>カテゴリのアーカイブ</h1>

29 <mt:Entries>

30 <div id="entry-<$mt:EntryID$>" class="entry-asset asset hentry">

31 <div class="asset-header">

32 ・

33 ・(途中略)

34 ・

35 </div>

36 </mt:Entries>

37

38 <div class="content-nav">

Page 57: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 317 -

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

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

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

の方法を解説します。

■この節で行うこと

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

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

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

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

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

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

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

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

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

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

Page 58: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

第5章 各種機能の追加

- 318 -

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

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

Page 59: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 319 -

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

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

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

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

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

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

ことから始めます。

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

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

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

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

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

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

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

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

Page 60: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

第5章 各種機能の追加

- 320 -

●トラックバックを受け付けているかどうかを判断する---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>

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

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

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

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

Page 61: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

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

- 321 -

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

テンプレートの中では、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」

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

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

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

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

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

ラックバックがある場合

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

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

Page 62: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

第5章 各種機能の追加

- 322 -

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:EntryTrackbackCo

unt$>)</h2>

24

25 <mt:IfPingsAccepted>

26 <div class="trackbacks-info">

27 <p>トラックバックURL: <$mt:EntryTrackbackLink$></p>

28 </div>

29 </mt:IfPingsAccepted>

30

Page 63: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

第5章 各種機能の追加

- 342 -

★コメントの受信と表示---その②・システム

テンプレートの作成

コメント機能を付ける場合、コメントのプレビューのページや、投稿完了のページ

も出力する必要があります。この節では、これらの機能を追加する手順を解説します。

■システムテンプレートについて

コメントのプレビューなど、システム的な処理を行う際のテンプレートのことを総

称して、「システムテンプレート」と呼びます。

ベースウェブサイト/ベースブログのテーマにはシステムテンプレートが6種類あ

ります。この節では、それらの中の「コメントプレビュー」と「コメント完了」の2つ

のテンプレートを作り、コメントのプレビュー等のページを表示できるようにします。

なお、システムテンプレートを編集するには、以下の手順をとります。

①ウェブサイトやブログの管理画面で、「デザイン」→「テンプレート」メニューを選

んでテンプレート一覧のページを開きます。

②テンプレート一覧のページを一番下までスクロールすると、システムテンプレート

の一覧が表示されます(画面5.7)。

③他のテンプレートと同様に、システムテンプレートの一覧で、編集したいテンプレ

ートの名前をクリックします。

Page 64: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★コメントの受信と表示---その②・システムテンプレートの作成

- 343 -

画面5.7 システムテンプレートの一覧

■コメントプレビューテンプレートの作成

コメント投稿フォームで「プレビュー」のボタンがクリックされたときには、コメ

ントの内容をプレビューするページを表示します(画面5.8)。このページは、「コメン

トプレビュー」のシステムテンプレートに基づいて出力されます。

Page 65: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

第5章 各種機能の追加

- 344 -

画面5.8 コメントプレビューページの例

●コメントプレビューテンプレートの作り方 コメントプレビューテンプレートは、ウェブサイトやブログの骨組みのテンプレー

トを基にして作ることができます。また、コメントプレビューページには、通常は以

下の内容を出力します。

①コメント投稿フォームで入力されたコメントのプレビュー

②コメントを修正するためのフォーム

入力されたコメントの内容は、MTComment系のテンプレートタグ(334ページ参照)

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

●コメント修正用フォームにコメントの内容を出力する コメント修正用のフォームには、入力されたコメントの内容をあらかじめ表示する

ようにします。この処理は、input要素等のvalue属性にMTComment系のタグの値を出力

すれば、行うことができます。

Page 66: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★コメントの受信と表示---その②・システムテンプレートの作成

- 345 -

ただし、コメントの文中に「<」や「>」の文字が含まれていた場合、それらの文字

をそのまま出力するとHTMLのタグと解釈されてしまい、フォームが崩れることがあり

得ます。また、コメント内にJavaScript等が含まれていた時に、それが実行されてし

まい、セキュリティ上の問題が出ることもあり得ます。

そこで、value属性にMTComment系のタグを出力する場合は、「encode_html="1"」と

いうモディファイアを付加します。このモディファイアは、「<」や「>」を文字実体参

照(「&lt;」や「&gt;」等)に変換する働きをします。

たとえば、コメント入力フォームの「名前」の欄は、以下のようにして作ることが

できます。投降者名をMTCommentAuthorタグで出力する際に、「encode_html="1"」のモ

ディファイアを付加しています。

<input id="comment-author" name="author" size="30" value="<$mt:CommentAuthor enco

de_html="1"$>" onfocus="mtShowCaptcha()" />

●JavaScriptの追加 ブログ記事(ウェブページ)アーカイブテンプレートと同様に、コメントプレビュ

ーのページを正しく動作させるためには、コメントプレビューテンプレートに

JavaScriptを組み込むことが必要になります。

具体的なJavaScriptは、この後でテンプレートのサンプルを紹介する際に解説しま

す。

■コメントプレビューテンプレートの例

それでは、ブログのコメントプレビューテンプレートを例に、テンプレートの作り

方の例を紹介します。HTMLヘッダー/プレビュー出力/コメント修正フォームの3つの

部分に分けて紹介します。

●HTMLヘッダー部分 まず、HTMLのヘッダーの部分はリスト5.11のようになります。骨組みのテンプレー

トに、網掛けした箇所を追加しています。

リスト5.11 コメントプレビューテンプレートのHTMLヘッダー部分

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 <head>

Page 67: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

第5章 各種機能の追加

- 346 -

05 <meta http-equiv="Content-Type" content="text/html; charset=<$mt:PublishCharset$

>" />

06 <meta name="generator" content="<$mt:ProductName version="1"$>" />

07 <link rel="stylesheet" href="<$mt:BlogURL$>styles.css" type="text/css" />

08 <title>コメントのプレビュー - <$mt:BlogName$></title>

09 <script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>

10 <script type="text/javascript">

11 /* <![CDATA[ */

12 var user = <$mt:UserSessionState$>;

13 var is_preview = true;

14 /* ]]> */

15 </script>

16 </head>

17 ・

18 ・(346ページのリスト5.12に続く)

19 ・

9行目のscriptタグは、ブログ記事/ウェブページアーカイブテンプレートと同じ内

容です(338ページ参照)。

また、10~15行目は、ログインしているユーザーの情報を得るためのJavaScriptで

す。12行目のMTUserSessionStateタグが、ログインしているユーザーの情報を表しま

す。コメントプレビューテンプレートでは、この部分も追加する必要があります。

●コメントのプレビューを出力する部分 コメントのプレビューを表示する部分は、リスト5.12の濃い網掛けの部分のように

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

この部分の内容は、ブログ記事/ウェブページアーカイブテンプレートで、個々の

コメントの情報を出力する部分(MTCommentsタグのブロック内)とほぼ同じです(335

ページ参照)。

リスト5.12 コメントのプレビューを出力する部分

01 ・

02 ・(345ページのリスト5.11から続く)

03 ・

04 <body id="classic-blog" class="mt-comment-preview layout-wtt">

05 ・

06 ・(途中略)

07 ・

08 <div id="alpha">

09 <div id="alpha-inner">

10 <h1 id="page-title">コメントのプレビュー</h1>

Page 68: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★コメントの受信と表示---その②・システムテンプレートの作成

- 347 -

11

12 <div class="comment" id="comment-<$mt:CommentID$>">

13 <div class="inner">

14 <div class="comment-header">

15 <div class="asset-meta">

16 <span class="byline">

17 <$mt:CommentAuthorIdentity$>

18 <mt:IfCommentParent>

19 <span class="vcard author"><$mt:CommentAuthorLink$></span>

から<mt:CommentParent><a href="<$mt:CommentLink$>"><$mt:CommentAuthor$></a>への返

信</mt:CommentParent>

20 <mt:Else>

21 <span class="vcard author"><$mt:CommentAuthorLink$></span>

22 </mt:IfCommentParent>

23 | <a href="<$mt:CommentLink$>"><abbr class="published" tit

le="<$mt:CommentDate format_name="iso8601"$>"><$mt:CommentDate$></abbr></a>

24 </span>

25 </div>

26 </div>

27 <div class="comment-content">

28 <$mt:CommentBody$>

29 </div>

30 </div>

31 </div>

32 ・

33 ・(347ページのリスト5.13に続く)

34 ・

●コメント修正用フォームを出力する部分 次に、コメント修正用のフォームを出力する部分を追加します。リスト5.13の4~55

行目を追加しています(黒い網掛けはテンプレートタグを表します)。

リスト5.13 コメント修正用フォームを出力する部分

01 ・

02 ・(346ページのリスト5.12から続く)

03 ・

04 <div class="comments-open" id="comments-open">

05 <h2 class="comments-open-header">コメントする</h2>

06 <div class="comments-open-content">

07 <div id="comment-greeting"></div>

08 <form method="post" action="<$mt:CGIPath$><$mt:CommentScript$>"

name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">

09 <input type="hidden" name="static" value="1" />

Page 69: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

第6章 テンプレート関係の各種のテクニック

- 374 -

★ブログ記事/ウェブページの著者の情報を出力

する

複数のユーザーでウェブサイトを作る場合、個々のブログ記事(またはウェブペー

ジ)に、その文章を書いた人の名前等を出力したいこともあります。その方法を紹介

します。

■この節で行うこと

この節では、個々のブログ記事のタイトルの後に、その記事を書いた人の名前(ユ

ーザー名)と、各ユーザーのアイコンを出力するようにします。

複数のユーザーで1つのブログに記事を投稿していると、それぞれの記事に、その記

事を書いたユーザーの名前とアイコンが表示されます(画面6.1)。

画面6.1 それぞれの記事にユーザー名/ユーザーのアイコンが表示される

Page 70: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★ブログ記事/ウェブページの著者の情報を出力する

- 375 -

■投稿したユーザーの情報を出力する

ブログ記事を投稿したユーザーの情報は、「MTEntryAuthor~」のテンプレートタグ

で出力することができます(表6.1)。また、各テンプレートタグと、ユーザー情報の

設定画面との対応は、画面6.2のようになります。

なお、「MTEntryAuthor~」のテンプレートタグは、MTPagesタグのブロック内や、ウ

ェブページテンプレートの中でも使うことができます。

表6.1 ユーザーの情報を出力するテンプレートタグ

テンプレートタグ 内容

MTEntryAuthorID ユーザーのID

MTEntryAuthorDisplayName ユーザーの表示名

MTEntryAuthorEmail ユーザーのメールアドレス

MTEntryAuthorURL ユーザーのウェブサイトのアドレス

MTEntryAuthorUserpic ユーザーのアイコンを出力するためのimg要素

MTEntryAuthorUserpicURL ユーザーのアイコンのアドレス

画面6.2 テンプレートタグとユーザー情報の設定画面との対応

■テンプレートの書き換えの例

MTEntryAuthor系のテンプレートタグを使って、ブログのメインページで、個々のブ

ログ記事にユーザーの情報を出力するようにテンプレートを書き換えると、リスト6.1

Page 71: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

第6章 テンプレート関係の各種のテクニック

- 376 -

のようになります。

15行目で、MTEntryAuthorUserPicタグとMTEntryAuthorDisplayNameタグを使って、

ユーザーのアイコンと表示名を出力しています。

リスト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="i

so8601"$>"><$mt:EntryDate format="%x %X"$></abbr>

20 ・

21 ・

22 ・

●サンプルファイル メインページだけでなく、ブログの各テンプレートをリスト6.1のように書き換えた

サンプルテーマは、「part06」→「entry_author」フォルダにあります。

このフォルダをMovable Typeの「themes」ディレクトリにアップロードすると、ブ

ログに「ユーザーの情報を出力する例」というテーマが追加されます。このテーマを

ブログに適用すると、メインページのインデックステンプレートと、ブログ記事/ウ

ェブページ/カテゴリ別ブログ記事リスト/月別ブログ記事リストの各アーカイブテ

ンプレートに、リスト6.1の部分が追加されます。

Page 72: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★先頭のX件とその次のY件の出力方法を変える

- 377 -

★先頭のX件とその次のY件の出力方法を変える

一連のブログ記事を出力する際には、MTEntriesタグを使います。このMTEntriesタ

グには多くのモディファイアがあり、ブログ記事の出力方法をさまざまにカスタマイ

ズすることができます。この節では、「lastn」と「offset」の2つのモディファイアの

活用例を紹介します。

■この節で行うこと

ブログ記事の一覧を出力する際に、「先頭の1件はタイトルと本文を出力し、その後

の10件はタイトルと概要を出力する」というように、 初のX件とその次のY件とで出

力方法を変えたい場合があります(画面6.3)。この方法を紹介します。

画面6.3 最初の1件とその後の10件で出力方法を変える

Page 73: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

第6章 テンプレート関係の各種のテクニック

- 396 -

★パンくずリストを出力する

ブログ記事やウェブページをカテゴリやフォルダで分類する場合、個々のカテゴリ

/フォルダまでの経路を「パンくずリスト」として出力することがよくあります。こ

の節では、Movable Typeでパンくずリストを出力する方法を紹介します。

■この節で行うこと

この節では、カテゴリアーカイブページや、ブログ記事/ウェブページに、パンく

ずリストを出力する方法を紹介します。

●カテゴリーアーカイブページでのパンくずリスト カテゴリアーカイブページでは、そのカテゴリに至るまでの階層を出力するように

します。

例えば、「プラグイン紹介」というカテゴリが、図6.2のような階層になっていると

します。このカテゴリのアーカイブページの場合、画面6.6のように、まずトップペー

ジへのリンクを出力します。その後に、トップレベルから「プラグイン紹介」までの

各カテゴリを順に出力し、それぞれを各カテゴリへのリンクにします。

ただし、「プラグイン紹介」の文字はリンクにはしません(現在表示しているアーカ

イブページなので)。

図6.2 「プラグイン紹介」カテゴリの階層

パソコン

Movable Type

プラグイン

プラグイン紹介

Page 74: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★パンくずリストを出力する

- 397 -

画面6.6 「プラグイン紹介」カテゴリのアーカイブページのパンくずリスト

●ブログ記事/ウェブページでのパンくずリスト ブログ記事/ウェブページでは、トップページへのリンクの後、そのブログ記事/

ウェブページが属するカテゴリ/フォルダの階層を順に出力し、その後にブログ記事

のタイトルを出力するようにします。また、カテゴリ名の部分は、そのカテゴリのア

ーカイブページへのリンクにします(フォルダはアーカイブにできませんので、フォ

ルダ名だけ出力します)。

例えば、あるブログ記事が前述の図6.2のカテゴリに属している場合、画面6.7のよ

うにパンくずリストを出力するようにします。

また、複数のカテゴリに属するブログ記事では、そのすべてのカテゴリについて、

パンくずリストを出力するようにします(画面6.8)。

一方、カテゴリに属さないブログ記事(フォルダに属さないウェブページ)では、

トップページへのリンクと、ブログ記事(ウェブページ)のタイトルだけ出力します。

画面6.7 「プラグイン紹介」カテゴリに属するブログ記事のパンくずリスト

Page 75: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

第6章 テンプレート関係の各種のテクニック

- 398 -

画面6.8 複数のカテゴリに属するブログ記事のパンくずリスト

■カテゴリの階層をたどる---MTParentCategoriesタグ

現在出力中のカテゴリについて、トップレベルからそのカテゴリまでの各階層のカ

テゴリを順に出力するには、「MTParentCategories」というテンプレートタグを使いま

す。

●MTParentCategoriesタグの書き方 MTParentCategoriesタグはブロックタグで、ブロックの繰り返しごとに、カテゴリ

が1つずつ順に出力されます。また、このタグのブロックの中では、MTCategory系の各

種のタグを使って(262ページ参照)、カテゴリの情報を出力することができます(リ

スト6.18)。

リスト6.18 MTParentCategoriesタグの書き方

01 <mt:ParentCategories>

02 各カテゴリの情報を出力するHTMLやテンプレートタグ

03 </mt:ParentCategories>

●MTParentCategoriesタグを使う位置と動作 MTParentCategoriesタグは、カテゴリアーカイブテンプレートの中や、ブログ記事

アーカイブテンプレートの中、またMTEntriesタグのブロックの中で使うことができま

す。

カテゴリーアーカイブテンプレートの中で使った場合、出力中のカテゴリアーカイ

ブについて、トップレベルからそのカテゴリまでを順に出力することができます。

また、ブログ記事アーカイブテンプレートの中や、MTEntriesタグのブロックの中で

Page 76: Movable Type 5.1の概要 - H.Fujimoto · Movable Type 5.1には、「カスタムフィールド」という機能があり、ウェブページな どに項目(フィールド)を追加することが可能です(画面1.3)。また、Movable

★パンくずリストを出力する

- 399 -

使った場合は、その記事の主カテゴリについて、トップレベルからそのカテゴリまで

を順に出力することができます。

●MTParentCategoriesタグのモディファイア MTParentCategoriesタグでは、「glue」と「exclude_current」の2つのモディファイ

アを指定することができます。

glueモディファイアでは、カテゴリの間に入れる区切りの文字列を指定します。例

えば、「glue="→"」のモディファイアを指定すると、各カテゴリの間が「→」の文字

で区切られます。

また、「exclude_current="1"」とすると、現在のカテゴリを除外して、トップレベ

ルカテゴリから、現在のカテゴリの1つ上の階層までを出力します。

例えば、396ページの図6.2のように、「パソコン」→「Movable Type」→「プラグイ

ン」→「プラグイン紹介」というカテゴリがあるとします。この場合、

「exclude_current="1"」のモディファイアを指定すると、「パソコン」「Movable Type」

「プラグイン」の順にカテゴリが出力され、「プラグイン紹介」のカテゴリは出力され

ません。

●MTEntryCategoriesタグのブロックの中でMTParentCategoriesタグを使う

ブログ記事が複数のカテゴリに属している場合、そのすべてのカテゴリを出力する

には、MTEntryCategoriesタグを使います(261ページ参照)。

MTEntryCategoriesタグのブロックの中に、MTParentCategoriesタグのブロックを入

れることもできます(リスト6.19)。そのようにすると、398ページの画面6.8のように、

ブログ記事が属する個々のカテゴリについて、そのカテゴリまでの階層を出力するこ

とができます。

リスト6.19 MTEntryCategoriesタグとMTParentCategoriesタグの組み合わせ

01 <mt:EntryCategories>

02 <mt:ParentCategories>

03 各カテゴリの情報を出力するHTMLやテンプレートタグ

04 </mt:ParentCategories>

05 <mt:EntryCategories>