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

2007年3月 5日

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のメインページについて説明しました。

[関連記事]

MovableType3.3のエントリーアーカイブ解析

すごく長文になりましたが、応援お願いします＾＾

トラックバック

このエントリーのトラックバックURL:

このリストは、次のエントリーを参照しています: MovableType3.3のメインページ解析:

» 初心者～中・上級者まで必見！ブログアフィリエイトに欠かせないノウハウです！ from ラバちゃん
初心者～中・上級者まで必見！ブログアフィリエイトに欠かせないノウハウです！その [続きを読む]

トラックバック時刻: 2007年3月 9日 22:29

あなたのブログには、連絡先のページを持っていますか？私はあなたに電子メールを送信したいのですが、それをが見つける問題を抱えている。私はあなたが聞くことに興味を持つかもしれないあなたのブログのためにいくつかのアイデアを持っている。いずれにせよ、偉大なサイトと私はそれが時間の経過とともに拡大することを楽しみにしています。

投稿者 payday loan online : 2012年1月12日 21:22

私のパートナーと私は絶対にあなたのブログを愛し、あなたのポストの多くを見つけることは、私が探しているものを正確にするでしょう。あなたのニーズに合わせてコンテンツを書き込むためにゲストライターを提供していますか？私はポストを生成したり、ここに関しては書き込む被験者の数を起草気にしないだろう。もう一度、素晴らしいウェブサイト！

投稿者 search engine optimization vancouver : 2012年1月13日 13:31

私はあなたがこの問題を提示している方法を愛しているし、それは確かに私に配慮するための飼料の多くを提供していません。一方、私が見たすべてのものから来る、私は基本的に人々がポイントに残るといくつかの他のニュース今はやりの石鹸の箱に着手しないでフィードバックスタックとして願っています。それでも、この素晴らしい点をありがとう、でも私は本当に全体でそれに沿って行くことができない、私はあなたの立場を大切に。

投稿者 oh canada : 2012年1月21日 13:18

コメントしてください