トップ >
Movable Type
> 今日のMovable Type 4.1：超簡単！見よう見まねで覚えるMT4.1テンプレート分割方法
今日のMovable Type 4.1：超簡単！見よう見まねで覚えるMT4.1テンプレート分割方法
2008年2月13日 07:16
MT4.1はテンプレートを分割できないとポテンシャルを引き出せない
MT4.0は不完全な代物であったから、「まだ安定してないですから…」とか顧客先にいいわけができたが、MT4.1は完成度も高く、MT3.3x系と比べると比較にならない高機能だ。となれば、Movable Typeで糧を得るなら、テンプレートの分割を覚えるなければ未来はない。
技術的な説明抜き、見よう見まねで覚えるテンプレート分割方法のはじまり、はじまり
今日のコラムはテンプレートをどうしても分割できないという人に贈る。『理屈抜き見よう見まねで覚えましょう』といういい加減なやさしいテンプレート分割教室。MTSetVar、MTSetVarBlockがよくわからない方でもOK！でも、たぶんにできあがったソースが完璧とは言い難いので、後はご自分で勉強して調整してほしい。
![MT4.1[規定のブログ]](http://www.dakiny.com/archives/image/2008/01/mt4_1_02.jpg)
オリジナルのMovable Type 4.1のメインページのテンプレートはHTMLを、まず3つ分けている。サイドメニューとフッターが同色に分けられているのは意味がある（後でわかる）。
| ヘッダー＋バナー | ||
| コンテンツ | サイドメニュー | サイドメニュー |
| フッター | ||
まず、メインページのソースを見てみよう
<MTSetVar name="body_class" value="mt-main-index">
<MTSetVar name="main_template" value="1">
<MTSetVar name="main_index" value="1">
<MTSetVar name="sidebar" value="1">
<MTSetVarBlock name="title"><$MTBlogName encode_html="1"$></MTSetVarBlock>
<$MTInclude module="ヘッダー"$>
<MTEntries>
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
</MTEntries>
<div class="content-nav">
<a href="<$MTLink template="archive_index"$>">アーカイブ</a>
</div>
<$MTInclude module="フッター"$>
最初にMTSetVarではじまるMovable Type 4.1から登場したタグがあって、<$MTInclude module="ヘッダー"$>の下に少しテンプレートタグがあって、<$MTInclude module="フッター"$>で終わるけど、見慣れている<html><head></head><body></body></html>がどこにもない。MT3.3xを使い慣れた方でも戸惑ったに違いない。
コードを見るだけで分割方法を理解するのは難しいと思うので、このブログ（ローカルサーバー版）で実際に試してみた。ブログのレイアウトが変わったことに気づいた人、あなたは鋭い。モジュール化する上でサイドメニューが左右にあるのは面倒なので右にまとめたのだ(笑)。
分割の基本はHTMLソースを3つに分けること
3.3x以前にポピューラーであった1枚のHTMLテンプレートを分割してみよう。下記はこのブログのメインページのHTMLソースだ。文字背景色を上と同じ配色にしてあるのでどこで分割するのかわかると思う。スクロールしてご覧いただきたい。大事なのはどこで分割するかであって全体のソースは見なくてもいい。
＃というより見ないでほしい(汗)。
<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="ja" xml:lang="ja"> <!-- HEAD --> <head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="generator" content="Movable Type <$MTVersion$>" />
<meta name="dc.title" content="<$MTBlogName encode_html="1"$>" />
<meta name="keywords" content="Accessibility, Web標準, W3C, Google, SEO, SEM, Movable Type, XHTML, CSS, 三菱Jeep" />
<meta name="description" content="システム・クリエイター 蒲生トシヒロのコラム。夢をかなえる時間は余りに少ない。思想が合わない人と接すれば時間を失なう。少ない人生だから、理解してくれる人と共に生きよう。だから、世界中の１％の人々へ。" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="author" content="Dakiny" />
<meta name="copyright" content="Copyright (c) 2005 Dakiny" />
<meta name="CC.license" content="http://creativecommons.org/licenses/by-nc-sa/2.1/jp/" />
<link rev="made" href="mailto:info@gamo.jp" />
<link rel="index" href="/index.html" />
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>styles-site.css" media="all" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" />
<title><$MTBlogName encode_html="1"$></title>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />
<link rel="schema.CC" href="http://web.resource.org/cc/" />
<link rel="alternate" type="application/rss+xml" title="ROR" href="<$MTBlogURL$>ror.xml" />
<MTBlogIfCCLicense><$MTCCLicenseRDF$></MTBlogIfCCLicense>
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-178574-1";
urchinTracker();
</script>
</head> <!-- HEAD終了 --> <!-- BODY --> <body> <!-- コンテナ --> <div id="container"> <!-- バナー --> <div id="banner">
<div class="pad">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2><$MTBlogDescription$></h2>
<ul class="skip">
<li><a href="#content" title="このブログの説明を飛ばして本文に進みます">本文へジャンプ</a></li>
<li><a href="#right" title="このブログの説明を飛ばしてメニューに進みます">ページメニューへジャンプ</a></li>
</ul>
</div>
</div> <!-- バナー終了 --> <!-- コンテンツ --> <div id="content">
<div class="pad">
<div class="result">
<MTEntries> <$MTEntryTrackbackData$> <MTDateHeader>
<h2><$MTEntryDate format="%x"$>(<$MTEntryDate format="%a"$>)</h2>
</MTDateHeader>
<h3 id="a<$MTEntryID pad="1"$>"><$MTEntryTitle$></h3>
<div class="cate"> <MTEntryCategories>[<a href="<$MTCategoryArchiveLink$>"><$MTCategoryDescription$></a>] </MTEntryCategories> </div>
<$MTEntryBody$>
<MTEntryIfExtended>
<p class="extended"><a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a></p>
</MTEntryIfExtended>
<p class="posted">
投稿者: <$MTEntryAuthorDisplayName$> 日時: <$MTEntryDate format="%X"$> | <a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>"><img class="zero" style="vertical-align: middle" src="<$MTBlogURL$>b_entry.gif" alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" height="12" width="16" /></a> |
<a href="http://del.icio.us/post?url=<$MTEntryPermalink$>&title=<$MTBlogName encode_url="1"$>:<$MTEntryTitle encode_url="1"$>" target="_blank" title="このエントリをdel.icio.usに追加"><img style="border: 0px solid; vertical-align: middle" src="<$MTBlogURL$>archives/delicious.med.gif" alt="このエントリをdel.icio.usに追加" title="このエントリをdel.icio.usに追加" height="12" width="12" /></a> | <a href="http://clip.livedoor.com/redirect?link=<$MTEntryPermalink$>&title=<$MTBlogName encode_url="1"$>:<$MTEntryTitle encode_url="1"$>" class="ldclip-redirect" target="_blank" title="この記事をクリップ！"><img src="http://www.dakiny.com/archives/16_16_white.gif" width="16" height="16" alt="このエントリをlivedoorクリップに追加" title="このエントリをlivedoorクリップに追加" style="border: none;vertical-align:middle;" /></a> | <a class="permalink" href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>の個別表示">パーマリンク</a><MTIfCommentsActive> | <a href="<$MTEntryPermalink$>#comments" title="<$MTEntryTitle$>にコメントする">コメント(<$MTEntryCommentCount$>)</a></MTIfCommentsActive> <MTIfPingsActive> | <a href="<$MTEntryPermalink$>#trackback" title="<$MTEntryTitle$>にトラックバックする">トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive></p>
</MTEntries>
<MTEntries lastn="7" offset="3">
<MTDateHeader>
<h2 class="date-header"><$MTEntryDate format="%x"$></h2>
</MTDateHeader>
<h3 id="a<$MTEntryID pad="1"$>"><$MTEntryTitle$></h3>
<p><$MTEntryExcerpt$></p>
<p><a href="<$MTEntryLink$>" title="<$MTEntryTitle$>">続きを読む</a></p>
<p class="posted">
投稿者: <$MTEntryAuthorDisplayName$> 日時: <$MTEntryDate format="%X"$> | <a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>"><img class="zero" style="vertical-align: middle" src="<$MTBlogURL$>b_entry.gif" alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" height="12" width="16" /></a> |
<a href="http://del.icio.us/post?url=<$MTEntryPermalink$>&title=<$MTBlogName encode_url="1"$>:<$MTEntryTitle encode_url="1"$>" target="_blank" title="このエントリをdel.icio.usに追加"><img style="border: 0px solid; vertical-align: middle" src="<$MTBlogURL$>archives/delicious.med.gif" alt="このエントリをdel.icio.usに追加" title="このエントリをdel.icio.usに追加" height="12" width="12" /></a> | <a href="http://clip.livedoor.com/redirect?link=<$MTEntryPermalink$>&title=<$MTBlogName encode_url="1"$>:<$MTEntryTitle encode_url="1"$>" class="ldclip-redirect" target="_blank" title="この記事をクリップ！"><img src="http://www.dakiny.com/archives/16_16_white.gif" width="16" height="16" alt="このエントリをlivedoorクリップに追加" title="このエントリをlivedoorクリップに追加" style="border: none;vertical-align:middle;" /></a> | <a class="permalink" href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>の個別表示">パーマリンク</a><MTIfCommentsActive> | <a href="<$MTEntryPermalink$>#comments" title="<$MTEntryTitle$>にコメントする">コメント(<$MTEntryCommentCount$>)</a></MTIfCommentsActive> <MTIfPingsActive> | <a href="<$MTEntryPermalink$>#trackback" title="<$MTEntryTitle$>にトラックバックする">トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive></p>
</MTEntries>
</div>
</div>
</div> <!-- コンテンツ終了 --> <!-- サイドバー左 --> <div id="left">
<div class="pad">
<div id="calendar">
<table summary="投稿されたエントリーへのリンク付き月間カレンダー"><caption><$MTDate format="%B %Y"$></caption><tr><th abbr="S">S</th><th abbr="M">M</th><th abbr="T">T</th><th abbr="W">W</th><th abbr="T">T</th><th abbr="F">F</th><th abbr="S">S</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>
<h2>サイトについて</h2>
<ul>
<li>やるべきことはあまりに多い。決めた事を実現するには何よりもスピードが大切だ。過去にとどまり未知なる道を拒否する人に接すれば貴重な時間が失われ、精神的な疲労だけが残る。もはや40代後半、50も目前。残り少ない人生に夢の実現を賭けているから、理解ある人々と共に生きることにしよう。<br />
<em>だから、世界中の１％の人々へ</em></li></ul>
<ul>
<li><a href="http://b.hatena.ne.jp/entrylist?url=<$MTBlogURL$>"><img src="http://b.hatena.ne.jp/bc/<$MTBlogURL$>" class="bcounter" alt="「世界中の１％の人々へ」のはてなブックマーク数" title="「世界中の１％の人々へ」のはてなブックマーク数" width="75" height="14" /></a></li>
</ul>
<h2>作者について</h2>
<ul>
<li><img alt="ガモウトシヒロ" src="<$MTBlogURL$>archives/toshi.jpg" height="152" width="152" /> <br />
<strong>蒲生 トシヒロ</strong><br />
ハンドル：Dakiny<br />
生年月日：1959年９月２日 A型<br />
出 身：岐阜県岐阜市<br />
職 業：システム会社経営、システムデザイナー、マークアップエンジニア<br />
最終学歴：拓殖大学中退<br />
性 格：曲がったことが大嫌いで、仕事には厳しい職人気質。誰にでも言いたいことをいい。人にはよく変わり者と言われる。<br />
信 条：勉強するも仕事するも遊ぶが如し、さすれば本物<br />
夢 ：南の島で童話作家になること。<br />
VoxURL：<a href="http://dakiny.vox.com/" target="_blank">http://dakiny.vox.com/</a><br />
アドレス：<a href="mailto:gamo@it-pro.co.jp">gamo@it-pro.co.jp</a></li>
</ul>
<h2>参加プロジェクト</h2>
<ul>
<li>・<a href="https://sourceforge.jp/projects/tinymce-ja/" target="_blank">Sourceforge.Jp TinyMCE Japan</a> Administrator</li>
<li>・<a href="https://sourceforge.jp/projects/tinymce-for-mt/" target="_blank">Sourceforge.Jp TinyMCE for Movable Typeプロジェクト</a> Administrator</li>
<li>・<a href="http://websig247.jp/" target="_blank" title="WebSig24/7(ウェブシグ・トウェンティーフォーセブン)">WebSig24/7</a> Moderator</li>
<li><a href="http://sourceforge.jp/" target="_blank"><img width="96" height="31" alt="SourceForge.jp" class="zero" src="http://sourceforge.jp/sflogo.php?group_id=2230" /></a></li>
</ul>
<h2>会社</h2>
<ul>
<li> <img alt="ITプロフェッショナル" src="<$MTBlogURL$>archives/office.jpg" height="114" width="152" /><br />
<a href="http://www.it-pro.co.jp/" target="_blank"><strong>有限会社ITプロフェッショナル</strong><br />
</a>W3C準拠、アクセシビリティ、ユーザービリティをテーマとするWebシステム会社。<br />
スタッフは社員というより仲間という存在で、よい仕事をしようと知恵を出しあってる。<br />
<a href="http://www.sixapart.jp/" target="_blank">シックスアパート社</a>のプロネット会員で、現在はMovable Typeによる構築や、W3C勧告に基づいたマークアップエンジニアリングが業務の中心。</li>
</ul>
<h2>車</h2>
<ul>
<li> <img alt="三菱JEEP J53" src="<$MTBlogURL$>archives/jeep.jpg" height="114" width="152" /><br />
<strong>三菱JEEP J53</strong><br />
存在感があり、タフな車である。 オーナーにもタフさを要求するので、憧れだけでは乗り続けることはできない。<br />
エンジン音や風切音は騒々しいし、振動が多く乗り心地も悪い。パワステもエアコンもなく、夏は暑く冬は寒い。<br />
実用にはほど遠いが、それでも！私はこの車を愛する。</li>
</ul>
<h2>カメラ</h2>
<ul>
<li> <img alt="SONY Cyber-shot DSC-F717 & DSC-F828" src="<$MTBlogURL$>archives/digicame.jpg" height="114" width="152" /><br />
<strong>SONY Cyber-shot <br />
DSC-F717 & DSC-F828</strong><br />
同じメーカーなのに性格の全く異なる２台のデジタルカメラ。<br />
DSC-F717は誰でも、きれいに撮れる愛嬌のある性格。<br />
DSC-F828は高機能だが、使い手を選ぶ気むずかしい性格。<br />
それぞれに一長一短があり、用途により使い分ける。 </li>
</ul>
</div>
</div> <!-- サイドバー左終了 --> <!-- サイドバー右 --> <div id="right">
<div class="pad">
<!--
<h2>Search</h2>
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<p><input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">サイト内の検索</label><br />
<input id="search" class="fo" name="search" size="20" value="Keyword" tabindex="1" /><br /></p>
</form>
-->
<p><a href="http://mt4lp5.cssnite.jp/" target="_blank"><img src="http://mt4lp5.cssnite.jp/banner_mt4lp5_160-160.gif" alt="2008年4月5日開催、MT4LP5" width="160" height="160" /></a></p>
<!--blog_ajax_json_search.js start-->
<h2>Search</h2>
<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>blog_ajax_json_search.js"></script>
<form action="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt',
document.getElementById('search_box').value );">
<p><input type="text" id="search_box" value="" />
<input type="button" id="search_button" onclick="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt', document.getElementById('search_box').value );" onkeypress="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt', document.getElementById('search_box').value );" value="検索" /><br />
キャッシュ使用 <input checked="checked" name="ASuseReadCache" id="ASuseReadCache" type="checkbox" /><br />
Powered by <a title="暴想" href="http://java.cocolog-nifty.com/blog/" target="_blank">暴想</a></p>
</form>
<!--blog_ajax_json_search.js end-->
<h2 class="module-header">Download</h2>
<div class="px12">
<ul>
<li><a href="<$MTBlogURL$>tinymce/" target="_blank" title="TinyMCE fro Movabel Type">TinyMCE for MT</a></li>
<li><a href="<$MTBlogURL$>archives/movable-type/movable_typeajyaxmt/" title="Ajaxを利用したMT用高速検索システム">MT用高速検索システム</a>(MT3.3,MT4.1)</li>
<li><a href="<$MTBlogURL$>archives/movable-type/movable_type_4_movable_type_41fckeditor/" title="FCKeditorカスタムキットVer.1">FCKeditorカスタムキットVer.1</a>(MT4.1)</li>
<li><a href="<$MTBlogURL$>archives/movable-type/movable_type_41_fckedito_custom_kit_ver2/" title="FCKeditorカスタムキットVer.2">FCKeditorカスタムキットVer.2</a>(MT4.1)</li>
</ul>
</div>
<div class="module-tagcloud module">
<h2 class="module-header">Tag cloud</h2>
<div class="module-content">
<ul class="module-list">
<MTTags>
<li class="module-list-item taglevel<$MTTagRank$>"><a href="<$MTTagSearchLink$>"><$MTTagName$></a></li>
</MTTags>
</ul>
</div>
</div><br />
<MTIfArchiveTypeEnabled archive_type="Category">
<h2>Categories</h2>
<div class="px12"><MTTopLevelCategories><MTSubCatIsFirst>
<ul class="module-list">
</MTSubCatIsFirst> <MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryDescription> (<$MTCategoryCount$>)</a>
<MTElse>
<li><MTCategoryDescription> </MTElse> </MTIfNonZero> <MTSubCatsRecurse></li>
<MTSubCatIsLast>
</ul>
</MTSubCatIsLast> </MTTopLevelCategories> </div>
</MTIfArchiveTypeEnabled>
<h2>ArchiveList</h2>
<div class="px12">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span style="font-size: 130%"><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list"></MTArchiveDateHeader>
<li><a href="<$MTArchiveLink$>" title="<$MTArchiveDate format="%Y年%B月"$>のアーカイブページへ"><$MTArchiveDate format="%B月"$></a> (<$MTArchiveCount$>)</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</div>
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
//]]>
</script>
<h2>Trackbacks</h2>
<div class="px12">
<ul>
<MTPings lastn="5">
<li> <a href="<$MTPingURL$>"><$MTPingTitle$></a><br />
from <$MTPingBlogName$></li>
</MTPings>
</ul>
</div>
<h2>Comments</h2>
<div class="px12">
<ul>
<MTEntries recently_commented_on="7">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
<MTComments> <$MTCommentAuthor$> [<$MTCommentDate format="%m/%d %X"$>]<br />
</MTComments> </li>
</MTEntries>
</ul>
</div>
<h2>Links</h2>
<div class="px12">
<ul>
<li><strong>僕の会社</strong><br />
<a href="http://www.it-pro.co.jp/" target="_blank">有限会社ITプロフェッショナル</a></li>
<li><strong>mixi URL</strong><br />
<a href="http://mixi.jp/show_friend.pl?id=1474285" target="_blank">http://mixi.jp/show_friend.pl?id=1474285</a></li>
<li><strong>Vox URL</strong><br />
<a href="http://dakiny.vox.com/" target="_blank">http://dakiny.vox.com/</a></li>
<li><strong>ブクログ URL</strong><br />
<a href="http://booklog.jp/users/dakiny" target="_blank">http://booklog.jp/users/dakiny</a></li>
<li><strong>Tumblr URL</strong><br />
<a href="http://dakiny.tumblr.com/" target="_blank">http://dakiny.tumblr.com/</a></li>
<li><strong>Twitter URL</strong><br />
<a href="http://twitter.com/Dakiny" target="_blank">http://twitter.com/Dakiny</a></li>
<li><strong>Flickr</strong><br />
<a href="http://www.flickr.com/photos/dakiny/" target="_blank">http://www.flickr.com/photos/dakiny/</a></li>
<li><strong>僕の旧Web</strong><br />
<a href="http://ex.dakiny.com/" target="_blank">Dakiny's Room</a></li>
<li><strong>このブログのフィードを取得</strong><br />
<a href="<$MTBlogURL$>atom.xml" target="_blank"><img alt="このブログのフィードを取得" src="<$MTBlogURL$>xml.gif" width="36" height="14" /></a></li>
<li><a href="http://r.hatena.ne.jp/append/<$MTBlogURL$>" title="はてなRSSに追加"><img src="http://r.hatena.ne.jp/images/addto_w.gif" alt="はてなRSSに追加" title="はてなRSSに追加" height="22" width="89" class="zero" style="vertical-align: middle" /></a></li>
<li><a href="http://reader.livedoor.com/subscribe/<$MTBlogURL$>" target="_blank" title="Subscribe with livedoor Reader"><img src="http://image.reader.livedoor.com/img/banner/80_15_3.gif" width="80" height="15" class="zero" style="vertical-align: middle" alt="Subscribe with livedoor Reader" /></a></li>
<li><a href="http://www.bloglines.com/sub/<$MTBlogURL$>"><img src="http://static.bloglines.com/images/sub_modern8.gif" alt="Bloglinesで閲読登録" width="76" height="17" class="zero" style="vertical-align: middle" /></a></li>
<li><a href="http://www.technorati.jp/" target="_blank" title="Technorati JAPAN"><img alt="Technorati JAPAN" src="<$MTBlogURL$>archives/tn-tiny.gif" height="13" width="76" class="zero" /></a><br />
<a href="http://www.technorati.jp/search/www.dakiny.com" target="_blank" title="テクノラティ:「www.dakiny.com」のブログ記事検索結果">このブログの検索結果</a><br />
<a href="http://www.technorati.jp/profile/Dakiny" target="_blank" title="Technorati Profile for Dakiny">Dakinyのプロフィール</a></li>
<li><a href="http://del.icio.us/" target="_blank"><img src="http://images.del.icio.us/static/img/delicious.small.gif" alt="del.icio.us" width="10" height="10" class="zero" style="vertical-align: middle" /></a> <strong><a href="http://del.icio.us/Dakiny">my del.icio.us</a></strong></li>
</ul>
</div>
<p><a href="http://feedmeter.net/detail.php?r=http%3A%2F%2Fwww.dakiny.com%2Fatom.xml" target="feedmeter"><img src="http://feedmeter.net/image.php?r=http%3A%2F%2Fwww.dakiny.com%2Fatom.xml" class="zero" width="60" height="36" alt="人気ブログランキング - 世界中の１％の人々へ" /></a></p>
<p><a href="http://awasete.com/show.phtml?u=http%3A%2F%2Fwww.dakiny.com%2F" target="_blank"><img src="http://img.awasete.com/image.phtml?u=http%3A%2F%2Fwww.dakiny.com%2F" width="160" height="140" alt="あわせて読みたい" /></a></p>
<p><a href="http://trackfeed.com/"><img name="trackfeed_banner" id="trackfeed_banner"
src="http://img.trackfeed.com/img/tfg.gif" alt="track feed" width="80" height="15" class="zero" /></a>
<script type="text/javascript" src="http://script.trackfeed.com/usr/4c5d10087a.js"></script></p>
<p style="clear:both;"><a href="http://www.one.org/" target="_blank"><img alt="ONE Campaign" class="zero" src="<$MTBlogURL$>one.gif" width="150" height="150" /></a><br />
<strong>ONE Campaign</strong>（貧困とエイズを撲滅するキャンペーン）</p>
<p><!-- クリエイティブ・コモンズ・ライセンス --><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.1/jp/" target="_blank"><img src="http://i.creativecommons.org/l/by-nc-sa/2.1/jp/88x31.png" alt="クリエイティブ・コモンズ・ライセンス" class="imageleft" height="31" width="88" /></a><br />
この作品は、<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.1/jp/" target="_blank">クリエイティブ・コモンズ・ライセンス</a>の下でライセンスされています。<!-- /クリエイティブ・コモンズ・ライセンス --></p>
<p><a href="http://sourceforge.jp/" target="_blank"><img width="96" height="31" alt="SourceForge.jp" class="zero" src="http://sourceforge.jp/sflogo.php?group_id=2230" /></a><br />
<a href="http://validator.w3.org/check?uri=referer" target="_blank"><img src="<$MTBlogURL$>archives/valid-xhtml10.png" alt="Valid XHTML 1.0 Transitional" height="31" width="88" class="zero" /></a><br />
<a href="http://jigsaw.w3.org/css-validator/validator?uri=<$MTBlogURL$>" target="_blank"><img src="<$MTBlogURL$>archives/vcss.png" alt="Valid CSS!" height="31" width="88" class="zero" /></a><br />
<a href="http://www.w3.org/WAI/WCAG1A-Conformance" title="Explanation of Level -A Conformance" target="_blank"><img src="<$MTBlogURL$>archives/wcag1A.gif" alt="W3C-WAI Level -A" height="32" width="88" /></a><br />
<a href="http://feedvalidator.org/check.cgi?url=<$MTBlogURL$>index.xml" target="_blank"><img height="31" width="88" src="http://www.dakiny.com/archives/valid-rss.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a><br />
<a href="http://feedvalidator.org/check.cgi?url=<$MTBlogURL$>atom.xml" target="_blank"><img src="http://www.dakiny.com/archives/valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" height="31" width="88" /></a><br />
<a href="http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi?ViewSource=on" target="_blank"><img src="<$MTBlogURL$>archives/kaz-ahl.png" alt="Another HTML-lint" height="31" width="88" class="zero" /></a><br />
<a href="http://www.contentquality.com/" target="_blank"><img src="<$MTBlogURL$>archives/Ctested.gif" alt="Cynthia Tested!" height="31" width="88" /></a><br />
<a href="http://tinymce.moxiecode.com/" target="_blank"><img src="<$MTBlogURL$>archives/powered_by_tinymce.png" class="zero" width="88" height="32" alt="Powered by TinyMCE" /></a><br />
<a href="http://www.mozilla-japan.org/products/firefox/" target="_blank"><img src="<$MTBlogURL$>archives/get.gif" alt="Get Firefox" height="31" width="88" /></a></p>
<p>Powered by<br /><a href="http://www.movabletype.jp" target="_blank"><img alt="Powered by Movable Type 4" src="<$MTBlogURL$>archives/mt4-bug-pbmt-white.png" height="75" width="120" class="zero" /><br />Movable Type <$MTVersion$></a></p>
</div>
</div> <!-- サイドバー右終了 --> <!-- フッター --> <div style="clear: both;">
<script type="text/javascript" src="http://www.assoc-amazon.jp/s/link-enhancer?tag=dakinysroom-22"></script>
<noscript>
<img alt="Amazon" src="http://www.assoc-amazon.jp/s/noscript?tag=dakinysroom-22" height="0" width="0" />
</noscript>
</div> <!-- フッター終了 --> </div> <!-- コンテナ終了 --> </body> <!-- BODY終了 --> </html> <!-- HTML終了 -->
背景色ピンクの部分がヘッダーモジュール、背景紫がメインページ、背景色黄色がフッターモジュールになるのだが、途中で遠慮無くHTMLがぶった切られている。まあ、どこをどう分割するのかを理解したら作業に入ろう。
テンプレートの分割作業
1. ヘッダーモジュールテンプレートの作成
テンプレートモジュールから[モジュールテンプレートの作成]をクリック
[ヘッダー]と名前をつけ、既存のソースをカット＆ペースト
以下ソース
<!-- オリジナルテンプレートのヘッダーからペースト --> <mt:setvarblock name="html_head" prepend="1"> <MTIf name="main_template"> <link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTLink template="atom"$>" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="<$MTLink template="rss"$>" /> <MTUnless name="main_index"> <link rel="start" href="<$MTBlogURL$>" title="Home" /> </MTUnless> <$MTCCLicenseRDF$> </MTIf> </mt:setvarblock> <!-- 元のテンプレートからペースト --> <?xml version="1.0" encoding="UTF-8"?>
<!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" lang="ja" xml:lang="ja"> <!-- HEAD --> <head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="generator" content="Movable Type <$MTVersion$>" />
<meta name="dc.title" content="<$MTBlogName encode_html="1"$>" />
<meta name="keywords" content="Accessibility, Web標準, W3C, Google, SEO, SEM, Movable Type, XHTML, CSS, 三菱Jeep" />
<meta name="description" content="システム・クリエイター 蒲生トシヒロのコラム。夢をかなえる時間は余りに少ない。思想が合わない人と接すれば時間を失なう。少ない人生だから、理解してくれる人と共に生きよう。だから、世界中の１％の人々へ。" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="author" content="Dakiny" />
<meta name="copyright" content="Copyright (c) 2005 Dakiny" />
<meta name="CC.license" content="http://creativecommons.org/licenses/by-nc-sa/2.1/jp/" />
<link rev="made" href="mailto:info@gamo.jp" />
<link rel="index" href="/index.html" />
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>styles-site.css" media="all" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" />
<title><$MTBlogName encode_html="1"$></title>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />
<link rel="schema.CC" href="http://web.resource.org/cc/" />
<link rel="alternate" type="application/rss+xml" title="ROR" href="<$MTBlogURL$>ror.xml" />
<MTBlogIfCCLicense><$MTCCLicenseRDF$></MTBlogIfCCLicense>
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-178574-1";
urchinTracker();
</script>
</head> <!-- HEAD終了 --> <!-- BODY --> <body> <!-- コンテナ --> <div id="container"> <!-- バナー --> <div id="banner">
<div class="pad">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2><$MTBlogDescription$></h2>
<ul class="skip">
<li><a href="#content" title="このブログの説明を飛ばして本文に進みます">本文へジャンプ</a></li>
<li><a href="#right" title="このブログの説明を飛ばしてメニューに進みます">ページメニューへジャンプ</a></li>
</ul>
</div>
</div> <!-- バナー終了 -->
ソースをペーストし終えたら、何も考えず保存して終了。
2. フッターモジュールテンプレートの作成
[フッター]と名前をつけ、ソースをカット＆ペースト
以下ソース
<!-- サイドバー左 --> <div id="left">
<div class="pad">
<div id="calendar">
<table summary="投稿されたエントリーへのリンク付き月間カレンダー"><caption><$MTDate format="%B %Y"$></caption><tr><th abbr="S">S</th><th abbr="M">M</th><th abbr="T">T</th><th abbr="W">W</th><th abbr="T">T</th><th abbr="F">F</th><th abbr="S">S</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>
<h2>サイトについて</h2>
<ul>
<li>やるべきことはあまりに多い。決めた事を実現するには何よりもスピードが大切だ。過去にとどまり未知なる道を拒否する人に接すれば貴重な時間が失われ、精神的な疲労だけが残る。もはや40代後半、50も目前。残り少ない人生に夢の実現を賭けているから、理解ある人々と共に生きることにしよう。<br />
<em>だから、世界中の１％の人々へ</em></li></ul>
<ul>
<li><a href="http://b.hatena.ne.jp/entrylist?url=<$MTBlogURL$>"><img src="http://b.hatena.ne.jp/bc/<$MTBlogURL$>" class="bcounter" alt="「世界中の１％の人々へ」のはてなブックマーク数" title="「世界中の１％の人々へ」のはてなブックマーク数" width="75" height="14" /></a></li>
</ul>
<h2>作者について</h2>
<ul>
<li><img alt="ガモウトシヒロ" src="<$MTBlogURL$>archives/toshi.jpg" height="152" width="152" /> <br />
<strong>蒲生 トシヒロ</strong><br />
ハンドル：Dakiny<br />
生年月日：1959年９月２日 A型<br />
出 身：岐阜県岐阜市<br />
職 業：システム会社経営、システムデザイナー、マークアップエンジニア<br />
最終学歴：拓殖大学中退<br />
性 格：曲がったことが大嫌いで、仕事には厳しい職人気質。誰にでも言いたいことをいい。人にはよく変わり者と言われる。<br />
信 条：勉強するも仕事するも遊ぶが如し、さすれば本物<br />
夢 ：南の島で童話作家になること。<br />
VoxURL：<a href="http://dakiny.vox.com/" target="_blank">http://dakiny.vox.com/</a><br />
アドレス：<a href="mailto:gamo@it-pro.co.jp">gamo@it-pro.co.jp</a></li>
</ul>
<h2>参加プロジェクト</h2>
<ul>
<li>・<a href="https://sourceforge.jp/projects/tinymce-ja/" target="_blank">Sourceforge.Jp TinyMCE Japan</a> Administrator</li>
<li>・<a href="https://sourceforge.jp/projects/tinymce-for-mt/" target="_blank">Sourceforge.Jp TinyMCE for Movable Typeプロジェクト</a> Administrator</li>
<li>・<a href="http://websig247.jp/" target="_blank" title="WebSig24/7(ウェブシグ・トウェンティーフォーセブン)">WebSig24/7</a> Moderator</li>
<li><a href="http://sourceforge.jp/" target="_blank"><img width="96" height="31" alt="SourceForge.jp" class="zero" src="http://sourceforge.jp/sflogo.php?group_id=2230" /></a></li>
</ul>
<h2>会社</h2>
<ul>
<li> <img alt="ITプロフェッショナル" src="<$MTBlogURL$>archives/office.jpg" height="114" width="152" /><br />
<a href="http://www.it-pro.co.jp/" target="_blank"><strong>有限会社ITプロフェッショナル</strong><br />
</a>W3C準拠、アクセシビリティ、ユーザービリティをテーマとするWebシステム会社。<br />
スタッフは社員というより仲間という存在で、よい仕事をしようと知恵を出しあってる。<br />
<a href="http://www.sixapart.jp/" target="_blank">シックスアパート社</a>のプロネット会員で、現在はMovable Typeによる構築や、W3C勧告に基づいたマークアップエンジニアリングが業務の中心。</li>
</ul>
<h2>車</h2>
<ul>
<li> <img alt="三菱JEEP J53" src="<$MTBlogURL$>archives/jeep.jpg" height="114" width="152" /><br />
<strong>三菱JEEP J53</strong><br />
存在感があり、タフな車である。 オーナーにもタフさを要求するので、憧れだけでは乗り続けることはできない。<br />
エンジン音や風切音は騒々しいし、振動が多く乗り心地も悪い。パワステもエアコンもなく、夏は暑く冬は寒い。<br />
実用にはほど遠いが、それでも！私はこの車を愛する。</li>
</ul>
<h2>カメラ</h2>
<ul>
<li> <img alt="SONY Cyber-shot DSC-F717 & DSC-F828" src="<$MTBlogURL$>archives/digicame.jpg" height="114" width="152" /><br />
<strong>SONY Cyber-shot <br />
DSC-F717 & DSC-F828</strong><br />
同じメーカーなのに性格の全く異なる２台のデジタルカメラ。<br />
DSC-F717は誰でも、きれいに撮れる愛嬌のある性格。<br />
DSC-F828は高機能だが、使い手を選ぶ気むずかしい性格。<br />
それぞれに一長一短があり、用途により使い分ける。 </li>
</ul>
</div>
</div> <!-- サイドバー左終了 --> <!-- サイドバー右 --> <div id="right">
<div class="pad">
<!--
<h2>Search</h2>
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<p><input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">サイト内の検索</label><br />
<input id="search" class="fo" name="search" size="20" value="Keyword" tabindex="1" /><br /></p>
</form>
-->
<p><a href="http://mt4lp5.cssnite.jp/" target="_blank"><img src="http://mt4lp5.cssnite.jp/banner_mt4lp5_160-160.gif" alt="2008年4月5日開催、MT4LP5" width="160" height="160" /></a></p>
<!--blog_ajax_json_search.js start-->
<h2>Search</h2>
<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>blog_ajax_json_search.js"></script>
<form action="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt',
document.getElementById('search_box').value );">
<p><input type="text" id="search_box" value="" />
<input type="button" id="search_button" onclick="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt', document.getElementById('search_box').value );" onkeypress="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt', document.getElementById('search_box').value );" value="検索" /><br />
キャッシュ使用 <input checked="checked" name="ASuseReadCache" id="ASuseReadCache" type="checkbox" /><br />
Powered by <a title="暴想" href="http://java.cocolog-nifty.com/blog/" target="_blank">暴想</a></p>
</form>
<!--blog_ajax_json_search.js end-->
<h2 class="module-header">Download</h2>
<div class="px12">
<ul>
<li><a href="<$MTBlogURL$>tinymce/" target="_blank" title="TinyMCE fro Movabel Type">TinyMCE for MT</a></li>
<li><a href="<$MTBlogURL$>archives/movable-type/movable_typeajyaxmt/" title="Ajaxを利用したMT用高速検索システム">MT用高速検索システム</a>(MT3.3,MT4.1)</li>
<li><a href="<$MTBlogURL$>archives/movable-type/movable_type_4_movable_type_41fckeditor/" title="FCKeditorカスタムキットVer.1">FCKeditorカスタムキットVer.1</a>(MT4.1)</li>
<li><a href="<$MTBlogURL$>archives/movable-type/movable_type_41_fckedito_custom_kit_ver2/" title="FCKeditorカスタムキットVer.2">FCKeditorカスタムキットVer.2</a>(MT4.1)</li>
</ul>
</div>
<div class="module-tagcloud module">
<h2 class="module-header">Tag cloud</h2>
<div class="module-content">
<ul class="module-list">
<MTTags>
<li class="module-list-item taglevel<$MTTagRank$>"><a href="<$MTTagSearchLink$>"><$MTTagName$></a></li>
</MTTags>
</ul>
</div>
</div><br />
<MTIfArchiveTypeEnabled archive_type="Category">
<h2>Categories</h2>
<div class="px12"><MTTopLevelCategories><MTSubCatIsFirst>
<ul class="module-list">
</MTSubCatIsFirst> <MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryDescription> (<$MTCategoryCount$>)</a>
<MTElse>
<li><MTCategoryDescription> </MTElse> </MTIfNonZero> <MTSubCatsRecurse></li>
<MTSubCatIsLast>
</ul>
</MTSubCatIsLast> </MTTopLevelCategories> </div>
</MTIfArchiveTypeEnabled>
<h2>ArchiveList</h2>
<div class="px12">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span style="font-size: 130%"><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list"></MTArchiveDateHeader>
<li><a href="<$MTArchiveLink$>" title="<$MTArchiveDate format="%Y年%B月"$>のアーカイブページへ"><$MTArchiveDate format="%B月"$></a> (<$MTArchiveCount$>)</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</div>
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
//]]>
</script>
<h2>Trackbacks</h2>
<div class="px12">
<ul>
<MTPings lastn="5">
<li> <a href="<$MTPingURL$>"><$MTPingTitle$></a><br />
from <$MTPingBlogName$></li>
</MTPings>
</ul>
</div>
<h2>Comments</h2>
<div class="px12">
<ul>
<MTEntries recently_commented_on="7">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
<MTComments> <$MTCommentAuthor$> [<$MTCommentDate format="%m/%d %X"$>]<br />
</MTComments> </li>
</MTEntries>
</ul>
</div>
<h2>Links</h2>
<div class="px12">
<ul>
<li><strong>僕の会社</strong><br />
<a href="http://www.it-pro.co.jp/" target="_blank">有限会社ITプロフェッショナル</a></li>
<li><strong>mixi URL</strong><br />
<a href="http://mixi.jp/show_friend.pl?id=1474285" target="_blank">http://mixi.jp/show_friend.pl?id=1474285</a></li>
<li><strong>Vox URL</strong><br />
<a href="http://dakiny.vox.com/" target="_blank">http://dakiny.vox.com/</a></li>
<li><strong>ブクログ URL</strong><br />
<a href="http://booklog.jp/users/dakiny" target="_blank">http://booklog.jp/users/dakiny</a></li>
<li><strong>Tumblr URL</strong><br />
<a href="http://dakiny.tumblr.com/" target="_blank">http://dakiny.tumblr.com/</a></li>
<li><strong>Twitter URL</strong><br />
<a href="http://twitter.com/Dakiny" target="_blank">http://twitter.com/Dakiny</a></li>
<li><strong>Flickr</strong><br />
<a href="http://www.flickr.com/photos/dakiny/" target="_blank">http://www.flickr.com/photos/dakiny/</a></li>
<li><strong>僕の旧Web</strong><br />
<a href="http://ex.dakiny.com/" target="_blank">Dakiny's Room</a></li>
<li><strong>このブログのフィードを取得</strong><br />
<a href="<$MTBlogURL$>atom.xml" target="_blank"><img alt="このブログのフィードを取得" src="<$MTBlogURL$>xml.gif" width="36" height="14" /></a></li>
<li><a href="http://r.hatena.ne.jp/append/<$MTBlogURL$>" title="はてなRSSに追加"><img src="http://r.hatena.ne.jp/images/addto_w.gif" alt="はてなRSSに追加" title="はてなRSSに追加" height="22" width="89" class="zero" style="vertical-align: middle" /></a></li>
<li><a href="http://reader.livedoor.com/subscribe/<$MTBlogURL$>" target="_blank" title="Subscribe with livedoor Reader"><img src="http://image.reader.livedoor.com/img/banner/80_15_3.gif" width="80" height="15" class="zero" style="vertical-align: middle" alt="Subscribe with livedoor Reader" /></a></li>
<li><a href="http://www.bloglines.com/sub/<$MTBlogURL$>"><img src="http://static.bloglines.com/images/sub_modern8.gif" alt="Bloglinesで閲読登録" width="76" height="17" class="zero" style="vertical-align: middle" /></a></li>
<li><a href="http://www.technorati.jp/" target="_blank" title="Technorati JAPAN"><img alt="Technorati JAPAN" src="<$MTBlogURL$>archives/tn-tiny.gif" height="13" width="76" class="zero" /></a><br />
<a href="http://www.technorati.jp/search/www.dakiny.com" target="_blank" title="テクノラティ:「www.dakiny.com」のブログ記事検索結果">このブログの検索結果</a><br />
<a href="http://www.technorati.jp/profile/Dakiny" target="_blank" title="Technorati Profile for Dakiny">Dakinyのプロフィール</a></li>
<li><a href="http://del.icio.us/" target="_blank"><img src="http://images.del.icio.us/static/img/delicious.small.gif" alt="del.icio.us" width="10" height="10" class="zero" style="vertical-align: middle" /></a> <strong><a href="http://del.icio.us/Dakiny">my del.icio.us</a></strong></li>
</ul>
</div>
<p><a href="http://feedmeter.net/detail.php?r=http%3A%2F%2Fwww.dakiny.com%2Fatom.xml" target="feedmeter"><img src="http://feedmeter.net/image.php?r=http%3A%2F%2Fwww.dakiny.com%2Fatom.xml" class="zero" width="60" height="36" alt="人気ブログランキング - 世界中の１％の人々へ" /></a></p>
<p><a href="http://awasete.com/show.phtml?u=http%3A%2F%2Fwww.dakiny.com%2F" target="_blank"><img src="http://img.awasete.com/image.phtml?u=http%3A%2F%2Fwww.dakiny.com%2F" width="160" height="140" alt="あわせて読みたい" /></a></p>
<p><a href="http://trackfeed.com/"><img name="trackfeed_banner" id="trackfeed_banner"
src="http://img.trackfeed.com/img/tfg.gif" alt="track feed" width="80" height="15" class="zero" /></a>
<script type="text/javascript" src="http://script.trackfeed.com/usr/4c5d10087a.js"></script></p>
<p style="clear:both;"><a href="http://www.one.org/" target="_blank"><img alt="ONE Campaign" class="zero" src="<$MTBlogURL$>one.gif" width="150" height="150" /></a><br />
<strong>ONE Campaign</strong>（貧困とエイズを撲滅するキャンペーン）</p>
<p><!-- クリエイティブ・コモンズ・ライセンス --><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.1/jp/" target="_blank"><img src="http://i.creativecommons.org/l/by-nc-sa/2.1/jp/88x31.png" alt="クリエイティブ・コモンズ・ライセンス" class="imageleft" height="31" width="88" /></a><br />
この作品は、<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.1/jp/" target="_blank">クリエイティブ・コモンズ・ライセンス</a>の下でライセンスされています。<!-- /クリエイティブ・コモンズ・ライセンス --></p>
<p><a href="http://sourceforge.jp/" target="_blank"><img width="96" height="31" alt="SourceForge.jp" class="zero" src="http://sourceforge.jp/sflogo.php?group_id=2230" /></a><br />
<a href="http://validator.w3.org/check?uri=referer" target="_blank"><img src="<$MTBlogURL$>archives/valid-xhtml10.png" alt="Valid XHTML 1.0 Transitional" height="31" width="88" class="zero" /></a><br />
<a href="http://jigsaw.w3.org/css-validator/validator?uri=<$MTBlogURL$>" target="_blank"><img src="<$MTBlogURL$>archives/vcss.png" alt="Valid CSS!" height="31" width="88" class="zero" /></a><br />
<a href="http://www.w3.org/WAI/WCAG1A-Conformance" title="Explanation of Level -A Conformance" target="_blank"><img src="<$MTBlogURL$>archives/wcag1A.gif" alt="W3C-WAI Level -A" height="32" width="88" /></a><br />
<a href="http://feedvalidator.org/check.cgi?url=<$MTBlogURL$>index.xml" target="_blank"><img height="31" width="88" src="http://www.dakiny.com/archives/valid-rss.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a><br />
<a href="http://feedvalidator.org/check.cgi?url=<$MTBlogURL$>atom.xml" target="_blank"><img src="http://www.dakiny.com/archives/valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" height="31" width="88" /></a><br />
<a href="http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi?ViewSource=on" target="_blank"><img src="<$MTBlogURL$>archives/kaz-ahl.png" alt="Another HTML-lint" height="31" width="88" class="zero" /></a><br />
<a href="http://www.contentquality.com/" target="_blank"><img src="<$MTBlogURL$>archives/Ctested.gif" alt="Cynthia Tested!" height="31" width="88" /></a><br />
<a href="http://tinymce.moxiecode.com/" target="_blank"><img src="<$MTBlogURL$>archives/powered_by_tinymce.png" class="zero" width="88" height="32" alt="Powered by TinyMCE" /></a><br />
<a href="http://www.mozilla-japan.org/products/firefox/" target="_blank"><img src="<$MTBlogURL$>archives/get.gif" alt="Get Firefox" height="31" width="88" /></a></p>
<p>Powered by<br /><a href="http://www.movabletype.jp" target="_blank"><img alt="Powered by Movable Type 4" src="<$MTBlogURL$>archives/mt4-bug-pbmt-white.png" height="75" width="120" class="zero" /><br />Movable Type <$MTVersion$></a></p>
</div>
</div> <!-- サイドバー右終了 --> <!-- フッター --> <div style="clear: both;">
<script type="text/javascript" src="http://www.assoc-amazon.jp/s/link-enhancer?tag=dakinysroom-22"></script>
<noscript>
<img alt="Amazon" src="http://www.assoc-amazon.jp/s/noscript?tag=dakinysroom-22" height="0" width="0" />
</noscript>
</div> <!-- フッター終了 --> </div> <!-- コンテナ終了 --> </body> <!-- BODY終了 --> </html> <!-- HTML終了 -->
1. メインページテンプレートの作成
さて、いよいよメインページ、作業は慎重に。オリジナルテンプレートのメインページを開き、上から5行をカット&ペーストする。これはテンプレートを判別するための書式であるのでMovable Typeのテンプレートタグリファレンスを読んで勉強してほしい。特に、MTSetVar、MTSetVarBlockはMovable Type 4.1を扱う上で絶対に覚えなければならないテンプレートタグだ。現時点では見よう見まねでもいいが、後々、使い方を必ず習得してほしい。
<!-- オリジナルテンプレートのメインページからペースト - <MTSetVar name="body_class" value="mt-main-index"> <MTSetVar name="main_template" value="1"> <MTSetVar name="main_index" value="1"> <MTSetVar name="sidebar" value="1"> <MTSetVarBlock name="title"><$MTBlogName encode_html="1"$></MTSetVarBlock> <$MTInclude module="ヘッダー"$> <!-- コンテンツ --> <div id="content">
<div class="pad">
<div class="result">
<MTEntries> <$MTEntryTrackbackData$> <MTDateHeader>
<h2><$MTEntryDate format="%x"$>(<$MTEntryDate format="%a"$>)</h2>
</MTDateHeader>
<h3 id="a<$MTEntryID pad="1"$>"><$MTEntryTitle$></h3>
<div class="cate"> <MTEntryCategories>[<a href="<$MTCategoryArchiveLink$>"><$MTCategoryDescription$></a>] </MTEntryCategories> </div>
<$MTEntryBody$>
<MTEntryIfExtended>
<p class="extended"><a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a></p>
</MTEntryIfExtended>
<p class="posted">投稿者: <$MTEntryAuthorDisplayName$> 日時: <$MTEntryDate format="%X"$> | <a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>"><img class="zero" style="vertical-align: middle" src="http://www.dakiny.com/b_entry.gif" alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" height="12" width="16" /></a> |
<a href="http://del.icio.us/post?url=<$MTEntryPermalink$>&title=<$MTBlogName encode_url="1"$>:<$MTEntryTitle encode_url="1"$>" target="_blank" title="このエントリをdel.icio.usに追加"><img style="border: 0px solid; vertical-align: middle" src="http://www.dakiny.com/archives/delicious.med.gif" alt="このエントリをdel.icio.usに追加" title="このエントリをdel.icio.usに追加" height="12" width="12" /></a> | <a href="http://clip.livedoor.com/redirect?link=<$MTEntryPermalink$>&title=<$MTBlogName encode_url="1"$>:<$MTEntryTitle encode_url="1"$>" class="ldclip-redirect" target="_blank" title="この記事をクリップ！"><img src="http://www.dakiny.com/archives/16_16_white.gif" width="16" height="16" alt="このエントリをlivedoorクリップに追加" title="このエントリをlivedoorクリップに追加" style="border: none;vertical-align:middle;" /></a> | <a class="permalink" href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>の個別表示">パーマリンク</a><MTIfCommentsActive> | <a href="<$MTEntryPermalink$>#comments" title="<$MTEntryTitle$>にコメントする">コメント(<$MTEntryCommentCount$>)</a></MTIfCommentsActive> <MTIfPingsActive> | <a href="<$MTEntryPermalink$>#trackback" title="<$MTEntryTitle$>にトラックバックする">トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive></p>
</MTEntries>
<MTEntries lastn="7" offset="3">
<MTDateHeader>
<h2 class="date-header"><$MTEntryDate format="%x"$></h2>
</MTDateHeader>
<h3 id="a<$MTEntryID pad="1"$>"><$MTEntryTitle$></h3>
<p><$MTEntryExcerpt$></p>
<p><a href="<$MTEntryLink$>" title="<$MTEntryTitle$>">続きを読む</a></p>
<p class="posted">投稿者: <$MTEntryAuthorDisplayName$> 日時: <$MTEntryDate format="%X"$> | <a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>"><img class="zero" style="vertical-align: middle" src="http://www.dakiny.com/b_entry.gif" alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" height="12" width="16" /></a> |
<a href="http://del.icio.us/post?url=<$MTEntryPermalink$>&title=<$MTBlogName encode_url="1"$>:<$MTEntryTitle encode_url="1"$>" target="_blank" title="このエントリをdel.icio.usに追加"><img style="border: 0px solid; vertical-align: middle" src="http://www.dakiny.com/archives/delicious.med.gif" alt="このエントリをdel.icio.usに追加" title="このエントリをdel.icio.usに追加" height="12" width="12" /></a> | <a href="http://clip.livedoor.com/redirect?link=<$MTEntryPermalink$>&title=<$MTBlogName encode_url="1"$>:<$MTEntryTitle encode_url="1"$>" class="ldclip-redirect" target="_blank" title="この記事をクリップ！"><img src="http://www.dakiny.com/archives/16_16_white.gif" width="16" height="16" alt="このエントリをlivedoorクリップに追加" title="このエントリをlivedoorクリップに追加" style="border: none;vertical-align:middle;" /></a> | <a class="permalink" href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>の個別表示">パーマリンク</a><MTIfCommentsActive> | <a href="<$MTEntryPermalink$>#comments" title="<$MTEntryTitle$>にコメントする">コメント(<$MTEntryCommentCount$>)</a></MTIfCommentsActive> <MTIfPingsActive> | <a href="<$MTEntryPermalink$>#trackback" title="<$MTEntryTitle$>にトラックバックする">トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive></p>
</MTEntries>
</div>
</div>
</div> <!-- コンテンツ終了 --> <$MTInclude module="フッター"$>
ペーストが終わったら、保存したら再構築
トップページがちゃんと表示されて機能に問題なければ、メインページのテンプレート分割完成(笑)。
後は同じ要領で、アーカイブテンプレートを作っていくけばいい。さらなるモジュール化や細かい調整はすべてのテンプレートを分割した後でおこなったほうが理解が早い。後、見よう見まねの方は運用しているサイトで作業を行わず、必ずローカルサーバーで実験すること。
関心をもつきっかけは達成感！であることが多い
参考になれば幸い。
投稿者: Dakiny 日時: 2008年2月13日 07:16 | 
| 
トラックバック
このエントリーのトラックバックURL:
http://www.dakiny.com/mtos/mt-tb.cgi/1567
※文章内容と関係のないトラックバックは固くお断り。
この一覧は、次のエントリーを参照しています: 今日のMovable Type 4.1：超簡単！見よう見まねで覚えるMT4.1テンプレート分割方法:
» MT4.1:モジュール化（雑談ですが） from Under the Bridge
Movable Type 4 のモジュール化について。... [詳しくはこちら]
トラックバック時刻: 2008年2月14日 00:26
