2007年3月 5日

MovableType3.3のメインページ解析

MovableType3.3のメインページ・テンプレートに記述されている内容を説明します。
メインページはそのブログサイトの顔で、訪問者も最も多いページです。ソース全体を解析していますので、カスタマイズの際には、是非、参考にしてくださいね。

MovableType3.3のメインページ構造図

MovableType3.3のメインページの大まかな構造は、下の図のようになります。まずは、全体的なイメージを掴んでください。

■ 図1（MovableType3.3構造図）

　body <body class="layout-two-column-right">

#container

　#banner

　#pagebody

　#alpha

　#beta

「body」の中に「container」（赤枠）があります。
その「container」の中の上部に、blogのタイトルが入る「banner」（グレー枠）があり、下部には、記事やメニューなどが入る「pagebody」（ピンク枠）があります。
そして、「pagebody」の中の左側に、エントリーなどが入る「alpha」（緑枠）があり、右側には、サイドメニューなどが入る#bata（紺枠）があります。

実際にメインページのテンプレートを見てみると、下記の部分が上図の対応箇所になります。

＜メインページ - body部分： MovableType3.3＞

MovableType3.3のメインページ解析

さらに、各セレクタを詳しく解析していきます。まずは、ブログのタイトルなどが入っている「#banner」部分です。

■ #banner部分

　#banner （#banner-inner .pkg ）

　#banner-header　（ブログタイトル）

　#banner-description　（ブログ説明）

＜メインページ - バナー部分： MovableType3.3＞

<div id="banner">
<div id="banner-inner" class="pkg">

/* ブログタイトルの表示 */
<h1 id="banner-header">
<a href="<$MTBlogURL$>" accesskey="1">
<$MTBlogName encode_html="1"$></a></h1>

/* ブログ説明の表示 */
<h2 id="banner-description">
<$MTBlogDescription$></h2>

</div>　/* end of "banner-innerr" */
</div>　/* end of "banner" */

■ #alpha部分
次は、エントリーなどが入っている「#alpha」部分です。

　#alpha （#alpha-inner .pkg ）

　.date-header　（エントリー投稿日付）

　.entry

　.entry-header　（エントリータイトル）

　.entry-content

　.entry-body

　.entry-more-link　（続きを読む）

　.entry-tags

　.entry-tags-header　（タグ：）

　entry-tags-list

　entry-tag　（タグ）

　.entry-footer

　.post-footers　（投稿者、日時）

　.separator　（ | ）
　.permalink　（パーマリンク）

＜メインページ - 左側： MovableType3.3＞

<div id="alpha">
<div id="alpha-inner" class="pkg">

/* エントリーをリストアップ（初期設定では7日分） */
<MTEntries>

/* トラックバック用データの RDF 出力 */
<$MTEntryTrackbackData$>

/* ヘッダー表示（投稿日の重複がないようにする） */
<MTDateHeader>

/* エントリー投稿日の表示 */
<h2 class="date-header">
<$MTEntryDate format="%x"$></h2>
</MTDateHeader>

<div class="entry" id="entry-<$MTEntryID$>">

/* エントリータイトルの表示 */
<h3 class="entry-header">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>
</h3>

<div class="entry-content">
<div class="entry-body">

/* エントリー内容の表示 */
<$MTEntryBody$>

/* エントリーの追記 */
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<p class="entry-more-link">
<a href="<$MTEntryPermalink$>#more">続きを読む
"<$MTEntryTitle$>" »</a>
</p>
</MTIfNonEmpty>

/* タグの表示 */
<MTEntryIfTagged>
<div class="entry-tags">
<h4 class="entry-tags-header">タグ:</h4>
<ul class="entry-tags-list">
<MTEntryTags>
<li class="entry-tag"><a href="<$MTTagSearchLink$>"
rel="tag"><$MTTagName$></a></li>
</MTEntryTags>
</ul>
</div>
</MTEntryIfTagged>

</div> /* end of "entry-body" */
</div> /* end of "entry-content" */

/* 投稿者と投稿日付の表示 */
<p class="entry-footer">
<span class="post-footers">
<MTIfNonEmpty tag="EntryAuthorDisplayName">
投稿者: <$MTEntryAuthorLink show_email="0"$>
日時: <$MTEntryDate format="%x %X"$>
<MTElse>
日時: <$MTEntryDate format="%x %X"$>
</MTElse>
</MTIfNonEmpty>
</span>

/* パーマリンクの表示 */
<span class="separator">|</span> <a class="permalink"
href="<$MTEntryPermalink$>">パーマリンク</a>

/* コメント表示（コメント設定がオープン、または、クローズ時）*/
<MTIfCommentsActive>
| <a href="<$MTEntryPermalink$>#comments">
コメント(<$MTEntryCommentCount$>)</a>
</MTIfCommentsActive>

/* トラックバック表示（トラックバックを受け付ける場合のみ） */
<MTIfPingsActive>
| <a href="<$MTEntryPermalink$>#trackback">
トラックバック(<$MTEntryTrackbackCount$>)</a>
</MTIfPingsActive>

</p>
</div>　/* end of "entry" */
</MTEntries>
</div>　/* end of "alpha-inner" */
</div>　/* end of "alpha" */

■ #beta部分
次は、サイドメニューなどが入っている「#beta」部分です。

　#beta （#beta-inner .pkg ）

　.module-search module

　.module-header　（検索）

　.module-content

　.module-archives module

　.module-header　（最近のエントリー）

　.module-content

　.module-list

　.module-list-item

　.module-categories module

　.module-header　（カテゴリー）

　.module-content

　.module-list

　.module-list-item

　.module-archives module

　.module-header　（アーカイブ）

　.module-content

　.module-list

　.module-list-item

　.module-creative-commons module

　.module-content

　.module-powered module

　.module-content

＜メインページ - 検索部分： MovableType3.3＞

<div id="beta">
<div id="beta-inner" class="pkg">

<div class="module-search module">
<h2 class="module-header">検索</h2>

<div class="module-content">

/* 検索用CGIスクリプトの指定 */
<form method="get"
action="<$MTCGIPath$><$MTSearchScript$>">

/* 入力フィールドの指定 */
<input type="hidden" name="IncludeBlogs"
value="<$MTBlogID$>" />
<label for="search" accesskey="4">ブログを検索: </label>
<br />

/* 入力フィールドの表示 */
<input id="search" name="search" size="20" />

/* 検索ボタンの表示 */
<input type="submit" value="検索" />
</form>
</div>
</div>

＜メインページ - 最近のエントリー表示部： MovableType3.3＞

<div class="module-archives module">
<h2 class="module-header">最近のエントリー</h2>
<div class="module-content">

/* 最近のエントリー10件を表示 */
<ul class="module-list">
<MTEntries lastn="10">
<li class="module-list-item">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>
</li>
</MTEntries>
</ul>

/* ブログフィードの表示 */
<a href="<$MTBlogURL$>atom.xml">
このブログのフィードを取得</a><br />
[<a href="http://www.sixapart.jp/about/feeds">
フィードとは</a>]
</div>
</div>

＜メインページ - カテゴリー表示部： MovableType3.3＞

<MTIfArchiveTypeEnabled archive_type="Category">
<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div class="module-content">

/* トップカテゴリー階層のループ */
<MTTopLevelCategories>

/* サブカテゴリーのヘッダー表示 */
<MTSubCatIsFirst>
<ul class="module-list"></MTSubCatIsFirst>

/* カテゴリーがある場合の指定 */
<MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item">
<a href="<$MTCategoryArchiveLink$>"
title="<$MTCategoryDescription$>">
<MTCategoryLabel></a>

/* カテゴリーがない場合の指定 */
<MTElse>
<li class="module-list-item"><MTCategoryLabel>
</MTElse>
</MTIfNonZero>

<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
</MTIfArchiveTypeEnabled>

＜メインページ - アーカイブ表示部： MovableType3.3＞

<MTIfArchiveTypeEnabled archive_type="Monthly">
<div class="module-archives module">
<h2 class="module-header">
<a href="<$MTBlogURL$>archives.html">アーカイブ</a></h2>

<div class="module-content">

/* 月別アーカイブのループ */
<MTArchiveList archive_type="Monthly">

/* 月別アーカイブのタイトルを表示 */
<MTArchiveListHeader>
<ul class="module-list"></MTArchiveListHeader>
<li class="module-list-item">
<a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
<MTArchiveListFooter></ul></MTArchiveListFooter>
</MTArchiveList>

</div>
</div>
</MTIfArchiveTypeEnabled>

＜メインページ - ライセンス表示部： MovableType3.3＞

/* クリエイティブ・コモンズ・ライセンス設定の際に表示 */
<MTBlogIfCCLicense>
<div class="module-creative-commons module">
<div class="module-content">
<a href="<$MTBlogCCLicenseURL$>">
<img alt="クリエイティブ・コモンズ・ライセンス"
src="<$MTBlogCCLicenseImage$>" /></a><br />
このブログは、次のライセンスで保護されています。
<a href="<$MTBlogCCLicenseURL$>">
クリエイティブ・コモンズ・ライセンス</a>.
</div>
</div>
</MTBlogIfCCLicense>

＜メインページ - クレジット表示部： MovableType3.3＞

<div class="module-powered module">
<div class="module-content">
/* バージョンの表示、及び、ポータルサイトへのリンク */
Powered by<br />
<a href="http://www.sixapart.jp/movabletype/">
<$MTProductName version="1"$></a>

</div>
</div>

■ head部分
最後は、文頭のhead部分です。

＜メインページ - ヘッダー部分： MovableType3.3＞

/* DOCTYPEの宣言（XHTML 1.0 Transitional）*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
id="sixapart-standard">
<head>

/* 文字コードの指定 */
<meta http-equiv="Content-Type" content="text/html;
charset=<$MTPublishCharset$>" />

/* HTMLを生成したアプリケーション情報の指定 */
<meta name="generator"
content="<$MTProductName version="1"$>" />

/* スタイルシートのリンク */
<link rel="stylesheet" href="
<$MTBlogURL$>styles-site.css" type="text/css" />

/* Atomのリンク */
<link rel="alternate" type="application/atom+xml"
title="Atom" href="<$MTBlogURL$>atom.xml" />

/* RSS 2.0のリンク */
<link rel="alternate" type="application/rss+xml"
title="RSS 2.0" href="<$MTBlogURL$>index.xml" />

/* タイトル */
<title><$MTBlogName encode_html="1"$></title>

/* RSDのリンク */
<link rel="EditURI" type="application/rsd+xml"
title="RSD" href="<$MTBlogURL$>rsd.xml" />

/* クリエイティブ・コモンズ・ライセンス */
<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>

</head>

以上、MovableType3.3のメインページについて説明しました。

[関連記事]