1. テンプレート・カスタマイズについて学
ぶPronet勉強会
シックス・アパート株式会社
⻑内 毅志

2. 自己紹介 : ⻑内毅志
2011年よりMovable Type製品企画マネージャー
twitter: Nick_smallworld
blog: smallworld.west-tokyo.com

3. アジェンダ
• 最初に
– Movable Typeの特徴
– テンプレートとは
– ウェブサイトとブログの違い
• Movable Typeのテンプレート構造
• テンプレートの種類
• 空のテンプレートを変えてみる
• 簡単な条件分岐
• テーマとは?
• テーマとテンプレート

4. Typeの特徴
Movable Type の特徴
• 10年以上利用されているブログ・CMS(通称MT)
• MTタグと呼ばれるタグの組み合わせでロジック生成
• テンプレートとDBが完全に分離している(MVCライク)
• プラグインで拡張可能
• どんなコードも生成可能

5. MTタグによるhtml生成
MTタグによるhtml生成
タグによる html
再新10件のブログ記事をリンク付きで生成
<ul>
<MT:Entries limit="10">
<li><a href="<MT:EntryPermalink>"><MT:EntryTitle></a></li>
</MT:Entries>
</ul>
参考リンク2：
https://github.com/movabletype/Documentation/wiki/J
apanese-mtml-guide

6. テンプレートとは
• Movable Typeのデータベースに保存されている各種の
データを、htmlとして出力するための仕組み

7. DBのオブジェクトをタグで出力
DBのオブジェクトをタグで出力
<MTEntryTitle>
<MTEntryBody>
<MTEntryMore>

8. テンプレート
テンプレートの実際

12. ウェブサイトとブログの違い
• ウェブサイト…
いわゆる「ウェブサイト」「ホームページ」全体を管理するた
めの器
• ブログ…
ウェブサイト(ホームページ)の中にある、更新頻度の高いコン
テンツを管理するための器。
「ブログ」「ニュースリリース」「IR情報」
「新製品紹介」など
参考リンク3：
http://www.movabletype.jp/documentation/mt5/websites/

14. ウェブページとブログ記事の違い
• ブログ記事…時間の経過とともに蓄積されるページ
例:日記、ニュースリリースなど
• ウェブページ…時間の経過と関係なく、階層構造に従い
情報を伝えるためのページ
例:会社概要、組織図、会社地図など
参考リンク4：
http://www.movabletype.jp/documentation/mt5/compose/

18. Typeのテンプレート構造
Movable Type のテンプレート構造
• インデックステンプレート
• アーカイブテンプレート
• テンプレートモジュール
• システムテンプレート
• ウィジェット
参考リンク5：
http://www.movabletype.jp/documentation/designer/temp
late-types.html

19. インデックステンプレート
• ブログ・ウェブサイト全体に関わるファイルを扱うテン
プレート
• サイトに一つしか存在しないファイルを扱う事が多い
例:CSS, JavaScript, トップページなど

20. アーカイブテンプレート
• 更新ごとに増加するデータページをまとめるテンプレー
ト。
• 出力ルールを設定できる(カテゴリごとに一覧ページを
作る、月毎にページをまとめるなど)
• 1テンプレートで複数の種類のファイルを出力できる

21. テンプレートモジュール
• 様々なテンプレートで共通して使う、部品のためのテン
プレート
• ヘッダーやフッターなど、全ページ共通で使用する場合
に使う

22. システムテンプレート
• コメントのプレビューや検索画面など、特定の画面のデ
ザインを設定するためのテンプレート。
• MTのインタラクティブページを管理する

23. ウィジェット
• サイドバーなどで利用するコンテンツを細かく部品化し
、管理画面上でドラッグ・アンド・ドロップして管理で
きるもの。
• テンプレートモジュール以上に、細かいパーツを管理
• 昔はブログパーツなどによく使われていました

24. ハンズオン
バナーヘッダー
サイドバー
バナーフッター
バナーフッター

25. 構造

26. 課題1
課題 1
• 新しいウェブページを作成、更新してみる

27. 課題2
課題 2
• インデックスページの文言を変えてみる

28. 課題3
課題 3
• 全部のウェブページのタイトルに色をつける

29. 課題4
課題 4
• サイドバーの見出し「ウェブページ」を別な文言に変え
る

30. 課題5
課題 5
• インデックスページの場合、サイトロゴ文字の下に
「これはインデックスページです」
ウェブページの場合、サイトロゴ文字の下に
「これはウェブページです」
という文字を、条件分岐を利用して入れる
参考リンク6：
http://www.movabletype.jp/blog/customize_conditional_01.html
参考リンク7:
http://www.movabletype.jp/documentation/designer/archive-
template-variable.html

31. 課題6
課題 6
• インデックスページの場合はサイドメニューの位置を左
に、ウェブページの場合はサイドメニューの位置を右の
ままにする
• ヒント：スタイルシートのclassを見ながら、bodyの指
定を変える

32. 課題6
課題 6 -1
• インデックスページ、ウェブページでレイアウトを変え
る方法を、条件分岐を使って実現する

33. 課題7
課題 7
• @topタグがついたページのみ、トップページにタイト
ルとリンクを表示してみる
参考リンク8：
http://www.movabletype.jp/documentation/mt5/compose/edit.html
#edit-privatemode
参考リンク9:
http://www.movabletype.jp/blog/mtddc2011_special_03.html

34. SPECIAL
• 今回カスタマイズしたテーマファイルを、ダウンロード
してみる

35. SPECIAL2
• ウェブページプレビューの時に
「これはプレビューです」という表示を、ページ内に
表示する。