HOME

メインページ　index.html

カスタマイズのためにメインページの構造を分析しました。

※「#　.」はCSSでそれぞれ「id　class」を表します。

<body>

<div id="container">←１

#container {
line-height: 140%;行間を設定（140%）
margin-right: auto;右の余白（自動設定）
margin-left: auto;左の余白（自動設定）
text-align: left;テキストの水平位置（左寄せ）
padding: 0px;ボックスと要素の間隔（なし）
width: 700px;ボックス横幅（700px）
background-color: #FFFFFF;背景色（■）
border: 1px solid #FFFFFF;ボックスの枠線（線の太さ-1px、線種-実線、色-■）
}

<div id="banner">←２

#banner {
font-family: Verdana, Arial, sans-serif;フォントの指定
color: #FFFFFF;テキストの色（白）
background-color: #999999;背景色（■）
text-align: left;テキストの水平位置（左寄せ）
padding: 15px;ボックスと要素の間隔（15px）
border-bottom: 1px solid #FFFFFF;ボックスの下枠線（線の太さ-1px、線種-実線、色-■）
height: 39px;高さ
}

<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>←「タイトル」

★<$MTBlogURL$>：ウェブログの絶対URL(完全なURL)。
★<$MTBlogName encode_html="1"$>：HTMLエンコードされたウェブログの名前。

#banner a {
color: #FFFFFF;テキストの色（■）
text-decoration: none;テキストの装飾（なし）※リンク部分は通常下線がありますがこの場合は無くなります。
}

#banner h1 {
font-size: xx-large;フォントのサイズ（<font size="7">相当）
}

<h2><$MTBlogDescription$></h2>←「ブログの説明」

★<$MTBlogDescription$>：ウェブログの説明。

#banner h2 {
font-size: small;フォントのサイズ（<font size="3">相当）
}

</div>

<div id="center">←３

#center {
float: left;ボックスの位置を指定（左）：左側から順番に#rightと二列に並ぶようになります。（#right にも同じ設定があります。）
width: 500px;ボックスのサイズ（500px）
overflow: hidden;内容が収まらないとき（隠す）
}

<div class="content">←４

.content {
padding: 15px 15px 5px 15px;ボックスと要素の間隔（上15px　右15px　下5px　左15px）
background-color: #FFFFFF;背景色（■）
color: #666666;テキストの色（■）
font-family: Verdana, Arial, sans-serif;フォントの種類
font-size: x-small;フォントのサイズ<font size="2">に相当
}

<MTEntries>
<$MTEntryTrackbackData$>

<MTDateHeader>
<h2><$MTEntryDate format="%x"$></h2>←「投稿した日」

★<MTEntries>：ウェブログのエントリー/投稿のリストのコンテナ・タグ
★<$MTEntryTrackbackData$>：エントリーに対してのトラックバック用データの RDF 出力。
★<MTDateHeader>：エントリーのリストの中で、エントリーが前のエントリーと比較して、新しい日付になったときだけ、内容を表示するコンテナ・タグ。
★<$MTEntryDate format="%x"$>：エントリーの日付。（2005年09月06日）

.content h2 {
color: #666666;テキストの色（■）
font-family: Verdana, Arial, sans-serif;フォントの種類
font-size: x-small;フォントのサイズ<font size="2">に相当
text-align: left;テキストの水平位置（左寄せ）
font-weight: bold;テキストの太さ（太い）
margin-bottom: 10px;下の余白（10px）
}

</MTDateHeader>

<h3 id="a<$MTEntryID pad="1"$>"><$MTEntryTitle$></h3>←「タイトル」

★<$MTEntryID pad="1"$>：左詰めの0を付けた数字で表されるエントリーID。
★<$MTEntryTitle$>：エントリーのタイトル。

.content h3 {
color: #666666;テキストの色（■）
font-family: Verdana, Arial, sans-serif;フォントの種類
font-size: small;フォントのサイズ<font size="3">に相当
text-align: left;テキストの水平位置（左寄せ）
font-weight: bold;テキストの太さ（太い）
margin-bottom: 10px;下の余白（10px）
}

<$MTEntryBody$>←「エントリーの内容」

★<$MTEntryBody$>：エントリーの本文。

<MTEntryIfExtended>
<p class="extended"><a href="<$MTEntryPermalink$>#more">
続きを読む "<$MTEntryTitle$>"</a></p>←「続きを読む”タイトル”」
</MTEntryIfExtended>

★<MTEntryIfExtended>：エントリーに追記のテキストがあれば、コンテナのん内容を表示するタグ。
★<$MTEntryPermalink$>：エントリーを含むアーカイブページへの絶対 URL。
★<$MTEntryTitle$>：エントリーのタイトル。

<p class="posted">投稿者 <$MTEntryAuthor$> : <a href="<$MTEntryPermalink valid_html="1"$>">←「投稿者ｘｘｘｘ」
<$MTEntryDate format="%X"$></a>←「12:30」

★<$MTEntryAuthor$>：エントリーの著作者の名前。
★<$MTEntryPermalink valid_html="1"$>：エントリーを含むアーカイブページへの絶対 URL。
★<$MTEntryDate format="%X"$>：エントリーの時間。（12:30）

.content p.posted {
color: #999999;テキストの色（■）
font-family: Verdana, Arial, sans-serif;フォントの種類
font-size: x-small;フォントのサイズ<font size="2">に相当
border-top: 1px solid #999999;ボックスの上枠線（線の太さ-1px、線種-実線、色-■）
text-align: left;テキストの水平位置（左寄せ）
margin-bottom: 25px;下の余白（25px）
line-height: normal;行間（普通）
padding: 3px;ボックスと要素の間隔（3px）
}

<MTEntryIfAllowComments>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#comments">コメント (<$MTEntryCommentCount$>)</a>←「コメント（0）」
</MTEntryIfAllowComments>
<MTEntryIfAllowPings>
| <a href="<$MTEntryPermalink archive_type="Individual"$>#trackbacks">トラックバック (<$MTEntryTrackbackCount$>)</a>
</MTEntryIfAllowPings>←「トラックバック(0)」

</p>

★<MTEntryIfAllowComments>：エントリーがコメントを受けつける設定のときに表示されるコンテナ・タグ。
★<$MTEntryPermalink archive_type="Individual"$>：個別エントリーアーカイブページへの絶対 URL。
★<$MTEntryCommentCount$>：エントリーに付いたコメントの数。
★<MTEntryIfAllowPings>：エントリーがトラックバックを受けつける設定になっているときに、内容を表示するコンテナ・タグ。
★<$MTEntryTrackbackCount$>：エントリーに付いたトラックバックの数

</MTEntries>

</div>
</div>

<div id="right">←５

#right {
float: left;ボックスの位置を指定（左）：左側から順番に#centerと二列に並ぶようになります。（#center にも同じ設定があります。）
width: 200px;ボックスのサイズ（200px）
background-color: #FFFFFF;背景色（■）
overflow: hidden;内容が収まらないとき（隠す）
}

<div class="sidebar">←６

.sidebar {
padding: 15px;ボックスと要素の間隔（15px）
}

<div id="calendar">←７

#calendar {
line-height: 140%;行間（140%）
color: #666666;テキストの色（■）
font-family: Verdana, Arial, sans-serif;フォントの種類
font-size: x-small;フォントのサイズ<font size="2">に相当
padding: 2px;ボックスと要素の間隔（2px）
text-align: center;テキストの水平位置（中央寄せ）
margin-bottom: 30px;下の余白（30px）
}

#calendar table {
padding: 2px;ボックスと要素の間隔（2px）
border-collapse: collapse;セルのボーダーを重ねて表示
border: 0px;線の太さ（0px）
width: 100%;テーブルの幅（100%）
}

<caption><$MTDate format="%B %Y"$></caption>

★<$MTDate format="%B %Y"$>：エントリーの日付。（2005年2月）

#calendar caption {
color: #666666;テキストの色（■）
font-family: Verdana, Arial, sans-serif;フォントの種類
font-size: x-small;フォントのサイズ<font size="2">に相当
text-align: center;テキストの水平位置（中央寄せ）
font-weight: bold;テキストの太さ（太い）
text-transform: uppercase;英文すべてを大文字にする
letter-spacing: .3em;文字の間隔（3em）
}

#calendar th {
text-align: center;テキストの水平位置（中央寄せ）
font-weight: normal;テキストの太さ（普通）
}

</tr>

<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>

★<MTCalendar>：一ケ月分のカレンダーを表示するために使うコンテナ・タグ。
★<MTCalendarWeekHeader>：それぞれの週の始めにだけ表示されるコンテナ・タグ。

<td>

#calendar td {
text-align: center;テキストの水平位置（中央寄せ）
}

<MTCalendarIfEntries><MTEntries lastn="1">
<a href="<$MTEntryPermalink$>"><$MTCalendarDay$></a>
</MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<$MTCalendarDay$>
</MTCalendarIfNoEntries>
<MTCalendarIfBlank> </MTCalendarIfBlank>
</td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>

★<MTCalendarIfEntries>：そのセルの日にエントリーがあれば表示されるコンテナ・タグ。
★<MTEntries lastn="1">：ウェブログのエントリー/投稿のリストのためのコンテナ・タグです。ウェブログに投稿された最新の1個のエントリーを表示します。
★<$MTEntryPermalink$>：エントリーを含むアーカイブページへの絶対 URL。
★<$MTCalendarDay$>：数字の日付。
★<MTCalendarIfNoEntries>：そのセルの日にエントリーがないときに表示されるコンテナ・タグ。
★<MTCalendarIfBlank>：そのセルが「空白」、すなわち、その月でない日のときに表示されるコンテナ・タグ。
★<MTCalendarWeekFooter>：それぞれの週の終わりにだけ表示されるコンテナ・タグ。

</table>
</div>

.sidebar h2 {
color: #666666;テキストの色（■）
font-family: Verdana, Arial, sans-serif;フォントの種類
font-size: x-small;フォントのサイズ<font size="2">に相当
text-align: center;テキストの水平位置（真中寄せ）
font-weight: bold;テキストの太さ（太い）
text-transform: uppercase;英文すべてを大文字にする
letter-spacing: .3em;文字の間隔（3em）
}

<div class="link-note">←８

.link-note {
font-family: Verdana, Arial, sans-serif;フォントの種類
font-size: x-small;フォントのサイズ<font size="2">に相当
line-height: 150%;行間（150%）
text-align: left;テキストの水平位置（左寄せ）
padding: 2px;ボックスと要素の間隔（2px）
margin-bottom: 15px;下の余白（15px）
}

<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />

★<$MTCGIPath$>：Movable TypeのCGIスクリプトがあるディレクトリのURLパス。
★<$MTSearchScript$>：検索用スクリプトのファイル名デフォルトではmt-search.cgi
★<$MTBlogID$>：ウェブログの数字のID

<label for="search" accesskey="4">このサイトの検索</label><br />
<input id="search" name="search" size="20" /><br />
<input type="submit" value="検索" />
</form>
</div>

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

<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>

★<MTSubCategories>：階層構造を持ったカテゴリーのリストを表示するためのコンテナ・タグ。
★<MTSubCatIsFirst>：「現在」のカテゴリーが、兄弟カテゴリーの中で、最初にリストされるか決めるタグ

.sidebar #categories ul {
padding-left: 15px;ボックスと要素の左間隔（15px）
}

.sidebar ul ul {
margin-bottom: 0px;下の余白（0px）
}

<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>

★<MTIfNonZero tag="MTCategoryCount">：カテゴリーに属するエントリーの数が0以上だったら表示するためのコンテナ・タグ。
★<$MTCategoryArchiveLink$>：カテゴリーアーカイブページへのリンク。
★<$MTCategoryDescription$>：カテゴリーの説明。
★<MTCategoryLabel>：カテゴリーのラベル(名前)。

.sidebar #categories li {
list-style-type: circle;リストマーク（○）
}

<MTElse>
<li><MTCategoryLabel>

★<MTElse>：条件タグの内側で条件タグが「そうでない場合」のために使います。
★<MTCategoryLabel>：カテゴリーのラベル(名前)。

.sidebar #categories li {
list-style-type: circle;リストマーク（○）
}

</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>

★<MTSubCatsRecurse max_depth="3">：現在のカテゴリーに属するサブカテゴリーのMTSubCategoriesコンテナを再帰的に呼び出します。再帰最大数3。
★<MTSubCatIsLast>：「現在」のカテゴリーが、兄弟カテゴリーの中で、最後にリストされるかを決めるタグ。

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

<ul>

.sidebar ul {
padding-left: 0px;ボックスと要素の左側の間隔（0px）
margin: 0px;余白（0px）
margin-bottom: 30px;下の余白（30px）
}

<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>

★<MTArchiveList archive_type="Monthly">：日付アーカイブ・ページのリストをすべて表示するためのコンテナ・タグ。
★<$MTArchiveLink$>：アーカイブ・ページへの絶対URL。
★<$MTArchiveTitle$>：アーカイブページの「タイトル」。

.sidebar li {
color: #666666;テキストの色（■）
font-family: Verdana, Arial, sans-serif;フォントの種類
font-size: x-small;フォントのサイズ<font size="2">に相当
text-align: left;テキストの水平位置（左寄せ）
line-height: 150%;行間（150%）
margin-top: 10px;上の余白（10px）
list-style-type: none;リストマーク（なし）
}

</MTArchiveList>
</ul>

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

.sidebar h2 {
color: #666666;テキストの色（■）
font-family: Verdana, Arial, sans-serif;フォントの種類
font-size: x-small;フォントのサイズ<font size="2">に相当
text-align: center;テキストの水平位置（中央寄せ）
font-weight: bold;テキストの太さ（太い）
text-transform: uppercase;英文すべてを大文字にする
letter-spacing: .3em;文字の間隔（3em）
}

<ul>

.sidebar ul {
padding-left: 0px;ボックスと要素の左側の間隔（0px）
margin: 0px;余白（0px）
margin-bottom: 30px;下の余白（30px）
}

<MTEntries lastn="10">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>

★<MTEntries lastn="10">：ウェブログのエントリー/投稿のリストのためのコンテナ・タグです。最新10個のエントリーを表示します。
★<$MTEntryPermalink$>：エントリーを含むアーカイブページへの絶対 URL。
★<$MTEntryTitle$>：エントリーのタイトル。

</MTEntries>
</ul>

<div class="link-note">←12

<a href="<$MTBlogURL$>index.rdf">Syndicate this site (XML)</a>
</div>

★<$MTBlogURL$>：ウェブログの絶対URL(完全なURL)。

※一般的な設定　≫　クリエイティブ・コモンズ・ライセンスの設定をすると表示されます

<a href="<$MTBlogCCLicenseURL$>"><img alt="Creative Commons License" src="<$MTBlogCCLicenseImage$>" /></a><br />
このウェブログのライセンス: <a href="<$MTBlogCCLicenseURL$>">Creative Commons License</a>.
</div>
</MTBlogIfCCLicense>

★<MTBlogIfCCLicense>：クリエイティブ・コモンズ・ライセンスがウェブログの設定の中で選択されているときに、中身を実行するコンテナ・タグ。
★<$MTBlogCCLicenseURL$>：選んだクリエイティブ・コモンズ・ライセンスに合わせた内容が書かれているURL。

<div id="powered">←13

#powered {
font-family: Verdana, Arial, sans-serif;フォントの種類
font-size: x-small;フォントのサイズ<font size="2">に相当
line-height: 150%;行間（150%）
text-align: left;テキストの水平位置（左寄せ）
color: #666666;テキストの色（■）
margin-top: 50px;上の余白（50px）
}

Powered by<br /><a href="http://www.movabletype.jp">
Movable Type <$MTVersion$></a><br />
</div>

★<$MTVersion$>：現在動いているMovable Typeのバージョンを表示します。

</div>
</div>

<div style="clear: both;"> </div>←回り込みの解除：今回の場合は#centerと#rightの二箇所でfloat: left;[ボックスの位置を指定（左）]を使ってレイアウトしていますがこのレイアウトを解除するという意味になります。

</div>

</body>

メインページ index.html

メインページ　index.html