MovableType テンプレートの仕組み

ブログが作りたい!MovableType > MovableType テンプレートの仕組み

MovableType テンプレートの仕組み

Movable Type テンプレートの仕組み

Movable Type(16)

今回は、Movable Typeのテンプレートの仕組みを、もう少し詳しく見てみようと思います。

お話は、次の順番で進みます。

▲ページの先頭に戻る

テンプレートの仕組み

1:はじめに

(01)

記事「MovableType スタイルを変更する」でも書いたように、Movable Typeの「テンプレート」は、次の5つに分かれているようです。

  • インデックステンプレート
  • アーカイブテンプレート
  • テンプレートモジュール
  • システムテンプレート
  • ウィジェット

私もだいぶ戸惑っているのですが、Movable Type4から、より細かにモジュール化され(機能ごとにバラバラの状態)、どうにも全体が把握し難い状況にあるみたいです。

しかし、簡単なカスタマイズくらいであれば、いじくり回す箇所は、それほど多くはないようですよ。今回は、そのようなお話です。

▲ページの先頭に戻る

2:スタイル

(02)

スタイルごとに、ファイル名やテンプレートの数も違います。インストール時に適用されていたスタイルでもって、お話を進めていくことにします。

おそらく、「Minimalist Red」というスタイルです。

スタイル「Minimalist Red」

以降、読み進める場合は、「Minimalist Red」を適用しておくと、より話が分かり良いはずです。

スタイルの変更は、記事「MovableType スタイルを変更する」が参考になります。

▲ページの先頭に戻る

3:テンプレートの仕組み

(03)

「デザイン」から、「テンプレート」を選択します。([デザイン]-[テンプレート])

「デザイン」から、「テンプレート」を選択

(04)

「ブログのテンプレート」画面が表示されます。

まず、ここでもって、「ん???」という感じでした、私は。おそらく、左メニューに慣れているからだと思います。

「ブログのテンプレート」画面が表示される

(1)の箇所に、クイックフィルタとして、次のように記載されているはずです。

  • インデックステンプレート
  • アーカイブテンプレート
  • テンプレートモジュール
  • システムテンプレート
  • ウィジェット
  • バックアップされたテンプレート

また、インデックステンプレートに三角マークが付いていると思います。これは、インデックステンプレートの中身を、(2)に表示しているという意味(状態)です。

(2)には、次のように表示されているはずです。

  • Atom
  • アーカイブインデックス
  • スタイルシート
  • メインページ
  • JavaScript
  • RSD
  • RSS

テンプレートの仕組みを、一部だけ図示すると、次のようになります。

テンプレートの仕組み

他の例えばアーカイブテンプレートにしても、ご覧いただくと分かりますが、アーカイブテンプレートを構成する要素がそれぞれ含まれています。

(05)

テンプレートをカスタマイズするときは、これらのひとつひとつの要素が意味を持つわけです。

しかし、いわゆる「見た目」だけを変更したい場合は、「インデックステンプレート」の「スタイルシート」、もしくは「メインページ」に集中すれば良いようです。

「スタイルシート」と「メインページ」

▲ページの先頭に戻る

4:スタイルシートを眺める

(06)

それでは、ちょっと見てみることにしましょう。一覧の中の「スタイルシート」をクリックします。

「スタイルシート」をクリック

(07)

「スタイルシート」が表示されます。

この「Minimalist Red」というテンプレートは、CSSをimportしているようです。(外部ファイルを読み込んでいる)

「スタイルシート」が表示される

「で?」という感じがしてしまいます。

ここで、例えば、「/mt-static/themes-base/blog.css」をクリックすると、画面が切り替わって、「blog.css」の内容が表示されて、編集できるといいんですけどね。

よく分かりませんが、出来ないみたいです。(MTOSだからなのかな?)

おそらく、CSSを編集したいときは、次のどちらかで行うのではないでしょうか。

  • importを止めて「blog.css」、「screen.css」の中身を、貼り付けて、Movable Type上で編集する。
  • 「blog.css」、「screen.css」は、テキストエディタなどで編集して、ファイルアップロードでimportの指定の場所にアップする。

(08)

前のページ(ひとつ上の階層)に戻る場合は、「インデックステンプレート一覧」をクリックします。

「インデックステンプレート一覧」をクリック

▲ページの先頭に戻る

5:メインページを眺める

(09)

次に「メインページ」をクリックして、見てみることにしましょう。

「メインページ」をクリック

(10)

「メインページ」が表示されます。

ちょっと、見難いかもしれませんが、「え!?何で、こんなにコードが短いの???」というくらい短いですね。

これは、「Movable Typeのテンプレートタグ」というものによって、書かれているためです。

<$MTInclude$>タグに注目

HTMLやCSSしかご存知でない人は、訳が分からないと思うので、少しだけご説明します。

ここでは、<$MTInclude$>タグに注目してみましょう。このテンプレートでは、次のように、3つ表示されているはずです。

  • <$MTInclude module="ヘッダー"$>
  • <$MTInclude module="ブログ記事の概要"$>
  • <$MTInclude module="フッター"$>

(11)

ふと右側に目をやると、「インクルードモジュール」として、同じ項目が3つ表示されているのが分かるはずです。

試しに、「ヘッダー」をクリックしてみましょう。

「ヘッダー」をクリック

(12)

「ヘッダー」が表示されます。

コードを見ると、<html>タグや、<head>タグなど、見慣れたタグを確認できるはずです。

「ヘッダー」が表示される

(13)

さて、「ヘッダー」自体は、どこにあるのかと言えば、「テンプレートモジュール」にあります。

「メインページ」へ、include(含む)させているわけです。

「メインページ」へ、includeさせている

これで、だいたいの構造が、ご理解いただけたのではないかしら。

(14)

テンプレートの仕組みが分かると、あと問題になるのが、次の3つです。

(X)HTML、CSSは、別途勉強していただくとして、「Movable Typeテンプレートタグ」については、使用されているタグが右側に表示されて、SixApartさんのサイトのドキュメントにリンクされています。

コードを見ていて、分からないときは、クリックして見てみれば、たいていは解決するはずです。

ドキュメントリンク

これで全体的な仕組みと、カスタマイズするときの場所などがご理解いただけたのではないでしょうか・・・ややこしいよね。

▲ページの先頭に戻る

次回予告

次回は、休載に入るので未定です。(「ブログ休載のご連絡」)

▲ページの先頭に戻る

関連記事

Movable Typeに関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2008/07/04 更新日:2008/07/04

« 「MovableType 画像をアップロードする方法」|

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

mt

おはようございます!
ものすごい自分が躓いているところのお話だったので
(躓きっぱなしやないか・・・)
実際ローカルのMTと、サーバーのMTを開きつつ読みました。
(サーバーのMTはさっきテンプレに戻してきました。テンプレから頑張る!)


css編集なのですが、自分全然使いこなしていないから
たぶん、なんですけどサーバーの方でもいきなり編集とかは出来なかったです。
前、自分がやった時は、エディタでcssを書いてからコピーして
MTのcssに貼り付けた気がする。


インクルードモジュールの存在、今知りました。
こんなのがあるんですね。ここから編集できたりもするのかな?


というか・・・前の自分のやり方ってもしかして間違ってたのかしらん^^;
いやはやMTむずかしい。
KumaCrowさんのMT記事熟読して再挑戦したいと思います!


今日でお休みに入りますね。
正直、今コメント欄あって安心しました。
KumaCrowさんがやりたい事、全部出来る様に応援してます。
お休み期間中、そういった開発は出来るのですか?
それなら、復活した時に超期待です。
あ、でもネット接続が出来ないならパソ子から離れるのかなあ。


自分も頑張ります!
いろいろな新しい世界をありがとうございます。
またお話できるのが楽しみです。




日本一のクリエータ

ひろこさん、こんにちは。
いつもコメントありがとうございます。

あら、CSSは、いきなり編集って出来ないのかしら。
うーん・・・こういう情報がもうひとつ見つからないのよねーん。

この辺の手順さえ固まれば、あとは変数とか覚えればいいだけだし、
粛々と進められると思うんですけどね。

ややこしや~♪ややこしや~♪

インクルードモジュールは、ここで編集できるのではないかしら。
・・・と申しましょうか、ブラウザ上で更新できなかったら、
ブログツールだのCMSだのとは、よう言わんような気がするんだな。

構造も素直に木構造になっていると分かりやすいんだけどなぁ。
図を付けても、すごい説明を書くのが難しかったです。


本日より、お休みをいただきます。
コメント欄は、今日いっぱい開けておいて、閉めようと思います。
どうやって閉めるのでしょうねー。

お休み期間中は、ネットに接続できないので、
開発とかは、あまり進まないような気がします。

ネットの情報への依存度は高いものなぁ。
とりあえず、出来ることを出来るだけ頑張ってみます。

私も、ひろこさんが日本一のクリエータになるように、
応援しています!(・▽・)

こちらこそ、ありがとうございました。
また、お会いできる日を楽しみにしています。

最後^^;

こんばんは!
最後にもう一回だけ書き込みさせて下さい。
まとめて頂いたのに申し訳ないです。


MTの情報は少ない。自分もそう思います。
だからKumaCrowさんの記事はかなり貴重に思います。
初めての人(自分)でも、本当にわかりやすかったです!
でも書かれるのとても苦労された様で、本当にお疲れ様でした。
ありがたく大切に、情報を利用させて頂きたいと思います。


コメント欄は、たぶんブログ設定で閉じたりできるんじゃないかな?
おう、ネットに接続出来ないとは辛いですね。
うーん大変だ。
自分ならweb系の雑誌とか本とか買いあさっちゃうかも^^;


さみしくなるなあ!
でも、また会えるのならさみしさも半減です。
こちらこそ、またお話できるのを楽しみにしています^^
ありがとうございました!

MT4

ひろこさん、こんばんは。
最後コメントありがとうございます。

そうなんですよね。MTの情報って本当に少ないです。
MT4となると、小粋空間さん以外には、思い浮かばないです。

情報がお金になるから、セーブする人も多いのかしら。


いえいえ、何だか恩着せがましい書き方をしてしまって、
すみません。

私の画像の使い方が、ヘタやったなぁ~というお話です。

おそらく、ポイントだけ、もっと効果的に使った方が、
見ている人も、見やすかったのではないかと思います。

お役に立てたなら、何よりでございます。


コメント欄は、承認制にしておくと、
ずっと承認待ちになるしなぁ。
入力フォームを削っておこうかと思います。


そうなんです。
ネットに接続できなくなるので、ピンチです。
人生いろいろあるものですなぁ。

それでは、またお会いできる日を楽しみにしております。
(*´∀`)人(´∀`*) chao!

ありがとうございます!

MT勉強しているところなのですが、


どの本やブログを読んでも、


自分の今の実力と同じくらいの人に向けて書いているのがなかったので、しっくりこなかったのですが、


このブログを読んで、ずっと気になってた事が、すんなりわかった気がします!


ありがとうございました!

MTはややこしい

清水さん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

ですねー。

もともと、MTの仕組みが分かり難いからなのだと思います。
(ゆえに説明がややこしくならざるをえない)

私もネットや本で情報を探しましたが、
MTに関する分かりやすい情報って少ない感じがしました。

小粋空間さんも、藤本さんのところも、

 →http://www.koikikukan.com/
 →http://www.h-fj.com/blog/

ある程度分かってからでないと、
なかなか理解するのは厳しかったものなぁ。

あ、「Movable Type 備忘録」さんなんかも、
良い情報がございますよ。

 →http://bizcaz.com/

すでに、ご存知かもしれませんが、
さらなるスキルアップのため訪れてみてはいかがでしょうか。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/383-d06db352
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて