MovableTypeの構造

MovableTypeのスタイルシートなどを見ても、いまいち構造がよくわからないという方もいらっしゃるかと思います。そこで、MTの構造を理解するためにも、主なクラスがどのような範囲を受け持っているのか見ていきます。それぞれ色枠で囲んでいますので、イメージしやすいと思います。

主なクラスの範囲

MovableTypeのメインページの大まかな構造は、下記の図のようになります。

■ 図1（MovableType構造図）

body #container #banner 　#center 　.content 　#right

bodyの中に#container（赤枠）があります。
その #container の中の上部に、blogのタイトルが入る#banner（グレー枠）があり、下部には、記事やコメントなどが入る#center（ピンク枠）と、その右側に、サイドメニューなどが入る#right（紺枠）があります。

このような構造は、bodyという色紙の上に、#containerの色紙を貼り付け、さらにその上に、#banner, #center, #right などという色紙を貼り付けたものというような解釈をすると分かりやすいと思います。（図２）

■ 図2

body 　#container 　#banner 　　#center 　　.content 　#right

ブログをカスタマイズする場合、このような構造を把握しておくとスムーズに行うことができます。

例えば、ページ全体の背景色をカスタマイズする際に、body で「水色」の背景色を指定し、＃container で、「赤色」の背景色を指定すると、両サイドに「水色」の背景色が表示され、＃container 内には「水色」の背景色が表示されません。これは、bodyという色紙の上に、#containerという色紙が貼ってあると考えると分りやすいですね。

実際に、ページ全体の背景色を変更するカスタマイズ方法については、実際にカスタマイズをしよう～背景色の変更を参考にしてください。

以上、MovableTypの大まかな構造について説明しました。

MovableType 解析編 - 講義一覧

MovableType 解析編の講義一覧です。

	解析編 ・MovableTypeのテンプレート概要 ・MovableTypeの構造図 ・MovableTyoeのスタイルシート解析 ・MovableTypeのメインページ解析 ・MovableTypeのカテゴリー・アーカイブ解析 ・MovableTypeの個別エントリーアーカイブ解析 ・MovableTypeの日付アーカイブ解析

ブログランキングに参加中です。応援お願いします。