解析編：ブログ別！作成・カスタマイズ講座

2005年8月 4日

MovableTypeの個別エントリーアーカイブ解析

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

MovableTypeのカテゴリー・アーカイブに記述されている内容を説明します。ソース全体を解析していますので、カスタマイズの際には、是非、参考にしてくださいね。

MovableTypeの個別エントリーアーカイブ解析

＜個別エントリー - ヘッダー部分： MovableType3.17＞

/* 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">
<head>

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

/* HTMLを生成したアプリケーション情報の指定 */
<meta name="generator"
content="http://www.movabletype.org/" />

/* タイトル【ブログタイトル: 記事タイトル】 */
<title><$MTBlogName encode_html="1"$>: <$MTEntryTitle$></title>

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

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

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

/* トップページのリンク */
<link rel="start" href="<$MTBlogURL$>" title="Home" />

/* 前の記事のリンク */
<MTEntryPrevious>
<link rel="prev" href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>" />
</MTEntryPrevious>

/* 次の記事のリンク */
<MTEntryNext>
<link rel="next" href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>" />
</MTEntryNext>

/* "Remember Me"モジュールの読み込み */
<MTInclude module="Remember Me">

/* エントリーのトラックバック用RDF　*/
<$MTEntryTrackbackData$>

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

</head>

<body>
　（別記）
</body>
</html>

＜個別エントリー - バナー部分： MovableType3.17＞

<div id="container">

<div id="banner">

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

/* ブログ説明の表示 */
<h2><$MTBlogDescription$></h2>
</div>

＜個別エントリー - エントリー部分： MovableType3.17＞

<div class="content">

/* <前の記事> | メイン | <次の記事> */
<p align="right">
<MTEntryPrevious>
<a href="<$MTEntryPermalink$>">«
<$MTEntryTitle$></a> |
</MTEntryPrevious>
<a href="<$MTBlogURL$>">メイン</a>
<MTEntryNext>
| <a href="<$MTEntryPermalink$>"><$MTEntryTitle$>
»</a>
</MTEntryNext>
</p>

/* エントリー投稿日付 */
<h2><$MTEntryDate format="%x"$></h2>

/* エントリータイトル */
<h3><$MTEntryTitle$></h3>

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

/* エントリーの追記内容 */
<div id="a<$MTEntryID pad="1"$>more"><div id="more">
<$MTEntryMore$>
</div></div>

/* 投稿者、投稿日付 */
<p class="posted">投稿者 <$MTEntryAuthor$> :
<$MTEntryDate$></p>

＜個別エントリー - トラックバック部分： MovableType3.17＞

/* トラックバックを受けつける設定の場合、以下を表示 */
<MTEntryIfAllowPings>

/* トラックバック */
<h2 id="trackbacks">トラックバック</h2>

/* トラックバックURL */
<p class="techstuff">このエントリーのトラックバックURL:
<br /><$MTEntryTrackbackLink$></p>

/* エントリーのURL */
<MTIfNonZero tag="MTEntryTrackbackCount">
<p>このリストは、次のエントリーを参照しています:
<a href="<$MTEntryPermalink$>">
<$MTEntryTitle$></a>:</p>

/* 送られてきたトラックバックのタイトル、内容、時刻表示 */
<MTPings>
<p id="p<$MTPingID$>">
» <a href="<$MTPingURL$>"><$MTPingTitle$></a>
from <$MTPingBlogName$><br />
<$MTPingExcerpt$>
<a href="<$MTPingURL$>">[続きを読む]</a>
</p>
<p class="posted">トラックバック時刻: <$MTPingDate$></p>
</MTPings>
</MTIfNonZero>
</MTEntryIfAllowPings>

＜個別エントリー - コメント部分： MovableType3.17＞

/* コメントを受けつける設定の場合、以下を表示 */
<MTEntryIfAllowComments>

/* コメント */
<h2 id="comments">コメント</h2>

/* コメント内容の表示 */
<MTComments>
<div id="c<$MTCommentID$>">
<$MTCommentBody$>
</div>
<p class="posted">投稿者
<$MTCommentAuthorLink default_name=
"Anonymous" spam_protect="1"$>
<MTCommentAuthorIdentity> : <$MTCommentDate$></p>
</MTComments>

/* コメントを受けつける設定が「open」の場合 */
<MTEntryIfCommentsOpen>

/* コメントを受けつける設定の場合 */
<MTIfCommentsAllowed>

<h2>コメントしてください</h2>

<MTIfRegistrationRequired>

/* TypeKey認証が必要な場合 */
<MTIfNonEmpty tag="MTTypeKeyToken">
<div id="thanks">
<p>サイン・インを確認しました、

<script type="text/javascript"src="<MTCGIPath>
<MTCommentScript>?__mode=cmtr_name_js"></script>
<script>document.write(commenter_name);</script>.
さん。コメントしてください。
(<a href="<$MTRemoteSignOutLink static="1"$>">
サイン・アウト</a>)</p>

(いままで、ここでコメントしたとがないときは、コメントを表示する前にこのウェブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

<form method="post"
action="<$MTCGIPath$><$MTCommentScript$>"
name="comments_form"
onsubmit="if (this.bakecookie[0].checked)
rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id"
value="<$MTEntryID$>" />

/* 情報の登録 */
<p><label for="url">URL:</label><br />
<input tabindex="1" type="text" name="url" id="url" />
情報を登録する?
<input type="radio" id="remember"
name="bakecookie"
onclick="rememberMe(this.form)" />
<label for="remember">はい</label>
<input type="radio" id="forget"
name="bakecookie" onclick="forgetMe(this.form)"
value="Forget Info" style="margin-left: 15px;" />
<label for="forget">いいえ</label>
<br style="clear: both;" />
</p>

/* コメント欄 */
<p><label for="text">コメント:</label><br />
<textarea tabindex="2" id="text" name="text" rows="10" cols="50"></textarea></p>

<div align="center">

/* 確認ボタン、投稿ボタン */
<input type="submit" tabindex="3"
name="preview" value=" 確認 " />
<input style="font-weight: bold;" tabindex="4"
type="submit" name="post"
value=" 投稿 " />
</div>
</form>

</div>

<script language="javascript" type="text/javascript">

</script>

/* TypeKeyトークンが未設定の場合 */
<MTElse>
コメント登録機能を利用するには、TypeKey トークンを設定してください。
</MTElse>

</MTIfNonEmpty>

/* TypeKey認証が不要の場合 */
<MTElse>
<MTTemplateNote value="Case of comments not required">

/* TypeKey認証が必要な場合 */
<MTIfNonEmpty tag="MTTypeKeyToken">

<script type="text/javascript"
src="<MTCGIPath>
<MTCommentScript>?__mode=cmtr_name_js"></script>
<script language="javascript" type="text/javascript">


</script>
</MTIfNonEmpty>

<form method="post"
action="<$MTCGIPath$><$MTCommentScript$>"
name="comments_form"
onsubmit="if (this.bakecookie[0].checked)
rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />

<div id="name_email">

/* 名前欄 */
<p><label for="author">名前:</label><br />
<input tabindex="1" id="author" name="author" /></p>

/* メールアドレス欄 */
<p><label for="email">メールアドレス:</label><br />
<input tabindex="2" id="email" name="email" /></p>
</div>

/* TypeKey認証が必要な場合 */
<MTIfNonEmpty tag="MTTypeKeyToken">
<script language="javascript" type="text/javascript">


</script>
</MTIfNonEmpty>

/* URL欄 */
<p><label for="url">URL:</label><br />
<input tabindex="3" type="text" name="url" id="url" />

/* 情報の登録欄 */
保存しますか?
<input type="radio" id="remember"
onclick="rememberMe(this.form)"
name="bakecookie" />
<label for="remember">はい</label>
<input type="radio" id="forget"
name="bakecookie" onclick="forgetMe(this.form)"
value="Forget Info" style="margin-left: 15px;" />
<label for="forget">いいえ</label>
<br style="clear: both;" />
</p>

/* コメント欄 */
<p><label for="text">コメント:</label>
<MTIfAllowCommentHTML>
(書式を変更するような一部のHTMLタグを使うことができます)
</MTIfAllowCommentHTML><br/>
<textarea tabindex="4" id="text" name="text"
rows="10" cols="50"></textarea></p>

<div align="center">

/* 確認ボタン、投稿ボタン */
<input type="submit" name="preview" tabindex="5"
value=" 確認 " />
<input style="font-weight: bold;" type="submit"
name="post" tabindex="6" value=" 投稿 " />
</div>
</form>

</MTElse>
</MTIfRegistrationRequired>
</MTIfCommentsAllowed>

/* クッキーの取得 */
<script type="text/javascript" language="javascript">

</script>
</MTEntryIfCommentsOpen>

</MTEntryIfAllowComments>

</div> /* end of "content" */
</div> /* end of "container" */

以上、MovableTypeの個別エントリー・アーカイブについて説明しました。

MovableType 解析編 - 講義一覧

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

　解析編

2005年7月26日

MovableTypeのカテゴリー・アーカイブ解析

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

MovableTypeのカテゴリー・アーカイブに記述されている内容を説明します。ソース全体を解析していますので、カスタマイズの際には、是非、参考にしてくださいね。

MovableTypeのカテゴリー・アーカイブ解析

＜カテゴリー・アーカイブ - ヘッダー部分： MovableType3.17＞

/* 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">
<head>

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

/* HTMLを生成したアプリケーション情報の指定 */
<meta name="generator"
content="http://www.movabletype.org/" />

/* タイトル【ブログタイトル:カテゴリータイトルアーカイブ】 */
<title><$MTBlogName encode_html="1"$>
: <$MTArchiveTitle$> アーカイブ</title>

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

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

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

</head>

<body>
　（別記）
</body>
</html>

＜カテゴリー・アーカイブ - バナー部分： MovableType3.17＞

<div id="container">

<div id="banner">

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

/* ブログ説明の表示 */
<h2><$MTBlogDescription$></h2>
</div>

＜カテゴリー・アーカイブ - メイン部分： MovableType3.17＞

<div class="content">

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

/* RDFデータの挿入（クイックポストなどに利用） */
<$MTEntryTrackbackData$>

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

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

/* エントリータイトルの表示 */
<h3 id="a<$MTEntryID pad="1"$>">
<$MTEntryTitle$></h3>

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

/* エントリーの追記 */
<MTEntryIfExtended>
<$MTEntryMore$>
</MTEntryIfExtended>

/* 投稿者と投稿日付の表示 */
<p class="posted">投稿者 <$MTEntryAuthor$> :
<a href="<$MTEntryPermalink valid_html="1"$>">
<$MTEntryDate format="%X"$></a>

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

/* トラックバック数表示（トラックバックを受け付ける場合） */
<MTEntryIfAllowPings>
| <a href="<$MTEntryPermalink
archive_type="Individual"$>#trackbacks">
トラックバック (<$MTEntryTrackbackCount$>)</a>
</MTEntryIfAllowPings>

</p>
</MTEntries>
</div> /* end of "content" */
</div> /* end of "container" */

以上、MovableTypeのカテゴリー・アーカイブについて説明しました。

MovableType 解析編 - 講義一覧

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

　解析編

2005年7月22日

MovableTypeのメインページ解析

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

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

MovableTypeのメインページ解析

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

/* 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">
<head>

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

/* HTMLを生成したアプリケーション情報の指定 */
<meta name="generator"
content="http://www.movabletype.org/" />

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

/* スタイルシートのリンク */
<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 1.0のリンク */
<link rel="alternate" type="application/rss+xml"
title="RSS 1.0" href="<$MTBlogURL$>index.rdf" />

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

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

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

</head>

<body>
　（別記）
</body>
</html>

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

<div id="container">

<div id="banner">

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

/* ブログ説明の表示 */
<h2><$MTBlogDescription$></h2>
</div>

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

<div id="center">
<div class="content">

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

/* RDFデータの挿入（クイックポストなどに利用） */
<$MTEntryTrackbackData$>

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

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

/* エントリータイトルの表示 */
<h3 id="a<$MTEntryID pad="1"$>">
<$MTEntryTitle$></h3>

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

/* エントリーの追記 */
<MTEntryIfExtended>

/* 「続きを読む」のリンク表示*/
<p class="extended">
<a href="<$MTEntryPermalink$>#more">
続きを読む "<$MTEntryTitle$>"
</a></p>
</MTEntryIfExtended>

/* 投稿者と投稿日付の表示 */
<p class="posted">投稿者 <$MTEntryAuthor$> :
<a href="<$MTEntryPermalink valid_html="1"$>">
<$MTEntryDate format="%X"$></a>

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

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

</p>
</MTEntries>
</div> /* end of "content" */
</div> /* end of "center" */

＜メインページ - 右側（カレンダー）： MovableType3.17＞

<div id="right">
<div class="sidebar">

<div id="calendar">

/* HTMLのテーブル指定 */
<table summary="投稿されたエントリーへのリンク付き
月間カレンダー">
/* カレンダー年月の表示 */
<caption><$MTDate format="%B %Y"$></caption>

<tr>
<th abbr="日曜日">日</th>
<th abbr="月曜日">月</th>
<th abbr="火曜日">火</th>
<th abbr="水曜日">水</th>
<th abbr="木曜日">木</th>
<th abbr="金曜日">金</th>
<th abbr="土曜日">土</th>
</tr>

/* カレンダー日付の表示 */
<MTCalendar>
<MTCalendarWeekHeader>
<tr></MTCalendarWeekHeader>
<td><MTCalendarIfEntries><MTEntries lastn="1">
<a href="<$MTEntryPermalink$>">
<$MTCalendarDay$></a>
</MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank> </MTCalendarIfBlank></td>
<MTCalendarWeekFooter></tr>
</MTCalendarWeekFooter>
</MTCalendar>
</table>
</div>

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

<h2>検索</h2>

<div class="link-note">

/* 検索用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" /><br />

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

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

<div id="categories">
<h2>カテゴリー</h2>

/* サブカテゴリーのループ */
<MTSubCategories>

/* サブカテゴリーのヘッダー表示 */
<MTSubCatIsFirst><ul></MTSubCatIsFirst>

/* カテゴリーがある場合の指定 */
<MTIfNonZero tag="MTCategoryCount">

/* カテゴリーの説明を表示 */
<li><a href="<$MTCategoryArchiveLink$>" title=
"<$MTCategoryDescription$>"><MTCategoryLabel></a>

/* カテゴリーがない場合の指定 */
<MTElse>

/* カテゴリーラベルの名前表示 */
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>

/* サブカテゴリー表示 */
<MTSubCatsRecurse max_depth="3">
</li>

/* サブカテゴリーのフッター表示 */
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>

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

<h2>アーカイブ</h2>

<ul>
/* 月別アーカイブのループ */
<MTArchiveList archive_type="Monthly">
/* 月別アーカイブのタイトルを表示 */
<li><a href="<$MTArchiveLink$>">
<$MTArchiveTitle$></a></li>
</MTArchiveList>
</ul>

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

<h2>最近のエントリー</h2>

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

＜メインページ - RSS（XML）表示部： MovableType3.17＞

<div class="link-note">

/* RSSファイルへのリンク表示 */
<a href="<$MTBlogURL$>index.rdf">
Syndicate this site (XML)</a>
</div>

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

/* クリエイティブ・コモンズ・ライセンス設定の際に表示 */
<MTBlogIfCCLicense>
<div class="link-note">
<a href="<$MTBlogCCLicenseURL$>">
<img alt="Creative Commons License"
src="<$MTBlogCCLicenseImage$>" /></a><br />
このウェブログのライセンス:
<a href="<$MTBlogCCLicenseURL$>">
Creative Commons License</a>.
</div>
</MTBlogIfCCLicense>

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

<div id="powered">

/* バージョンの表示、及び、ポータルサイトへのリンク */
Powered by<br />
<a href="http://www.movabletype.jp">
Movable Type <$MTVersion$></a><br />
</div>

</div> /* end of "sidebar" */
</div> /* end of "right" */

/* 回り込みの解除 */
<div style="clear: both;">

/* nonbreaking space（改行を行わない空白）の指定 */
 

</div>

</div> /* end of "container" */

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

MovableType 解析編 - 講義一覧

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

　解析編

パーマリンク | コメント (2) | トラックバック (1)
はてなブックマークに追加 | |

2005年7月21日

MovableTypeのスタイルシート解析

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

MovableTypeのスタイルシートに記述されている内容を説明します。
記述内容を理解し、各クラスやセレクタなどがブログのどの部分に対応しているのか把握すると、カスタマイズもしやすくなります。
カスタマイズの際には、是非参考にしてくださいね。

MovableTypeのスタイルシート解析

＜スタイルシート：MovableType3.17＞

body {
margin: 0px 0px 20px 0px;
background-color: #8FABBE;
text-align: center;
}

a {
text-decoration: underline;
}

a:link {
color: #8FABBE;
}

a:visited {
color: #8FABBE;
}

a:active {
color: #8FABBE;
}

a:hover {
color: #006699;
}

h1, h2, h3 {
margin: 0px;
padding: 0px;
font-weight: normal;
}

#container {

line-height: 140%;
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;
width: 700px;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
}

#banner {
font-family: Verdana, Arial, sans-serif;
color: #FFFFFF;
background-color: #999999;
text-align: left;
padding: 15px;
border-bottom: 1px solid #FFFFFF;
height: 39px;
}

#banner-img {

display: none;
}

#banner a {

color: #FFFFFF;
text-decoration: none;
}

#banner h1 {

font-size: xx-large;
}

#banner h2 {

font-size: small;
}

#center {
float: left;
width: 500px;
overflow: hidden;
}

.content {
padding: 15px 15px 5px 15px;
background-color: #FFFFFF;
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
}

#right {
float: left;
width: 200px;
background-color: #FFFFFF;
overflow: hidden;
}

.content p {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
font-weight: normal;
line-height: 150%;
text-align: left;
margin-bottom: 10px;
}

.content blockquote {
line-height: 150%;
}

.content li {
line-height: 150%;
}

.content h2 {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: left;
font-weight: bold;
margin-bottom: 10px;
}

.content h3 {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: small;
text-align: left;
font-weight: bold;
margin-bottom: 10px;
}

.content p.posted {
color: #999999;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
border-top: 1px solid #999999;
text-align: left;
margin-bottom: 25px;
line-height: normal;
padding: 3px;
}

.sidebar {
padding: 15px;
}

#calendar {
line-height: 140%;
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
padding: 2px;
text-align: center;
margin-bottom: 30px;
}

#calendar table {
padding: 2px;
border-collapse: collapse;
border: 0px;
width: 100%;
}

#calendar caption {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .3em;
}

#calendar th {
text-align: center;
font-weight: normal;
}

#calendar td {
text-align: center;
}

.sidebar h2 {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .3em;
}

.sidebar ul {
padding-left: 0px;
margin: 0px;
margin-bottom: 30px;
}

.sidebar ul ul {
margin-bottom: 0px;
}

.sidebar #categories ul {
padding-left: 15px;
}

.sidebar li {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: left;
line-height: 150%;
margin-top: 10px;
list-style-type: none;
}

.sidebar #categories li {
list-style-type: circle;
}

.sidebar img {
border: 3px solid #FFFFFF;
}

.photo {
text-align: left;
margin-bottom: 20px;
}

.link-note {

font-family: Verdana, Arial, sans-serif;
font-size: x-small;
line-height: 150%;
text-align: left;
padding: 2px;
margin-bottom: 15px;
}

#powered {
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
line-height: 150%;
text-align: left;
color: #666666;
margin-top: 50px;
}

#comment-data {
float: left;
width: 180px;
padding-right: 15px;
margin-right: 15px;
text-align: left;
border-right: 1px dotted #BBB;
}

textarea[id="comment-text"] {
width: 80%;
}

.commenter-profile img {
vertical-align: middle;
border-width: 0;
}

【ページ全体の設定】
マージン（上・右・下・左）
背景色
位置揃え（中央揃え）

【全体のリンク設定】
文字の修飾（下線）

【未訪問リンク設定】
文字色

【訪問済みリンク設定】
文字色

【リンク中の設定】
文字色

【カーソル中の設定】
文字色

【見出し文字の設定】
マージン（上下左右）
パディング（上下左右）
文字の太さ（通常）

【コンテンツ表示部（本文とサイドバー）】
行の高さ
右マージン
左マージン
位置揃え（左揃え）
パディング（上下左右）
横幅
背景色
枠（実線）

【バナー部分】
書体

文字色
背景色
位置揃え（左揃え）
パディング（上下左右）
下辺枠（実線）

高さ

【バナー部分のイメージリンクの設定】
レイヤー（非表示）

【バナー部分のリンク文字の設定】
文字色
文字の修飾（なし）

【バナー部分のh1（タイトル）の設定】
文字の大きさ

【バナー部分のh2（説明）の設定】
文字の大きさ

【左側全体の設定】
回り込み（左）
横幅
あふれ部分（非表示）

【エントリー本文設定】
パディング（上右下左）
背景色
文字色
書体

文字の大きさ

【右側全体の設定】
回り込み（左）
横幅
背景色
あふれ部分（非表示）

【エントリー本文設定】
文字色
書体

文字の大きさ
文字の太さ（通常）
行の高さ
位置揃え（左揃え）
下マージン

【引用部分の設定】
行の高さ

【リスト表示の設定】
行の高さ

【h2指定部分の設定】
文字色
書体

文字の大きさ
位置揃え（左揃え）
文字の太さ（通常）
下マージン

【h3指定部分の設定】
文字色
書体

文字の大きさ
位置揃え（左揃え）
文字の太さ（通常）
下マージン

【投稿部分の設定】
文字色
書体

文字の大きさ
上側の枠（実線）

位置揃え（左揃え）
下マージン
行の高さ
パディング（上下左右）

【サイドバーの設定】
パディング（上下左右）

【カレンダー全体】
行の高さ
文字色
書体

文字の大きさ
パディング（上下左右）
位置揃え（中央揃え）
下マージン

【カレンダー本体】
パディング（上下左右）
隣接セルの枠（重ねる）
枠
横幅

【カレンダー（年月）】
文字色
書体

文字の大きさ
位置揃え（中央揃え）
文字の太さ（太い）
大文字・小文字（大文字）
文字間隔

【カレンダー（週）】
文字の大きさ
位置揃え（通常）

【カレンダー（日）】
位置揃え（中央揃え）

【h2指定部分の設定】
文字色
書体

文字の大きさ
位置揃え（中央揃え）
文字の太さ（太い）
大文字・小文字（大文字）
文字間隔

【リスト関連の設定】
左パディング
マージン
下マージン

【リスト関連の設定】
下マージン

【リスト関連の設定】
左パディング

【リスト関連の設定】
文字色
書体

文字の大きさ
位置揃え
行の高さ
上マージン
リストマーク（なし）

【リスト関連の設定】
リストマーク（白丸）

【画像の設定】
枠（実線）

【写真部分の設定】
位置揃え（左揃え）
下マージン

【検索、syndicate部分の設定】
書体

文字の大きさ
行の高さ
位置揃え（左揃え）
パディング（上下左右）
下マージン

【ロゴ部分の設定】
書体

文字の大きさ
行の高さ
位置揃え（左揃え）
文字色
上マージン

【コメント部分の設定】
回り込み（左）
横幅
右パディング
右マージン
位置揃え（左揃え）
右側の枠

【テキストエリアの設定】

横幅

【プロフィール画像の設定】
垂直位置（中央揃え）
枠幅

MovableType クラス・セレクタ一覧表

下記の一覧表では、MovableTypeで使用されている主なクラスやセレクタなどが、ブログのどの箇所に該当するのかまとめています。

＜MovableType3.17 デフォルト・テンプレート＞

クラス・セレクタ	該当箇所
#banner h1	ブログのタイトル
#banner h2	ブログの説明
.content	エントリー全体
.content h2	エントリーの日付
.content h3	エントリーのタイトル
.content p	エントリーの本文
.content p.posted	投稿者・投稿時間・コメントなど
#right	サイドメニュー全体（右側）
.sidebar	サイドメニュー
.sidebar h2	サイドメニューの見出し
.link-note	RSSへのリンクや検索ボックス
#calendar	カレンダー
#powered	powered　by の部分

以上、MovableTypeのスタイルシートについて説明しました。

MovableType 解析編 - 講義一覧

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

　解析編

講義を受講されたら、1クリックの応援お願いします。

2005年7月19日

MovableTypeの構造

・MovableTypeのテンプレート概要
・MovableTypeの構造図
・MovableTyoeのスタイルシート解析
・MovableTypeのメインページ解析
・MovableTypeのカテゴリー・アーカイブ解析
・MovableTypeの個別エントリーアーカイブ解析
・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 解析編の講義一覧です。

　解析編

2005年7月14日

MovableTypeのテンプレート概要

MTカスタマイズ講座「解析編」では、MovableTypeで使用されているテンプレートを徹底的に解析します。

主な講義内容は、下記を予定しています。

　解析編

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

各テンプレートで使用されているセレクタやタグなどの機能や役割を理解しておけば、カスタマイズもスムーズに行えますので、是非、参考にしてくださいね。

MovableTypeのテンプレート概要

MovableType3.17では、スタイルシートやメインページ、カテゴリーアーカイブなど約20種類のテンプレートで構成されています。まず最初に、それぞれのテンプレートについて説明していきます。

■ インデックス・テンプレート
インデックス・テンプレートは、メインのエントリー・リストです。Movable Typeでは、複数のインデックス・テンプレートをサポートしている点が特徴的です。

テンプレート名	概要
Atomフィード	Atomフィードに関するテンプレートです。Atomフィードとは、ウェブサイトから提供される更新情報や更新内容をXMLという形式で表現したデータのことです。
RSD	RSDに関するテンプレートです。RSDとは、「Really Simple Discoverability」の略で、ウェブログシステム周辺で動くサービスにとって必要な情報を、テキストで提供してくれるフォーマットのことです。
RSS1.0	RSS1.0とは、サイトの見出しや要約などをXMLという形式で記述しているものです。RSSにはいくつかのバージョンがあります。
RSS2.0	RSS2.0とは、サイトの見出しや要約などをXMLという形式で記述しているものです。RSSにはいくつかのバージョンがあります。
アーカイブページ	アーカイブページに関するテンプレートです。
スタイルシート	CSSでブログのデザインやレイアウトなどを定義します。
ダイナミック・テンプレート用起動スクリプト	ダイナミックPHP生成に関するテンプレートです。
メインページ	ブログのトップページに関するテンプレートです。

■ アーカイブに関連したテンプレート
アーカイブ・テンプレートでは、ウェブログ・アーカイブの外観や使い勝手を定義します。

テンプレート名	概要
カテゴリー・アーカイブ	カテゴリー・アーカイブに関するテンプレートです。
個別エントリーアーカイブ	個別エントリーアーカイブに関するテンプレートです。
日付アーカイブ	日付（月別・週別・日別）アーカイブに関するテンプレートです。

■ アーカイブに関連したテンプレート
MovableTypeでは、コメントリストやトラックバックリストなどのテンプレートも用意されており、より詳細にデザインできます。

テンプレート名	概要
コメント・リストのテンプレート	コメントにポップアップ・ウィンドウを使うよう選択した場合に、コメント・ページのレイアウトを定義します。
コメント・プレビューのテンプレート	コメントの確認（プレビュー）を使うよう選択した場合（デフォルトでは選択済み)、コメントの確認ページのレイアウトを定義します。
コメント・エラーのテンプレート	ユーザーがコメントを投稿した際にエラーが発生したとき、ユーザーに表示されるエラーメッセージを定義します。
コメント・保留のテンプレート	投稿したコメントがすぐには表示されないよう設定している場合、コメント投稿時にユーザーに表示されるメッセージを定義します。
トラックバック・リストのテンプレート	システムで特定のエントリーに送られたトラックバックpingを一覧表示するポップアップ・ウィンドウのレイアウトを定義します。
画像のポップアップウィンドウのテンプレート	画像のポップアップ・ウィンドウののレイアウトを定義します。
ダイナミックページ・エラー表示テンプレート	ダイナミックページ生成の際にエラーが発生したときに表示されるエラーメッセージを定義します。

■ テンプレート・モジュール
テンプレート・モジュールとは、共通して利用するひとまとまりのHTMLコードを、他のテンプレートに埋め込むことができる汎用テンプレートのことです。

利用例として、サイト全体で使うヘッダーがあります。「 Header 」というテンプレート・モジュールを作成し、他のすべてのテンプレートに埋め込むことができます。こうしておくと、共通して利用するコードを1カ所に保存でき、修正もそのテンプレート・モジュールだけで済むので、作業が楽になります。

テンプレート名	概要
Remember Me	クッキーに関するテンプレートモジュール。

以上、MovableType3.17 デフォルト・テンプレートで使用されているテンプレートについて説明しました。
次回以降は、それぞれのテンプレート内で使用されているセレクタやタグなどについて、詳しく説明していきます。

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