2007年5月 7日
MovableType3.3のエントリーアーカイブ解析
MovableType3.3のエントリーアーカイブ・テンプレートに記述されている内容を説明します。ソース全体を解析していますので、カスタマイズの際には、是非、参考にしてくださいね。
MovableType3.3のエントリーアーカイブの大まかな構造は、下の図のようになります。まずは、全体的なイメージを掴んでください。
■ 図1(MovableType3.3構造図)
「body」の中に「container」(赤枠)があります。
その 「container」 の中の上部に、blogのタイトルが入る「banner」(グレー枠)があり、下部には、記事やメニューなどが入る「pagebody」(ピンク枠)があります。
そして、「pagebody」の中の左側に、エントリーなどが入る「alpha」(緑枠)があり、右側には、サイドメニューなどが入る#bata(紺枠)があります。
実際にエントリーアーカイブのテンプレートを見てみると、下記の部分が上図の対応箇所になります。
<エントリーアーカイブ - body部分 : MovableType3.3>
さらに、各セレクタを詳しく解析していきます。まずは、ブログのタイトルなどが入っている「#banner」部分です。
■ #banner部分
<エントリーアーカイブ - バナー部分 : MovableType3.3>
■ #alpha部分
次は、エントリーなどが入っている「#alpha」部分です。
<エントリーアーカイブ - 左側 : MovableType3.3>
■ #beta部分
次は、サイドメニューなどが入っている「#beta」部分です。
<エントリーアーカイブ - 検索部分 : MovableType3.3>
<エントリーアーカイブ - About表示部 : MovableType3.3>
<エントリーアーカイブ - ブログフィード表示部 : MovableType3.3>
<エントリーアーカイブ - ライセンス表示部 : MovableType3.3>
<エントリーアーカイブ - クレジット表示部 : MovableType3.3>
■ head部分
最後は、文頭のhead部分です。
<エントリーアーカイブ - ヘッダー部分 : MovableType3.3>
以上、MovableType3.3のエントリーアーカイブについて説明しました。
[関連記事]
すごく長文になりましたが、応援お願いします^^
MovableType3.3のエントリーアーカイブ構造図
MovableType3.3のエントリーアーカイブの大まかな構造は、下の図のようになります。まずは、全体的なイメージを掴んでください。
■ 図1(MovableType3.3構造図)
body <body class="layout-two-column-right">
|
||||||||||||
「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 )
|
<エントリーアーカイブ - バナー部分 : 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 )
|
<エントリーアーカイブ - 左側 : MovableType3.3>
| <div id="alpha"> <div id="alpha-inner" class="pkg"> /* <前の記事> | メイン | <次の記事> */ <p class="content-nav"> <MTEntryPrevious> <a href="<$MTEntryPermalink$>">« <$MTEntryTitle$></a> | </MTEntryPrevious> <a href="<$MTBlogURL$>">メイン</a> <MTEntryNext> | <a href="<$MTEntryPermalink$>"><$MTEntryTitle$> »</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> » <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 )
|
<エントリーアーカイブ - 検索部分 : 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
|
|
はてなブックマークに追加
|
Yahooブックマークに登録
トラックバック
このエントリーのトラックバックURL:
コメント
コメントしてください
