2007年5月 7日

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

MT3.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＞
<body class="layout-two-column-right
individual-entry-archive"
onload="individualArchivesOnLoad(commenter_name)">
　<div id="container">
　　<div id="banner">（中略）</div>
　　<div id="pagebody">
　　　<div id="alpha">（中略）</div>
　　　<div id="beta">（中略）</div>
　　</div>
　</div>
</body>


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 ）
　.content-nav　（前の記事 | メイン | 次の記事）
　#archive-title　（エントリータイトル）
　.entry
　.entry-content
　.entry-body　（本文）
　.entry-more　（追記）
　.entry-tags
　.entry-tags-header　（タグ:）
　.entry-tags-list
　.entry-tag　（タグ）
　.entry-footer
　.post-footers　（投稿者、日時）
　.separator　（ | ）
　.permalink　（パーマリンク）
　.trackbacks
　.trackbacks-header　（トラックバック）
　#trackbacks-info　（トラックバックURL）
　.trackbacks-content
　.trackback
　.trackback-content（送信元、概要）
　.trackback-footert　（時刻）
　.comments
　.comments-content
　comments-header　（コメント）
　.comment
　.comment-inner
　.comment-header
　.comment-content　（コメント）
　.comment-footer　（投稿者）
　.comment-footer-experimental　（日時）
　.comments-open
　comments-open-header（コメントを投稿）
　.comments-open-content
　.comments-open-moderated
　#comments-open-data
　#name-email　（名前、メール）
　#comments-open-text
　#comment-text　（コメント欄）
　#comments-open-footer


＜エントリーアーカイブ - 左側 ： MovableType3.3＞
<div id="alpha">
<div id="alpha-inner" class="pkg">

/* <前の記事> | メイン | <次の記事> */
<p class="content-nav">
<MTEntryPrevious>
<a href="<$MTEntryPermalink$>">&laquo;
<$MTEntryTitle$></a> |
</MTEntryPrevious>
<a href="<$MTBlogURL$>">メイン</a>
<MTEntryNext>
| <a href="<$MTEntryPermalink$>"><$MTEntryTitle$>
&raquo;</a>
</MTEntryNext>
</p>

/* エントリータイトル */
<h2 id="archive-title"><$MTEntryTitle$></h2>

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

<div class="entry-content">
<MTIfNonEmpty tag="EntryBody">

/* エントリー内容の表示 */
<div class="entry-body">
<$MTEntryBody$>
</div>
</MTIfNonEmpty>

/* エントリーの追記 */
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<div id="more" class="entry-more">
<$MTEntryMore$>
</div>
</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-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>

</p> /* end of "entry-footer" */
</div> /* end of "entry" */

/* トラックバック表示（トラックバックを受け付ける設定時） */
<MTIfPingsActive>
<div class="trackbacks">
<h3 id="trackback" class="trackbacks-header">
トラックバック</h3>

/* トラックバックURL */
<div id="trackbacks-info">
<MTIfPingsAccepted>
<p>このエントリーのトラックバックURL:<br/>
<$MTEntryTrackbackLink$>
</p></MTIfPingsAccepted>
</div>

/* エントリーのURL */
<MTPings>
<MTPingsHeader>
<div class="trackbacks-content">
<p>この一覧は、次のエントリーを参照しています:
<a href="<$MTEntryPermalink$>">
<$MTEntryTitle$></a>:</p>
</MTPingsHeader>
<a id="p<$MTPingID pad="1"$>"></a>

/* 送信元トラックバックURL、タイトル、概要、時刻表示 */
<div class="trackback" id="ping-<$MTPingID$>">
<div class="trackback-content">
<p>
&raquo; <a rel="nofollow" href="<$MTPingURL$>">
<$MTPingTitle$></a> 送信元 <$MTPingBlogName$>
<br /><$MTPingExcerpt$>
<a rel="nofollow" href="<$MTPingURL$>">
[詳しくはこちら]</a>
</p>
</div>
<p class="trackback-footer">
トラックバック時刻: <a href="#ping-<$MTPingID$>">
<$MTPingDate$></a>
</p>
</div>
<MTPingsFooter>
</div>
</MTPingsFooter>
</MTPings>
</div>
</MTIfPingsActive>

/* コメント表示（コメントが可能、または、コメントがある場合）*/
<MTIfCommentsActive>
<div id="comments" class="comments">
<MTComments>
<MTCommentsHeader>
<div class="comments-content">

/* コメント（コメント数） */
<h3 class="comments-header">コメント
(<$MTEntryCommentCount$>)</h3>
</MTCommentsHeader>

/* TypeKey認証サービスのプロフィールページへのリンク */
<a id="c<$MTCommentID pad="1"$>"></a>
<div class="comment" id="comment-<$MTCommentID$>">
<div class="comment-inner">
<div class="comment-header">
<$MTCommentAuthorLink default_name=
"Anonymous" show_email="0"$>
<MTIfNonEmpty tag="CommentAuthorIdentity">
<$MTCommentAuthorIdentity$></MTIfNonEmpty>:
</div>

/* コメント内容の表示 */
<div class="comment-content">
<$MTCommentBody$>
</div>

/* コメント投稿者、日時表示 */
<p class="comment-footer">
投稿者:
<$MTCommentAuthorLink default_name="匿名"$>
<$MTCommentAuthorIdentity$> |
<a href="#comment-<$MTCommentID$>">
<$MTCommentDate$></a>
</p>
<p class="comment-footer-experimental">
日時:
<a href="#comment-<$MTCommentID$>"
title="このコメントへのパーマリンク">
<$MTCommentDate format="%x %H:%M"$></a>
</p>
</div>
</div>
<MTCommentsFooter>
</div>
</MTCommentsFooter>
</MTComments>

/* コメントを受けつける設定が「可能」の場合 */
<MTEntryIfCommentsOpen>
<form method="post"
action="<$MTCGIPath$><$MTCommentScript$>"
name="comments_form" onsubmit=
"if (this.bakecookie.checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id"
value="<$MTEntryID$>" />

/* コメントを投稿 */
<div class="comments-open" id="comments-open">
<h2 class="comments-open-header">コメントを投稿</h2>

/* TypeKey認証サービス設定が有効の場合 */
<div class="comments-open-content">
<script type="text/javascript">
<!--
writeTypeKeyGreeting(commenter_name, <$MTEntryID$>);
//-->
</script>

/* コメントの事前承認設定が有効の場合 */
<MTIfCommentsModerated>
<p class="comments-open-moderated">
(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)
</p>
</MTIfCommentsModerated>

<div id="comments-open-data">
<div id="name-email">

/* 名前欄 */
<p><label for="comment-author">名前:</label>
<input id="comment-author" name="author" size="30" />
</p>

/* メールアドレス欄 */
<p><label for="comment-email">メールアドレス:</label>
<input id="comment-email" name="email" size="30" />
</p>
</div>

/* URL欄 */
<p><label for="comment-url">URL:</label>
<input id="comment-url" name="url" size="30" />
</p>

/* 情報の登録欄 */
<p><label for="comment-bake-cookie">
<input type="checkbox"
id="comment-bake-cookie" name="bakecookie"
onclick="if (!this.checked)
forgetMe(document.comments_form)" value="1" />
この情報を登録しますか?</label>
</p>
</div>

/* コメント欄 */
<p id="comments-open-text">
<label for="comment-text">コメント:
<MTIfAllowCommentHTML>
(スタイル用のHTMLタグが使えます)
</MTIfAllowCommentHTML></label>
<textarea id="comment-text"
name="text" rows="15" cols="50"></textarea>
</p>

/* 確認ボタン、投稿ボタン */
<div id="comments-open-footer"
class="comments-open-footer">
<input type="submit" accesskey="v"
name="preview" id="comment-preview" value="確認" />
<input type="submit" accesskey="s"
name="post" id="comment-post" value="投稿" />
</div>
</div>
</div>
</form>
</MTEntryIfCommentsOpen>
</div>
</MTIfCommentsActive>

</div>　/* end of "alpha-inner" */
</div>　/* end of "alpha" */


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

　#beta （#beta-inner .pkg ）
　.module-search module
　.module-header　（検索）
　.module-content
　.module-welcome module
　.module-header　（About）
　.module-content
　.first　（エントリー投稿日時）
　.module-syndicate module
　.module-content
　.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>

＜エントリーアーカイブ - About表示部 ： MovableType3.3＞
<div class="module-welcome module">
<h2 class="module-header">About</h2>
<div class="module-content">

/* エントリーの投稿日時（年月日）表示 */
<p class="first">
<$MTEntryDate format="%x %X"$>に投稿されたエントリーのページです。</p>
<MTEntryPrevious>

/* ひとつ前のエントリータイトル表示 */
<p>ひとつ前の投稿は「<a href="<$MTEntryPermalink$>">
<$MTEntryTitle remove_html="1"$></a>」です。</p></MTEntryPrevious>

/* 次のエントリータイトル表示 */
<MTEntryNext>
<p>次の投稿は「<a href="<$MTEntryPermalink$>">
<$MTEntryTitle remove_html="1"$></a>」です。</p></MTEntryNext>

/* メインページ、アーカイブページへのリンク */
<p>他にも多くのエントリーがあります。
<a href="<$MTBlogURL$>">メインページ</a>や
<a href="<$MTBlogURL$>archives.html">アーカイブページ</a>も見てください。</p>

</div>
</div>

＜エントリーアーカイブ - ブログフィード表示部 ： MovableType3.3＞
/* ブログフィードの表示 */
<div class="module-syndicate module">
<div class="module-content">
<a href="<$MTBlogURL$>atom.xml">
このブログのフィードを取得</a><br />
[<a href="http://www.sixapart.jp/about/feeds">
フィードとは</a>]
</div>
</div>

＜エントリーアーカイブ - ライセンス表示部 ： 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><$MTEntryTitle remove_html="1"$>
(<$MTBlogName encode_html="1"$>)</title>

/* トップページのリンク */
<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>

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

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

/* コメント・トラックバック欄の表示・非表示、および、TypeKey認証時のコメンター情報や投稿フォームの表示などの制御 */
<script type="text/javascript"
src="<$MTBlogURL$>mt-site.js"></script>

</head>


以上、MovableType3.3のエントリーアーカイブについて説明しました。

[関連記事]

すごく長文になりましたが、応援お願いします＾＾人気ブログランキング

パーマリンク | 投稿者 りっち | 2007年5月 7日 23:35 | del.icio.usに追加 | livedoorクリップに追加
はてなブックマーク はてなブックマークに追加 はてなブックマーク件数 | Yahoo!ブックマークに登録 Yahooブックマークに登録


関連記事


トラックバック

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

コメント

Oh, good joke) What did one ocean say to the other ocean? Nothing, they just waved.

投稿者 myrnasot : 2009年12月26日 16:53

コメントしてください




保存しますか?

(書式を変更するような一部のHTMLタグを使うことができます)

メニュー

ブログ作成講座

ブログ作成講座
只今、講義中！お静かに＾＾
基礎知識編
・ブログとは
・コメントとは
・トラックバックとは
・RSSとは
・Pingとは
開設編
・ブログの選び方
・無料ブログ比較
・MovableType設置方法
・タイトルの決め方
・レイアウトの決め方
・魅力的な記事の書き方
運営編
・アフィリエイト登録
・アクセスアップ方法
・アクセス解析の設置
・カウンタの設置
・掲示板の設置
・ランキングの参加効果

ブログ別！作成講座

ブログカスタマイズ講座

ブログアフィリエイト講座

最新ニュース

コミュニティー

リンク

姉妹サイト


最近のエントリー

カウンター


 RSSリーダーで購読する
Powered by
Movable Type 4.0


アクセス解析