トフでもできる！？テーマ開発講座

もくじ

こ の 冊 子 はWeb版「 ト フ で も で き る！？テ ー マ 開 発 講 座 」（https://developer.movabletype.net/themeguide/ ）の 内 容を編集したものです。サイトでは省略されている項目の掲載、サンプルサイトの確認やテーマファイルのDLができます。

導入 ­ 学習をはじめよう！
MovableType.net テーマの学習をはじめよう！

テーマって何？

3

3

知識編
1. テーマはどんな風にできているの？
テーマの構成MTタグとは？
テーマを作るテンプレート、
モジュール

2. 開発者向け！管理画面の使い方
テンプレート5

ファイルマネージャ

5

8
8

6

カスタムフィールド

どんなテーマを作るか考える11

ニュースページを作る・その 2 - news.html編

40

サンプルテーマをダウンロードしよう

11

ニュースページを作る・その 3 - アーカイブ編

44

テーマを書き換えよう

12

ファイルをアップロードしよう

14

8

実践編
0. 準備

5. カスタムフィールドを使おう

1. MT化する−メインページ編

メインページを作る・その 1 - MTタグを使う

15

メインページを作る・その 2 - ナビゲーションを作る

18

メインページを作る・その 3 - 内容編

24

2. ファイルマネージャを使おう

ファイルマネージャにあるファイルを表示させる

3. モジュールの活用

テンプレート・モジュールを作って効率的に！

4. MT化する−ウェブページ、ニュースページ編

48

画像を表示させるカスタムフィールドを作る

48

6. MTタグを使いこなそう
conﬁgを使う

7. MT化する− 404 ページ編
404 ページを作ろう！

30

8. テーマを書き出す・読み込む
33

ウェブページテンプレートを作る！

36

ニュースページを作る・その 1 - 記事ページ編

38

テーマを読み込む55

いっしょにがんばろう！

2

54

55

MTタグでサイトの設定をしよう

58

52

テーマを書き出す

ex.カスタマイズしてみよう

さらにMTタグの学習をしよう！
カスタマイズの参考になるサイト

カスタムフィールドを設定する

56

導入−学習をはじめよう！
MovableType.net テーマの学習をはじめよう！
MovableType.net を使ったサイトを運営しているとき、 構成は、知識編→実践編の 2 ステップです。知識編で「表示させる記事の数を増やしたい 」と思ったことはは MovableType.net のつくりを学習します。部分的ありませんか？カスタマイズをしてみようとマニュアなカスタマイズをしたい場合も、まずは「知識編 」を理

ルを見ても、「MTタグ 」
「テンプレート 」「テーマ 」など、解してから、「 逆引き操作リスト 」や「マニュアル 」へ

聞きなれない言葉ばかりでお手上げ……本書はそんな進むとスムーズでしょう。実践編では実際にサイトを方に向けた MovableType.net を基礎から学習できる

テーマ化（MovableType.net で運用するテーマにし教本です。

ていくこと ）をしながら、MovableType.net の構造やMTタグを学習していきます。

◆ 本書は、
こんな方にオススメです！
▪既存のテーマを使ってサイトを運営しているけど、部分的にカスタマイズしたい！
▪MovableType.net を使って自分でサイトを作りたい！
▪HTML、
CSSは理解しているので、次はMTタグの勉強をしたい！

テーマって何？
◆ テーマ作成のメリット

MovableType.net に は さ ま ざ ま な 運 用 に 合 わ せ た

テーマ化をすると、一度作ったデザインと似たサイト

テーマが用意されています。既存のテーマだけではを作る際に読み込んだテーマを流用できるため、作成物足りない！という場合は、より使いやすいサイトにの時間や手間が少なくなります。MovableType.net

するためにデザインをカスタマイズしたり、一からを使ったクライアントワークを考えている方は、雛形

設計することも可能です。ぜひカスタマイズをマスになるテーマを複数用意し、その中からクライアント

ターして、オリジナルのサイトのテーマを作ってみまに選んでもらったものをベースに制作するといった運

しょう！作成したサイトは、テーマとして書き出し、読用も考えられます。

み込むことができます。これをテーマ化と呼びます。

3

知識編
テーマはどんな仕組みでできているのか？
や、開発者向け管理画面の使い方を解説します。実践編の前にこちらを理解しておき
ましょう。

4

知識編

1

テーマはどんな風にできているの？

テーマの構成実際のテーマはどのようにできているのでしょうか。
左サイドバーのデザイン > テンプレート からテーマ
ファイルの構成をみていきましょう。各ぺージに使われる「テンプレート 」がぺージの役割分だけあり、スタ

イルを指定する「CSS 」や「モジュール 」が入っています。ファイルマネージャには、テーマ内で使われる

画像など、必要に応じたファイルが用意されています。

（例 ）「Simple Corporate 」のテーマの構成

MTタグとは？
テンプレートのファイルを開いて中を確認します。
<html> <body> <div>…など、一般的なサイトでも見られるHTMLタグが書かれていますね。それ以外に、<mt: 〜〜 >というタグが出てくるのが分かるでしょうか。これが Movable Type 特有のタグ、MTタグです。

5

MTタグは、Movable Type のテンプレートに使われる

例えば「ブログのタイトルを表示させたい 」というと独自タグです。管理画面から入力し、保存された情報

きや「ここにニュース記事を 3 つ表示させたい」といったときです。MTタグは役割の分だけ種類があり、さらを取り出して表示させたり、機能を設定する際に使いに識別子を組み合わせてさまざまなカスタマイズがで

ます。

きます。

テーマを作るテンプレート、モジュール
テンプレートは、インデックス、記事、ウェブぺージ、

404 など…サイトの中でぺージになる部分です。
テンプレートには以下の 3 つの種類があります。

（例 ）「Simple Corporate 」デザイン > テンプレート▪インデックス・テンプレート

index.html、news.htmlなど 1 つのサイトに 1 つにしかないファイルのテンプレート。
▪アーカイブ・テンプレート
記事、
ウェブページなど、管理画面から投稿すると増えていくファイルのテンプレート。
▪システムテンプレート
システム上必要なページのテンプレート。

❖ テンプレート・モジュール
インデックス・テンプレートやアーカイブ・テンプレー
トの中では、同じコードの記述が何度も使われることがあります。そのような記述はテンプレート・モジュールとして保存し、必要な場所で呼び出して使うことができます。使い回せるパーツのようなイメージですね。

（例 ）「Simple Corporate 」デザイン > テンプレート

6

例えば、
グローバル・ナビゲーションは表示される全て修正があったときも、テンプレート・モジュール内を修のページに使用します。したがって、グローバル・ナビ

正すれば、他のテンプレートにも反映されるので、管理

ゲーション部分のコードをモジュール化（テンプレーもしやすくなります。

ト・モジュールの 1 つのテンプレートとして保存する
こと ）して、表示されるテンプレートから該当のテンプレート・モジュールを呼び出せば、同じコードを何度も書かずにすみます。

（例 ）「Simple Corporate 」デザイン > テンプレート > インデックスページ
編集画面右に、使っているモジュールが表示されています。

7

知識編

2

開発者向け！管理画面の使い方

テンプレートMovableType.net 管理画面左サイドバーのデザイン > テンプレートから開きます。
テーマの作成や、テンプレートの編集に使用する画面です。一覧画面からテンプレートを選択すると、編集画面に移行します。この中を書き換えて、テンプレー
トを変更していきます。

ファイルマネージャ
デザイン >ファイルマネージャから開きます。テーマ
内で使用する画像ファイルや、テンプレート以外で使用するファイルをアップロードする場所です。ロゴや、デフォルトの画像が必要なときによく利用されます。

フォルダ構造になっており、ホームはテンプレート
ファイルと同じ階層です。画像をアップロードする際
は、imagesなどの名前で専用のフォルダを作ると管理しやすいでしょう。

カスタムフィールド
カスタムフィールド > 一覧から開きます。
記事やウェブページの編集画面には本文、続き、概要といった入力フィールドがあります。これに加え、出力方式を指定できる「カスタムフィールド 」を作ることができます。カスタムフィールドはテキスト、画像などの形式があり、入力した情報を任意の場所に出力して使用します。

8MovableType.net がベーステーマとして提供している「Stylish Corporate 」を参考に具体的な使い方を見ていきましょう。
「Stylish Corporate 」のウェブページ投稿画面では、（例 ）「Stylish Corporate 」ウェブページ投稿画面 > 会社概要のカスタムフィールドにチェック！

チェックボックスのカスタムフィールドが使われています。「グローバルナビゲーションに表示 」をチェックすると、情報が出力されてテンプレート側でカスタ
ムフィールドの値を判別します。この場合、グローバ
ルナビゲーションにページへのリンクが表示されました。
（右図参照 ）

グローバルナビゲーションに、
このページへのリンクが表示されました。

このような仕組みを作ることができるのがカスタム
フィールドです。詳しい使い方は「実践編 」で扱っていきますので、ここでは機能と管理場所を覚えておき
ましょう。

POIN

ここまでで、知識編は終了です。

MovableType.net テーマがテンプレート、MTタグ、カスタムフィールドでT!

作られていることが理解できたでしょうか？
まだピンとこないかもしれませんが、テーマを作ってみると各場所の動きが掴めると思います。
次からは「実践編 」で実際にテーマを作成していきましょう！！

9

実践編
サンプルサイトを使って実際にMTタグを使いながら、主要なタグの使い方や基本知識として押さえておきたいポイントをご紹介していきます。

10

実践編

0

準備

どんなテーマを作るか考える
テーマを作成する前に、どんなテーマを作るのか？どんなものが必要か？を考えます。サイトのデザインも、先に決めておく必要があります。

サンプルテーマをダウンロードしよう❖ ダウンロード
今回は練習として、スタンダードなサイトが作れる
サンプルファイルを用意しています！必要なHTML、CSSや画像が入っているので、こちらをテーマ化しな▪ダウンロード用サンプルファイル

https://developer.movabletype.io/themeguide/.assets/samplethema.zip

がらMTタグを学習していきましょう。

▪サンプルサイト

ファイルは、右のURLからダウンロードできます。まhttps://developer.movabletype.io/themesample/

た、今回作成するテーマのサンプルサイトも確認しておきましょう。

❖ サイトの構成を確認しよう
では、ダウンロードしたzipの中身を見ていきます。
右画像のとおりファイルが入っています。フォルダに入っているファイルと、対応するテンプレートについて考えてみましょう。

11▪index.html
インデックス・テンプレート > メインページ
サイトのトップぺージになるテンプレートです。
▪news/index.html
インデックス・テンプレート > ニュース TOP
ニュースや、
おしらせ記事の一覧ぺージになるテンプレートです。
▪news/archive.html
アーカイブ・テンプレート > ○○別ニュース記事リスト
記事のアーカイブになるテンプレートです。
▪news/entry.html
アーカイブ・テンプレート > 記事

1 つの記事ページそのものになるテンプレートです。
▪page/index.html
アーカイブ・テンプレート > ウェブページ
ウェブページになるテンプレートです。
▪css/styles.css
インデックス・テンプレート > スタイルシート
スタイルシートのテンプレートです。これをカスタマイズするだけでもオリジナリティが増します。
▪404_error.html
システムテンプレート > 404 エラー
存在しないぺージ（404 ）をリクエストした場合に表示されるぺージです。
▪images
使用する画像が入ったフォルダです。

テーマを書き換えよう❖ 新しくブログを用意
ダッシュボード ウェブサイトの編集画面の「新しくブログを作る 」から新しいブログを作成して作業を始めましょう。このブログを使用して、ウェブサイトのデザインテーマを作成していきます。

URL、名前を任意のものに設定し、テーマから「General

Corporate 」を適用します。デザイン >テンプレート
から、テーマの構成を確認してみましょう。

12

テーマ作りに必要な内容がそろっています。

❖ 書き換えの準備をしよう
今回は、練習のため一度すべてHTMLの状態に戻します。先ほどダウンロードしたhtmlのファイルを開き、コードを現在適用されているテンプレートの対応するものにペーストして書き換えます。左ページの枠内を参考にしてください。

月 別、カ テ ゴ リ 別 の 記 事 ア ー カ イ ブ は 両 方 と もarchive.htmlの内容を入れます。また、テンプレート・モジュールはすべて削除してください。
書き換えたことでMTタグが消えて、記事やぺージが自動で増えないサイトになってしまいました。さらに

CSSへのリンクも切れたので、スタイルが当たっていない状態です。ですが、ここからMTタグを入れ込むことでテーマとして動くようにしていきます！
今回はMTタグを習得しやすいようにに、CSSのスタ
イルはあらかじめ設定してあります。通常、CSSを書き換える際は、テンプレート > インデックス・テンプ
レートから直接書き換えます。
続いて、画像を準備します。

13

ファイルをアップロードしよう❖ アップロードするのはどんなファイル？
ファイルマネージャに、ダウンロードしたimages内

どです。管理上、画像ファイルは「images 」フォルダ、

javascriptは「js 」フォルダを作成し、その中に入れるのファイルをアップロードします。

とよいでしょう。

ファイルマネージャでアップロードするのは…ロゴ
やメインイメージ、ogp画像などのサイト全体で必要になる共通の画像ファイル、サイトを運営する上で変更する予定の無いjsファイルや、CSSファイルな❖ 画像をアップロードする！
新しくテーマを作るため、まずは元から入っている画
像ファイルを削除しておきましょう。
削除が済んだらアップロードしていきます。images
フォルダに入り新規作成のボタンを押し、アップロー
ドしたいファイルを選択します。のちに必要になるので、サンプルのimagesフォルダ内の画像ファイルをすべてアップロードしておきましょう。ファイルは複数選択ができますよ。
これでファイルの準備は完成です。

14

実践編

1

MT 化する- メインページ編

メインページを作る・その 1 – MTタグを使う
いよいよ、MTタグを使用しテーマ化していきます！まずは「メインページ 」をテンプレート化しながら、MT
タグの使い方を試してみましょう。

「ここにサイト名 」の箇所はサイト名を表示させたい部分です。直接タイトルを打ち込み、書き換えることもできますが…、
それではテーマを使い回せないので、テーマ化の意味がなくなってしまいます。そんなときにつかうのがMTタグです！

❖ MTタグを使ってみよう
サイト名を表示させる
まずは準備として、設定 > 全般から全般設定を開き、名前と説明を入力しておきます。

次に、テンプレート内にMTタグを入れていきます。

15「サンプルサイト」メインページ（まだスタイルが当たっていませんが…）

デ ザ イ ン > テ ン プ レ ー ト か ら、index.htmlの テ ン プ

今回、テーマはブログで作成しているため、使用するレートを開きましょう。ここには「サイトの名前をMTタグは、次のものです。

表示させる 」という内容のMTタグを入れていきます。

▪<$mt:BlogName$>
ブログの名前を表示します。

ここを、下の図のように書き換えて保存します。

インデックス・テンプレート ＞ メインページ

サイト名が入りました！これは、先ほど管理画面で設定した、名前が入っているのです。このようにMTタグ
は編集画面から設定した文字列や、作ったぺージが表示できます。

16

❖サイトのURLを表示させる
先ほど表示させたサイト名には、メインぺージに戻る
ためのリンクが貼ってあるといいですね。URLを表示させるMTタグを使い、リンクを設置してみましょう。

▪<$mt:BlogURL$>
ブログのURLをhttp://から始まる絶対URLで表示します。
▪<$mt:BlogRelativeURL$>
ブログURLを、ホストからの相対URLで表示します。
たとえば、URLがhttp://blog.example.com/ﬁrst-weblog/の場合、/ﬁrst-weblog/を表示します。このタグが「http:// 〜〜〜」に置き換わるので、このタグはa href="◯◯"に入れて使います。

<a href="<$mt:BlogURL$>"><h1 class="mt-h1"><$mt:BlogName$>
</h1>
</a>

タイトルのリンクアドレスがブログのURLに指定されました。リンク付きのサイト名が完成です！
ブログのURLを表示させる方法がわかったところで、読み込まれているCSSのアドレスなども相対パスで呼び出してみましょう。CSSはサンプルで用意してあるので、正しく読み込まれると、サイトにスタイルがあたりますよ。
見た目ではわかりませんが、URLを確認してみてください！

17

<link href="<$mt:BlogRelativeURL$>styles.css" rel="stylesheet">

スタイルシートが適用されました！
今回のサンプルには使われていませんが、JavaScriptなどの外部ファイルを使用する場合も同じように設定できます。

メインページを作る・その 2 – ナビゲーションを作る❖ ナビゲーションをMT化する
続いて、グローバルナビゲーションをMT化していきます。現在ナビゲーションに表示されている「ぺージ

1、2…」は、HTMLに直接書かれているため、ページが増えてもナビゲーションには変化は起こりません。これを、MovableType.net 上で作ったぺージのタイト
ルが並ぶようにMTタグで書き換えます。
わかりやすいタイトルをつけてあげましょう。

まずは確認用に、管理画面の左サイドバー、ウェブペー
ジ > 新規から、ウェブぺージをいくつか作りましょう。
できたら、再びテンプレート編集画面に戻ります。

ウ ェ ブ ペ ー ジ 関 連 で 使 うMTタ グ を ご 紹 介 し ま す。
ウ ェ ブ ペ ー ジ 一 覧 を 表 示 さ せ る に は、そ の 範 囲 を<mt:Pages></mt:Pages>で 囲 み、そ の 中 に ウ ェ ブ

ペ ー ジ の タ イ ト ル を 表 示 さ せ る<mt:PageTitle>、
ウェブページのアドレスを表示させる、<mt:PagePermalink>を使います。

18

▪<mt:Pages>
ウェブページの一覧を表示するためのブロックタグです。
▪<$mt:PageTitle$>
ウェブページのタイトルを表示します。
▪<$mt:PagePermalink$>
現在のページのアーカイブへの絶対URLを表示します。
❖ タグの種類

MTタグには種類があり、その種類によって使い方がンクションタグ<$mt:PageTitle$>を使うと、ウェブ異なります。例えば、ページ名やページのアドレスをページのタイトルが取得できるようになります。

取得したい場合は、まずブロックタグ<mt:Pages></
mt:Pages>で囲みます。ブロックタグの内側で、ファ▪ブロックタグ
開始タグと終了タグがあり、ひとまとまりのテンプレートを囲みます。<mt:Pages></mt:Pages>は、こちらにあたります。
▪ファンクションタグ
単体での利用が可能です。どこでも利用可能なものと、特定のブロックタグの囲み内でのみ利用可能なものがあります。

❖ グローバルナビゲーションを表示させる
以上を踏まえて、ウェブページのタイトルとリンク先をMTタグで取得できるように記述してみます。

19

<mt:Pages><ul class="navi-list clearfix"><li><a href="<$mt:PagePermalink$>"><$mt:PageTitle$>
</a>
</li>
</ul>
</mt:Pages>

ナビゲーションが表示されました！ページの数だけを自動で取得してくれるので以前よりコードは短くなります。
一旦、サンプルに実装されているホバーのCSSがなくなってしまいますが、後で設定しますので安心してくださいね。

❖ フォルダ内のウェブページを取得する
さて、このナビゲーションこのままでもいいのですが、さらに MovableType.net の機能に合わせて改良していく必要があります。それはフォルダ対応！ウェブ
ぺージはフォルダに入れて階層構造にすることができます。
では、ナビゲーションにフォルダ名を表示したい場合の対応を考えてみましょう。確認のため管理画面の左サイドバー、ウェブページ > フォルダ > フォルダ作成
から新しいフォルダを作り、ウェブページをその中に

フォルダ内にページを用意します。

入れておきます。
フォルダの中にフォルダを置くこともできるので（ここでは最上位のフォルダ、サブフォルダと呼びます ）MovableType.net 側ですべてのフォルダ内ぺージが表示できるように設定し、HTML、CSSでホバーさせます。次ページのコードを元に、階層構造に対応できるよう作り変えていきましょう。

20

<mt:Pages><ul class="navi-list clearfix"><li><a href="<$mt:PagePermalink$>"><$mt:PageTitle$></a><ul class="navi-list__sub"><li><a href="#">サブメニュー </a></li><li><a href="#">サブメニュー </a></li><li><a href="#">サブメニュー </a></li><li><a href="#">サブメニュー </a></li>
</ul>
</li>
</ul>
</mt:Pages>▪<mt:TopLevelFolders>
現在のフォルダに関わりなく、最上位のフォルダからサブフォルダを含めたリストを表示するブロックタ
グです。<mt:TopLevelFolders></mt:TopLevelFolders>で囲んで使います。
▪<mt:SubFolders>
現在のフォルダのサブフォルダを階層化して一覧表示するブロックタグです。
▪<$mt:FolderLabel$>
フォルダの名前を表示します。
▪<$mt:SubFolderRecurse$>
そのフォルダに属するサブフォルダの<mt:SubFolders>ブロックを表示します。

これをホバーができるHTMLに組み込みます。

<ul class="navi-list clearfix"><mt:TopLevelFolders><li><a href="#"><$mt:FolderLabel$>
</a>

21

<ul class="navi-list__sub"><mt:Pages><li><a href="<$mt:PagePermalink$>"><$mt:PageTitle$>
</a>
</li>
</mt:Pages><mt:SubFolders><li class="navi-list__sub--title"><$mt:FolderLabel$></li><mt:Pages><li><a href="<$mt:PagePermalink$>"><$mt:PageTitle$>
</a>
</li>
</mt:Pages><$mt:SubFolderRecurse$></mt:SubFolders>
</ul>
</li>
</mt:TopLevelFolders></ul>

これでフォルダ名とフォルダに含まれたページが表示されました。最後に、フォルダに入っていないページを表示するための記述を追加します。

▪no_folder="1"
フォルダに属さない、トップレベルに作成されたウェブページのみを表示する、モディファイアです。
（モディファイアについては後ほど詳しく説明します。）<mt:Pages no_folder="1"><li><a href="<$mt:PagePermalink$>"><$mt:PageTitle$>
</a>
</li>
</mt:Pages>

22最終的なコードはこうなりました。
<ul class="navi-list clearfix"><mt:TopLevelFolders><li><a href="#"><$mt:FolderLabel$></a><ul class="navi-list__sub"><mt:Pages><li><a href="<$mt:PagePermalink$>"><$mt:PageTitle$>
</a>
</li>
</mt:Pages><mt:SubFolders><li class="navi-list__sub--title"><$mt:FolderLabel$></li><mt:Pages><li><a href="<$mt:PagePermalink$>"><$mt:PageTitle$>
</a>
</li>
</mt:Pages><$mt:SubFolderRecurse$></mt:SubFolders>
</ul>
</li>
</mt:TopLevelFolders><mt:Pages no_folder="1"><li><a href="<$mt:PagePermalink$>"><$mt:PageTitle$>
</a>
</li>
</mt:Pages></ul>

これで保存してみると…
フォルダ名、フォルダに入っていないページの全てを表示できました！

23

メインページを作る・その 3– 内容編❖ ニュース記事の一覧を表示させる
次はニュース記事の表示をMT化していきます。管理
画面の左サイドバー記事 >新規からニュース記事をいくつか作っておきましょう。
作ったニュース記事を一覧にしてトップページに載
せていきます。ニュース記事を表示させる場所は右の画像の通りです。ぺージ同様に、記事にもタイトル、URLを表示させるMTタグがあります。記事のタイトルを取得していきましょう。

▪<mt:Entries>
ブログ記事の一覧のためのブロックタグです。まずはこのブロックタグでブロックを囲みましょう。
▪<$mt:EntryTitle$>
ブログ記事のタイトルを表示します。
▪<$mt:EntryPermalink$>
ブログ記事を含むアーカイブの絶対URLを表示します。
▪<$mt:EntryBody$>
ブログ記事の本文を表示します。
▪<$mt:EntryExcerpt$>
ブログ記事の概要に入力した内容を表示します。指定がない場合はブログ記事の本文を、最初から 40 文
字（デフォルト値 ）表示します。（後述のモディファイアで指定します。）

上のMTタグ、<$mt:EntryExcerpt$>を使って記事本
文の冒頭数文字を表示できます。これを利用して、一覧エリアに記事の冒頭を表示させ、「続きを読む 」のようなリンクをクリックすると個別記事に飛び、全体が読めるという仕組みにしてみましょう。

24

<mt:Entries><dl class="newsArea__dateList"><dt><p class="newsArea__day">2017.02.11</p><a href="news/"><p class="newsArea__category">カテゴリ</p></a>
</dt>
<dt>
<h3 class="newsArea__title"><$mt:EntryTitle$></h3>
</dt>
<dd>
<$mt:EntryExcerpt$><p class="newsArea__link"><a href="<$mt:EntryPermalink$>">続きを読む</a>
</p>
</dd>
</dl>
</mt:Entries>

記事一覧が表示されました！！
続いて、一覧はこちらにはニュース一覧を表示させる、

news.htmlへのリンクを貼ってみましょう。前に使った、ブログのURLをホストからの相対URLで表示させる<$mt:BlogRelativeURL$>を 使 っ て、リ ン ク を 完成させます。

25

<p class="top-newsArea__newsRelease"><a href="<$mt:BlogRelativeURL$>news.html">一覧はこちら</a></p>❖ モディファイアを使おう
マニュアルや既存のテーマを見ていると、MTタグの<mt:Entries>には、記事を指定した数だけ表示する

中にlastn="1"やsort_by="title"などが付いていモディファイアや、並べる順番のルールを指定するるものがあります。これらをモディファイアといい、モディファイアが用意されています。またカスタム

設定することでMTタグの動作に細かい指定ができる

フィールドの値を使って表示したり、振り分けたりもようになります。

できます。組み合わせればテーマの幅が広がります！

例えば、先ほど指定したブログ記事の一覧を表示する

表示させてみようと思います。

今回は、エントリー記事の一覧を、決まった記事数だけ▪limit="N"limit モディファイアは、指定された条件でフィルタリングした結果を指定数を最大件数として表示します。
指定可能な値は 1-100 のみです。
メインページに最新記事 3 件だけを表示させてみます。

<mt:Entries limit="3">26記事 3 件が表示されました！さらに、sort_by=""を追加すると、ブログ記事を並び替える対象を指定できるようになります。

▪sort_by="foo"
ブログ記事を並び替える対象を指定します。

初期値が公開日順番での並び替え（authored_on ）にを参考に、好みの表示に変更してみましょう。ここでなっているため、今回はこのままで最新 3 件を表示すは、%Y.%m.%d（YYYY.mm.ddのフォーマット ）に設るようにします。最新 3 件以外にも、モディファイア

定します。

の指定で、任意の記事を出力することができます。製品サイト内にあるタグリストを参考に、カスタマイ

ブログ記事の概要に入力した内容を表示する

ズ し て み ま し ょ う。 日 付 を 表 示 す る タ グ も モ デ ィ<$mt:EntryExcerpt$>も、words="20"とモディファ

ファイアで好きな表示方法にできます。日付に関す

イアをつけることで、出力する文字数を指定できます。

（ https://movabletype.net/tags/date-formats.html ）しました。

るテンプレートタグのモディファイアリファレンス以上を設定し、最新ニュース一覧エリアはこのように

27

<mt:Entries limit="3"><dl class="newsArea__dateList"><dt><p class="newsArea__day"><$mt:Date format="%Y.%m.%d"$></p><mt:EntryCategories type="primary"><a href="<$mt:CategoryArchiveLink$>" class="category"><p class="newsArea__category"><$mt:CategoryLabel encode_html="1"$></p></a></mt:EntryCategories>
</dt>
<dt>
<h3 class="newsArea__title"><$mt:EntryTitle$></h3></dt><dd><$mt:EntryExcerpt words="20"$><p class="newsArea__link"><a href="<$mt:EntryPermalink$>">続きを読む</a>
</p>
</dd>
</dl>
</mt:Entries>❖ ウェブページ一覧を表示させる
ウェブページの一覧も表示させましょう。右の画像の箇所になります。
ウェブページの情報を表示させるには<mt:Pages></mt:Pages>で囲み、タイトルを表示させるのは<$mt:PageTitle$>…ここまで使ったMTタ
グで作れそうですね！

〜
28

<ul class="top-pagesArea__thumbnailList"><mt:Pages limit="3"><li><a href="<$mt:PagePermalink$>"><div class="top-pages__item"><h2 class="item__title"><$mt:PageTitle$></h2></div></a></li></mt:Pages></ul>

ページ 3 件と、
ページタイトルが一覧表示できました！

ページ一覧のサムネイル画像は後ほど設定します。こ<mt:Entries>同 様、<mt:Pages>も モ デ ィ フ ァ イ ア

こまでで、メインページが完成しました！

limit="N"で、3 つのみを表示させています。

29

実践編

2

ファイルマネージャを使おう

ファイルマネージャにあるファイルを表示させる
続いてファイルマネージャにアップロードした画像を表示させましょう。メインページでは、ロゴとバナーに画像ファイルを使用しています。まずは通常どおり<img>を使って画像を表示させます。画像のURLは絶対パスで指定したいので、
http://サイトのURL/images/logo.png

です。サイトURLは、MTタグで指定できますね。
<img src="<$mt:BlogRelativeURL$>images/logo.png">

先ほど設定した<h1 class="mt-h1"></h1> 内を書き換えます。<$mt:BlogRelativeURL$>のタグの中にはおしりに"/"が含まれているので重複に注意します。

<h1 class="mt-h1"><img src="<$mt:BlogRelativeURL$>images/logo.png" alt="<$mt:BlogName$>">
</h1>

同様に、
メイン画像エリアや、バナーエリアも作ってい
きます。

30

メイン画像エリア<section class="mainImage"><div class="mt-container"><img src="<$mt:BlogRelativeURL$>images/black-and-white-city-skylinebuildings.jpg" class="mainImage__img"></div></section>

バナーエリア<div class="top-bannerArea">
<ul>
<li>
<a href="リンク先アドレス"><img src="<$mt:BlogRelativeURL$>images/banner_big.png">
</a>
</li>
<li>
<a href="リンク先アドレス"><img src="<$mt:BlogRelativeURL$>images/banner_small.png">
</a>
</li>
<li>

31

<a href="リンク先アドレス"><img src="<$mt:BlogRelativeURL$>images/banner_small.png">
</a>
</li>
</ul>
</div>

画像が表示されました！
ファイルマネージャから画像を使用する際はこのように設定します。ogpイメージやfaviconも、同じ方法で表示させましょう。

32

実践編

3

モジュールの活用

テンプレート・モジュールを作って効率的に！
引き続き、ぺージに必要なものをMT化していきましょう。メインぺージにフッターを追加します。フッター
はブログ名を表示させたシンプルなつくりです。ここまでで覚えたMTタグが使えますね。

<footer class="footerArea"><div class="mt-container"><p class="footerArea_logo"><$mt:BlogName$></p></div></footer>フッターが表示されました！

33❖ テンプレート・モジュールを使う
今まで作ったフッターや、先に作ったヘッダー、ナビ

これを小さなテンプレート「テンプレート・モジュー

ゲーションなど…どのテンプレートにも共通する部分ル 」として、テンプレート内で使い回して使用するこが出てきました。それぞれに記述していくのは手間でとができます。テンプレート・モジュールをパーツ毎すし、修正が出た際には全てを書き換えなければならに管理し、それをインデックス・テンプレートや、アーないため、効率が悪いです。

カイブ・テンプレートから呼び出して使います。

呼び出しのMTタグを 1 行書けばフッターを呼び出せ

他のテンプレートと区別するため、本書ではこれ以降るので、インデックステンプレート側がすっきりしま

はテンプレート・モジュールのことを「モジュール 」とす。修正をする場合はテンプレート・モジュールを書表記します。

き換えれば全ページのフッターに反映されます。使い回せるパーツは、
どんどんテンプレート・モジュールに（モジュール化 ）しておきましょう。
❖ モジュールを作ってみよう！
では、実際にヘッダーをモジュール化してみましょう！
デザイン > テンプレートにテンプレート・モジュールの項目があり、ここから作成します。今回はヘッダーのモジュールなので、名前をheaderとつけました。モ
ジュールはたくさん作ることができるので、わかりやすい名前をつけましょう。

34

他のテンプレート同様に、編集画面から記述します。
今回はヘッダー内の内容をモジュール化するので、該当の部分をインデックス・テンプレートからコピーして持ってきましょう。
続いて、
インデックス・テンプレート側からモジュールを読み込むように書き換えます。読み込みに使うタグはこちらです。
<$mt:Include module="モジュールの名前"$>"モジュールの名前"には、作ったモジュールの名前を入れます。先ほどheaderという名前で作成したので
ここは<$mt:Include module="header"$>ですね。

先ほどと変わらずにヘッダーが表示されました！
このモジュールは他のテンプレートにも使用することになります。同じように、footerのモジュールも作っておきましょう。

35

実践編

4

MT化する

- ウェブページ、ニュースページ編

ウェブページテンプレートを作る！
❖ 準備
メインぺージと同様、
ウェブページもMT化を進めてい> インデックスぺージからコピーしておきます。また、きましょう！ウェブページはデザインの、テンプレー

CSSやファイルのリンクなど、メインページと共通しト > アーカイブ・テンプレート > ウェブページから開て 必 要 な も の も、パ ス<$mt:BlogRelativeURL$>かきます。テンプレート側の準備は、必要なヘッダーやら始まるように変えておきましょう。

フッターのモジュールをインデックス・テンプレート❖ ぺージタイトル、本文を表示させる
ウェブページにタイトルと本文を表示させましょう。

▪<$mt:PageTitle$>
ウェブページのタイトルを表示します。
▪<$mt:PageBody$>
ウェブページの本文を表示します。
▪<$mt:PageMore$>
ウェブページの「続き 」に入力した内容を表示します。

36<section class="UL-mainImage"><div class="mt-container"><h2 class="UL-mainImage__title"><i class="fa fa-file-text-o"></i><$mt:FolderLabel$></h2></div></section><main class="pages-wrap"><div class="mt-container"><h3 class="pages__title"><$mt:PageTitle$></h3><div class="pages-textArea"><$mt:PageBody$><$mt:PageMore$></div></div></main>左サイドバーからウェブページに飛んで、確認してみましょう。ウェブページのタイトルと本文が表示されました。
❖ パンくずリストを表示させる「メインページのテンプレートを作る！・その 2 」でために、パンくずリストを作ることをオススメします。

ナビゲーションを作成した際に紹介したように、ウェ

本書ではタグをご紹介しますので、詳しい解説はWeb

ブページはフォルダに入れることができます。細か版の「トフでもできる！？テーマ開発講座 」を参考に、

くフォルダ分けをすると管理はしやすいですが、サイチャレンジしてみましょう。

トの構造は複雑になってしまいます。そんなときの▪<mt:ParentFolders>
最上位のフォルダから現在のフォルダまでを繰り返して表示するブロックタグです。
▪ﬁeld:識別子="foo"
カスタムフィールドの値 foo を利用して出力するウェブページをフィルタリングできます。モディファ
イアの ﬁeld:識別子には、カスタムフィールド機能で設定した「識別子 」を使います。
今回は識別子に、folder_topを指定しています。このパンくずリストはカスタムフィールドの「フォルダのトップにする 」にチェックが入っている場合に表示する、という条件です。
サンプルにはこのカスタムフィールドを用意してありますが、詳細については後ほどP48.「カスタムフィールドを設定する 」でご紹介します。
▪<mt:Else>
条件タグの条件に合致しなかったときに、実行するブロックタグです。
今回はmt:Pagesと組み合わせて、「前述の指定した条件に一致しない場合にフォルダ名を表示する 」という使い方をしています。
詳細についてはWeb版の「mt:ifを使って振り分けをしよう！」で紹介しています。

https://developer.movabletype.net/themeguide/practice/p-01/mtif.html

37

ニュースページを作る・その 1 ­ 記事ページ編❖ ニュースページを作る！
記事ページとアーカイブ・テンプレートを使って、とnews.htmlになるインデックス・テンプレートです。

ニュースページを作ります。必要なのは記事そのものになる記事と、ニュースぺージを一覧させるために使どちらも今までの要領で進めていけば大丈夫！さっそう、
記事ページ一覧のアーカイブ・テンプレート。それ

く作っていきましょう。

❖ 記事ぺージを作る
まずは、ニュース記事そのものに使うイ ン デ ッ ク ス・テンプレートを作っていきましょう。デザイン>テン
プレート>アーカイブ・テンプレートにある、記事を編集し、必要なモジュールを置き換えておきます。
今回、ニュースページは 2 カラムで、メインカラムに必要なのは、記事の日付、カテゴリ、記事タイトル、本文、追記分。サブカラムには、各記事リストをアーカイブにしたものを置きます。イメージは右画像の通りです。
まずは記事を表示するメインカラムを作っていきま

しょう。必要になるタグは次の通りです。以前に記事の一覧を作った際に使ったMTタグも出てきますね。

▪<$mt:EntryDate$>
ブログ記事の公開日を表示します。モディファイアの指定でさまざまなオプションがつけられます。
▪<mt:EntryCategories$>
ブログ記事に指定したカテゴリの一覧のためのブロックタグです。
▪<$mt:CategoryLabel$>
カテゴリ名を表示します。
▪<$mt:CategoryArchiveLink$>
カテゴリアーカイブの URL を表示します。
▪<$mt:EntryBody$>
ブログ記事の本文を表示します。
▪<$mt:EntryMore$>
ブログ記事の続きに入力した内容を表示します。

38

これを、
記事ページになるように組み立てていきます。
ウェブページを作ったときに似ていますね！

<div class="news-mainArea"><div class="news__titleArea"><p class="news__day"><$mt:Date format="%Y.%m.%d"$></p><mt:EntryCategories type="primary"><a href="<$mt:CategoryArchiveLink$>" class="category"><p class="news__category"><$mt:CategoryLabel$>
</p>
</a>
</mt:EntryCategories><h3 class="news__title"><$mt:EntryTitle$></h3></div><div class="news-textArea"><$mt:EntryBody$><$mt:EntryMore$></div></div>

記事が表示されました！これでニュース本体のテンプ
レートが完成です。続いて、ニュースのトップページ

news.htmlのテンプレートを編集します。

39

ニュースページを作る・その 2 ­ news.html 編❖ news.htmlにニュース一覧ページを作る
続いて、news.htmlのインデックス・テンプレートを作ります。トップページでリンク先を指定した、一覧はこちらのリンクから、ページを確認することができます。まだページが表示されていませんが、記事ページと同じく、メインとサブの 2 カラム構成です。こちら
は、メインカラムに最新の記事一覧が並ぶようにします。同じものをトップページで作りましたね。
トップページのニュース部分と同じです。

<mt:Entries limit="3"><dl class="newsArea__dateList clearfix"><dt><h4 class="newsArea__title"><$mt:EntryTitle$></h4></dt><dd class="newsArea__text"><$mt:EntryExcerpt words="20"$><p class="newsArea__link"><a href="<$mt:EntryPermalink$>">続きを読む</a>
</p>
</dd>
</dl>
</mt:Entries>

記事一覧を作るのは 2 回目なので、少しレベルアップ
してみましょう。
記事を投稿した日付と、選択されたカテゴリをMTタ
グを使って取得し、表示させます。記事のサムネイル

画像も表示させましょう。
（後ほど、投稿記事に対応できるようにカスタマイズするので、ここではimages/
noimages.pngを表示させてみます。
）コードは、次のページのように書き換えました。

40

<mt:Entries limit="3"><dl class="newsArea__dateList clearfix"><dt><p class="newsArea__day"><$mt:Date format="%Y.%m.%d"$></p><p class="newsArea__category"><$mt:CategoryLabel$></p><h4 class="newsArea__title"><$mt:EntryTitle$>
</h4>
</dt>
<dd class="newsArea__text"><$mt:EntryExcerpt words="20"$><p class="newsArea__link"><a href="<$mt:EntryPermalink$>">続きを読む</a>
</p>
</dd>
<dd class="newsArea__img"><img src="<$mt:BlogRelativeURL$>images/noimage.png">
</dd>
</dl>
</mt:Entries>❖ ぺージ送り機能を作る
さらに、ぺージ送りの機能をつけましょう。ページ送

みのことです。3 件の記事を表示させるMTタグと、前りとは、現在位置のぺージには最新 3 件の記事を表示

後ページへのリンクが必要になります。

させ、それ以降は次のぺージに送る、というような仕組

41▪<mt:Entries paginate_by="N">
ページ送り等を行いたい場合、モディファイアの値に件数を指定することで、指定した数分の件数が表示されます。limit="N"との併用はできないので書き換えましょう。
▪<mt:EntriesFooter>
ブロックタグの中で、最後のブログ記事のときだけ実行するブロックタグです。
▪<mt:PaginationHasPrevious><mt:EntriesHeader> と <mt:EntriesFooter>の中で利用でき、前のページがある場合に内容を出力します。

▪<$mt:PaginationPreviousURL$>前のページの URL を出力します。存在しない場合、何も出力しません▪<mt:PaginationHasNext><mt:EntriesHeader>と<mt:EntriesFooter>の中で利用でき、次のページがある場合に内容を出力します。

▪<$mt:PaginationNextURL$>
次のページの URL を出力します。存在しない場合、何も出力しません。

<mt:Entries paginate_by="3"></mt:Entries>

さらにその中にURLを表示させるMTタグの間、</mt:Entries>の前に、<mt:EntriesFooter><$mt:PaginationPreviousURL$>、を記述します。ここは繰り返しの処理にならないので、<$mt:PaginationNextURL$>を、アンカータグの中

1 回だけ表示されます。

に入れ、完成です！

その中に、内容の表示／非表示を判断する、<mt:PaginationHasNext>、<mt:PaginationHasPrevious>を作っていきます。

<mt:Entries paginate_by="3"><dl class="newsArea__dateList clearfix"><dt><p class="newsArea__day"><$mt:Date format="%Y.%m.%d"$></p><p class="newsArea__category"><$mt:CategoryLabel$>

42

</p>
<h4 class="newsArea__title"><$mt:EntryTitle$>
</h4>
</dt>
<dd class="newsArea__text"><$mt:EntryExcerpt words="20"$><p class="newsArea__link"><a href="<$mt:EntryPermalink$>">

続きを読む
</a>
</p>
</dd>
<dd class="newsArea__img"><img src="<$mt:BlogRelativeURL$>images/noimage.png">
</dd>
</dl>
<mt:EntriesFooter><ul class="newsArea__nextArea clearfix"><mt:PaginationHasPrevious><li class="newsArea__nextArea--prev"><a href="<$mt:PaginationPreviousURL$>"><i>◀︎</i>前の 3 件</a></li></mt:PaginationHasPrevious><mt:PaginationHasNext><li class="newsArea__nextArea--next"><a href="<$mt:PaginationNextURL$>">次の 3 件<i>▶︎</i></a></li></mt:PaginationHasNext></ul></mt:EntriesFooter></mt:Entries>

記事をたくさん作って確認してみると…ぺージ送り機
能がつきました！
ニュース記事一覧は、
この次のアーカイブ・テンプレー
トにもある内容です。モジュール化して、アーカイブ・
テンプレートにも適用しましょう。

43

ニュースページを作る・その 3 ­ アーカイブ編
ここからは、
サブカラムの中、記事リストのアーカイブを作っていきます。
記事はカテゴリ別や日付別、月別などでアーカイブリ
ストを作ることができます。ローカルナビゲーションにぴったりですね。これをニュースページの左カラムに設置してみましょう！

テーマ「Stylish Corporate 」のニュース一覧ページ。左カラムにアーカ
イブリストがありますね。

❖ カテゴリ、
月別のアーカイブリストを作る
まず、作りたいアーカイブのアーカイブ・テンプレート

それでは、カテゴリ別ニュース記事リストと、月別を作っておきます。最初のテンプレートの書き換えとアーカイブを編集していきます！ニュース一覧ペー

きに用意したのはカテゴリ別記事リストと、月別記事ジを作ったときと、使うMTタグは同じです。記事はリストでした。ほかにも投稿者別や、年別などのアー

自動的にアーカイブタイプに合わせて、分類されます。

応じて、記事リストのテンプレートを、MT編集画面デしてきましょう。

カイブ・テンプレートを作ることができます。必要にnews.htmlのテンプレートから、必要なタグをコピー

ザイン > テンプレート > アーカイブ・テンプレートから、一覧の部分はモジュールにしておくとよさそうで追加しておきましょう。

す。それに加えて、記事リストの種類がわかるように<$mt:ArchiveTitle$>を使って表示させます。

▪<mt:ArchiveTitle>
ブログ記事一覧アーカイブのタイトルを表示します。表示されるタイトルは、アーカイブの種類に依存します。

44

<h3 class="newsArea__categoryName"><$mt:ArchiveTitle$></h3>

テンプレート名が表示されてちょうどよい見出しになりました。これでカテゴリ別記事リスト、月別記事リストのページが完成です！

❖記事リストをアーカイブにして表示させる
ついに、記事リストをアーカイブ形式にして表示させます。インデックス・テンプレートnews.htmlのサブ
カラムエリアを編集していきます。カテゴリ別記事リストをアーカイブ表示させるのに使えるMTタグには、以下の種類があります。

▪<mt:ArchiveList>
アーカイブの一覧を表示するためのブロックタグです。モディファイアarchive_type="archive_type_foo"の中を変えることで他アーカイブを選択できます。今回はカテゴリ別を表示させたいので、archive_

type="Category"を使います。
▪<$mt:ArchiveLink$>

ブログ記事一覧アーカイブの絶対 URL を表示します。ブログ記事一覧アーカイブへのリンクを作るときに使います。mt:ArchiveListブロックの中か、アーカイブに関連したテンプレートで使用できます。
▪<$mt:CategoryArchiveLink$>
カテゴリアーカイブのURLを表示します。
▪<mt:ArchiveListHeader><mt:ArchiveList>タグの中で、最初にだけ実行する条件タグです。
▪<mt:ArchiveListFooter><mt:Archives>タグの中で、最後にだけ実行する条件タグです▪<$mt:ArchiveCount$>
ブログ記事一覧アーカイブのブログ記事数を表示します。
▪<$mt:CategoryCount$>
カテゴリに含まれるブログ記事の件数を表示します。

45

まず、
カテゴリ別記事リストを呼び出し、その中からカテゴリ名と、そのカテゴリに含まれる記事の件数をそれぞれ取得し、表示させていきます。

<mt:ArchiveList archive_type="Category"><mt:ArchiveListHeader><h3 class="sideArea__title">カテゴリ</h3><ul class="sideArea__list"></mt:ArchiveListHeader><li><a href="<$mt:CategoryArchiveLink$>"><mt:ArchiveTitle>（<$vcmt:CategoryCount$>)
</a>
</li>
<mt:ArchiveListFooter></ul></mt:ArchiveListFooter></mt:ArchiveList>

サブカラムにカテゴリ別記事リストと、それぞれのカ
テゴリに含まれる記事の数のアーカイブが入りました。
続いて、月別記事リストも表示させていきます。

46

<mt:ArchiveList archive_type="Monthly"><mt:ArchiveListHeader><h3 class="sideArea__title">月別</h3><ul class="sideArea__list"></mt:ArchiveListHeader><li><a href="<$mt:ArchiveLink$>"><mt:ArchiveTitle>（<$mt:ArchiveCount$>)
</a>
</li>
<mt:ArchiveListFooter></ul></mt:ArchiveListFooter></mt:ArchiveList>

以上で、2 つのアーカイブが表示できました。
このほかの記事別リストがある場合も、
archive_type="archive_type_foo"の部分を変更

して表示させていきましょう。

❖ ニュースページの仕上げ
ここで作ったアーカイブをモジュールにして各ニュース記事一覧のテンプレート、記事テンプレート、news.

htmlのテンプレートのサブカラムに入れておきましょう。

news.htmlは<$mt:BlogRelativeURL$>news.htmlで表示できます。ニュースへのリンクをナビゲーショ
ンに表示させたい場合は、headerのモジュールに追加しておくのもいいですね。
これで、ニュース関連ページの作成は完了です！

ニュース関連のテンプレート全てに入れておきましょう。

47

実践編

5

カスタムフィールドを使おう

カスタムフィールドを設定する！
❖ カスタムフィールドで何ができるの？
カスタムフィールドは記事、ウェブページ、ブログ、ア
イテム、
カテゴリ、
フォルダといったシステムオブジェ
クに、「テキスト 」「URL 」「ドロップボタン 」などさま
ざまなタイプのフィールドを追加できる機能です。ブ
ログの場合は各システムオブジェクトごとに 10 個まで作成できます。
（ウェブサイトに設定する場合は 20
テーマ：「Stylish Corporate」ではチェックボックスを使って、ぺージをナビゲーションに表示するかどうかを選択できます。

個まで。
）
例えば、作成したウェブページをチェックボックスを用いてグローバルナビゲーションに表示する／しないを設定したり、画像挿入フィールドを用いてこの記事に合った画像をアップロードし、サムネイルに設定するといった使い方ができます。工夫次第で、機能豊富

なテーマが作れます。サイト運用者にとっても扱いやすいテーマになるでしょう。

画像を表示させるカスタムフィールドを作る
では、実際に作ってみましょう！今回は画像表示のカ

1.カスタムフィールド＞新規から新しくカスタ

スタムフィールドを作ります。記事の一覧にサムネイ

ムフィールドを作る。

ル画像を表示させます。カスタムフィールドから記事

2.記事テンプレートにカスタムフィールド用のMTタグを追加する。

の関連画像を表示させる手順は右の通りです。では、早速作っていきましょう！

3.記事編集画面からカスタムフィールドを確認し、画像を投稿する。

❖ 1.新しくカスタムフィールドを作る
カスタムフィールド > 新規から新しいカスタムフィー
ルドを作ります。

48

共有：ウェブサイトでカスタムフィールドを作成する場合に表示される項目です。ウェブサイト内にあるブログすべてでこのカスタムフィールドを使う場合にチェックします。ブログを作成している場合には表示されません。
システムオブジェクト：このフィールドをどこに使うか？を設定します。記事／ウェブページ／ブログ／
アイテム／カテゴリ／フォルダから選びましょう。今回は「記事 」ですね。

名前：このフィールドの名前です。フィールドのタイトルになり、編集画面の入力部分に表示される説明です。使う人がわかりやすいように入れてあげましょう。

タイプ：テキスト、
チェックボックス、画像、URLなど…フィールドのタイプを選択します。今回は画像を選択します。
必須：このフィールドへの入力を必須にする場合はチェックを入れます。
規定値：デフォルトの値を設定します。文字や正／誤の場合に入れておくとよいでしょう。画像の場合は
この項目は表示されません。

識別子：テンプレートからこのフィールドを呼び出す際に使う文字列です。半角英数で、わかりやすく付けましょう！

今回は、記事のサムネイル画像をアップロードするカ
スタムフィールドを作りたいので、このように設定しました。

❖ 2.記事テンプレートにカスタムフィールド用のMTタグを追加する。
次は、このフィールドを表示できるようにテンプレー
ト側を変更していきます。アーカイブ・テンプレートを開いて、記事一覧にある画像部分を書き換えましょう。<img>タグに先ほど付けた識別子を使います。

49▪<mt:CustomFieldAsset>
アイテム（ファイル、
画像、
ビデオ、オーディオ ）のカスタムフィールドでの値を表示するブロックタグです。identiferモディファイアでカスタムフィールドの識別子を指定して使用します。 ブロックの内部では<mt:AssetURL>などのアイテム用のタグが利用できます。
▪identifer="識別子"
指定した識別子を持つカスタムフィールドの値を利用できるようにします。

以上 2 つを組み合わせます。識別子は先ほどの
news_imagesにします。

アーカイブ・テンプレートまたは該当のモジュールの、
画像表示部分をカスタムフィールド対応に。

<dd class="newsArea__img"><img src="<mt:CustomFieldAsset identifier="news_image"><$mt:AssetThumbnailURL$></mt:CustomFieldAsset>"></dd>❖ 3.記事編集画面からカスタムフィールドを確認し、画像を投稿する
続いて、記事の編集画面を見てみましょう。先ほど作ったカスタムフィールドが表示されています！
画像を選択から、画像をアップロードして表示を確認してみます。

50

記事の横に、
アップロードした画像が表示されました。

そのためには<mt:if>を使った、振り分けが必要にな

カスタムフィールドで画像を表示させる方法はこれでります。<mt:if>の使い方、カスタムフィールドと組完了！ですが、このつくりを実際にテーマに利用する

み合わせの活用は、Web版「トフでもできる！？テー

際にはもう少しカスタマイズが必要になります。先ほマ開発」内、カスタムフィールドを設定する！（https://表示される 」という内容でした。しかし、画像が入っp-01/customﬁeld-setting.html ）で詳しく解説していていない場合はそのエリアは空っぽになってしまいま

ますので、そちらをご参照ください。

どの記述は、「カスタムフィールドに入っている画像がdeveloper.movabletype.net/themeguide/practice/

す。これを解消するには、入力が無い場合にはダミー画像を表示する、
あるいは記事内の画像を取得する、などの処理をするのがよいでしょう。

51

実践編

6

MTタグを使いこなそう

configを使う❖ conﬁgモジュールって？
デザイン＞テンプレート＞モジュール・テンプレートに、conﬁgというモジュールがあります。中を見てみると、mt:SetVarBlockを使って、変数の設定がされています。変数内にテンプレート内で何度も出てくる

カラーコードやURLをまとめることで、テンプレート
から変数名で呼び出し、管理をしやすくしているのです。

例えば、強調文字のスタイルを設定します。conﬁg内
でpointColorの変数に強調色を設定しておき、CSSから変数名で呼び出して表示できるようにしておきます。こうすると色の変更をしたい場合、conﬁg内を書き換えるだけで、同じ変数が使われている箇所の色を一括で変更できます。作った変数はCSS、htmlどちらのテンプレート内でも使用できます。色の他にも、記事の表示件数やURLなど、テーマ内で何度も出てくる

例：テーマ「Stylish Corporate 」のconﬁg「Stylish Corporate 」は文字色、サイトのメインカラー、サブカラーなどの色が指定されているのがわかります。

数値を変数に設定できます。設定次第で簡易的な編集もできるので、テンプレートカスタマイズの知識がな
いサイト運営者に渡す際にも活用できます。

❖ conﬁgモジュールを設定してみよう
変数を設定するタグは以下です。

▪<mt:Ignore>
指定した範囲について、処理を行わないブロックタグです。コメントなどに使用します。
▪<mt:SetVarBlock>
ブロックタグで囲まれた内容を、変数として値を設定します。
▪<name="name_foo">
値を代入する変数の名前を指定します。

52

続 い て、変 数 を 呼 び 出 すHTML、CSS側 に 記 述 す る
タ グ で す。 使 用 す るHTML、CSSの 最 初 にconﬁgモ
ジュールを読み込ませるのを忘れずに！

▪<$mt:Inclued module="モジュール名"$>
テンプレートモジュールや、外部ファイルを読み込むときに使うタグです。モディファイアmoduleやﬁleなどにより、
読み込む対象を指定します。
▪<$mt:Var name="var_foo"$>

mt:SetVar、mt:SetVarBlock、mt:SetVarTemplateタグで定義した変数から値を呼び出します。
使用するHTML、CSSの最初に<$mt:inclued module="モジュール名"$>で、conﬁgモジュールを読み込ませるのがポイントです。

❖ 1.conﬁgモジュールを作成し、設定する
実際にconﬁgを使い文字色を変更してみましょう。

<mt:Ignore>ポイントカラー </mt:Ignore><mt:SetVarBlock name="pointColor">FF0000</mt:SetVarBlock>デザイン > テンプレート > テンプレート・モジュールの
新しくテンプレート・モジュールを作成から、モジュールを新規作成します。名前は、わかりやすく「conﬁg 」とつけます。テンプレート内に右のように記述し、

conﬁg内に変数を設定します。

❖ 2.読み込むテンプレート側にconﬁgの読み込みと、呼び出し設定をする<$mt:Include module="config"$><p>テスト<span style="color:<$mt:Var
name="pointColor"$>;">ここを色変え</span>
テストテストテスト</p>

conﬁgモジュールを使って、文字色の変更ができました！ CSSにも同じように記述ができるので、よく使うカラーコードはまとめておくと便利です。

53

実践編

7

MT化する

- 404ページ編

404 ページを作ろう！
デザイン > テンプレート内に、システム・テンプレートがあります。システム・テンプレートでは存在しない

ページをリクエストした場合に表示される、「404 ページ 」の設定ができます。404 ページも、サイトに合わせたデザインのものに作り変えましょう！といっても、今まで使ったタグやモジュールを使うので簡単です。
ウェブページから、必要なヘッダーやフッターのモジュールをコピーし、本文は「お探しのページは見つ

何も設定がないと味気ない 404 ページに…

かりませんでした。
」と表示させます。

<body><$mt:Include module="header"$><section class="UL-mainImage"><div class="mt-container"><h2 class="UL-mainImage__title"><i class="fa fa-frown-o"></i>404
notfound</h2></div></section><main class="pages-wrap"><div class="mt-container"><div class="notfound-textArea">
お探しのページは見つかりませんでした。
</div></div></main><$mt:Include module="footer"$></body>このようになりました！ページ内できちんとリンクが貼られていればあまり見ることのないページですが、ドメインの後ろに適当な文字列を入れて、確認してみてくださいね。

54

実践編

8

テーマを書き出す・読み込む作成したテーマは書き出すことができ、書き出した

それをベースに新しいテーマを作っていくこともでき

テーマを読み込ませることで別のウェブサイト・ブロ

ますね。ついにここまで作ってきたテーマを書き出し

グに同じテーマを適用することができます。

てみましょう！

テーマを書き出す
デザイン > テーマ > 現在のテーマから書き出し をク
リックします。任意の出力ファイル名を入力し、書き出したいファイルとカスタムフィールドにチェックを入れます。書き出すをクリックするとzipダウンロー
ドがはじまります。保存して完了しましょう。

テーマを読み込む
デザイン＞テーマ＞現在のテーマから読み込むをク
リックします。テーマが入ったzipファイルをアップロードします。無事にアップロードが完了し、テーマが変更されていれば成功です。

注意
そのままテーマを読み込むと、適用前のテーマのカス
タムフィールドが残ってしまいます。そのため、適用前に以前のカスタムフィールドをすべて削除しておき
ましょう。

55

ex カスタマイズしてみよう
実践編

MTタグでサイトの設定をしよう
サイトの基本設定となる、言語設定やCanonical設

これをdescriptionに使えば、ブログの説明が表示さが で き ま す。 例 え ば、<$mt:BlogDescription$>は使ってみましょう！主なタグは、以下です。

れます。このように、基本情報の設定にもMTタグを定などの基本情報もMTタグを使って指定すること

MovableType.net 内のブログ＞設定＞全般に入力した説明を表示するタグです。

▪言語設定…<$MTBlogLanguage$>
ブログに表示する日付の言語を表示します。
▪文字コード設定…<$mt:PublishCharset$>システムで管理するブログの文字エンコードを表示します。UTF-8 固定となります。
▪Description設定…<$mt:BlogDescription$>
ブログの説明を表示します。
▪Canonical設定…<$mt:CanonicalLINK$>
インデックス・テンプレート、アーカイブ・テンプレート内で現在のぺージのリンク付きURLを返します。
▪<$mt:Link$>
インデックス・テンプレートもしくは特定のブログ記事へのリンクを出力します。モディファイア

templateやentry_idにより、リンク先を指定します。
他にも、ページ作成で使った<$mt:BlogURL$>（ブログのURLを表示 ）や、<$mt:BlogName$>（ブログ名を表示 ）が使えそうです。

56

<html lang="<$mt:BlogLanguage$>"><head><meta charset="<$mt:PublishCharset$>"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="<$mt:BlogDescription$>"><meta name="keywords" content="○○○○○○,○○○,○○○,○○○"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title><$mt:BlogName encode_html="1"$></title><link rel="shortcut icon" href="<$mt:BlogURL encode_html="1"$>images/favicon.
ico"><link rel="start" href="<$mt:BlogURL encode_html="1"$>"><link rel="alternate" type="application/atom+xml" title="Recent Entries"
href="<$mt:Link template="feed_recent"$>"><$mt:CanonicalLink$></head>他のページにも必要になりそうな部分は、適宜モジュー

metaキーワードはconﬁgにまとめて記述し、変数で呼ル化をしておくのがオススメです。ogp設定する際

び出すようにすれば、運営者が効率よくキーワードをにもURLをMTタグで指定するなどで対応していきま

変えることができますね。

しょう。

<meta name="keywords" content="<$mt:Var name="meta_keywords"$>">

Web版「トフでもできる！？テーマ開発講座 」では、SNSボタンの設置方法や、
configでのアカウント制御、表示／非表示の切り替えについて紹介しています。
SNS対応にもぜひチャレンジしてみましょう！

57

さらにMTタグの学習をしよう！
この本で基本となるテンプレートの作り方は習得でき

MTタグが理解できれば活用ブログ、マニュアルを見なました。さらに、
用途に合わせたテーマの作り方、管理がら、カスタマイズができます。また、デフォルトで用のしやすいテンプレートの仕組み、カスタムフィール

意されているテーマのテンプレートがどのような仕組

ドの有効活用などできることはたくさんあります！

みになっているのかも参考になるでしょう。

作成に必要な情報を得たいときに…

「実例や、追加機能を知りたい 」というときにMovableType.net のテンプレートをカスタマイ機能の追加情報や、利用方法を画面キャプチャ付

ズをする方向けに、マニュアルや関連記事をまときで解説！運営・構築に役立つ Tips も紹介していめています。

ます。

https://developer.movabletype.net/

https://movabletype.net/blog/「このタグ、
なんだっけ？」というときに「この場合に使うタグは？」というときにMovableType.net で利用可能な独自タグ、MTタ

実現したいことからMTタグを検索できる逆引き

グを記述例とともに一覧で掲載しています。

辞典です。

https://movabletype.net/tags/

https://movabletype.net/dict/「本の内容をWebで確認したい 」というときに技術的な問題が発生した場合は本では省略した内容や、完成版のサイトを確認でMovableType.net をご利用中の方は、テクニカル

きます。ソースのコピーもできて便利です。

サポートよりご質問いただけます。

https://developer.movabletype.net/
themeguide/

https://movabletype.net/support/
account/support.html• MovableType.net 活用ブログ• 作成者向けポータル• MTタグ逆引き辞典• タグリスト• トフでもできる！？テーマ開発• テクニカルサポート

58MovableType.net
トフでもできる!?

テーマ開発BOOK
2018 年 3 月 1 日 初版第 1 刷発行©2018 Six Apart Ltd.

企画・編集・作成：シックス・アパート株式会社
デザイン：原田沙織（シックス・アパート株式会社 ）デザイン協力：川角友太
印刷：株式会社グラフィック

発行元：シックス・アパート株式会社 https://www.sixapart.jp/〒 101- 0051

東京都千代田区神田神保町 3-17-15 ヨシダFGビル 5F
03 - 6261- 4640（代表 ）※製品に関するお問い合わせは、
お電話ではお受けしておりません。

59