WEBデザイン　BLOG

WEBデザインをはじめMT・Firefox・WEB2.0関連情報等の備忘録

8月 15日 2006

MTのレイアウトカスタマイズ：ブロックのモジュール化

スカイパー 20:20 MT , カスタマイズ
Tags: Movable Type , MT , カスタマイズ , デザイン , ムーバルタイプ , モジュール

MT（Movable Type[ムーバルタイプ] 3.31-ja）を導入してデフォルト（初期設定）のテンプレートだとイマイチなので、自分なりにレイアウト（デザイン）のカスタマイズをしてみました。実際に今後の変更を容易にし易くするために部分毎にモジュール化しました。MTのレイアウトカスタマイズは、各ブロックをモジュール化することで更新・変更作業が容易になります。モジュール化の方法とデフォルトでの各モジュールコードを残しておきます。

モジュール化のメリット

各ブロックをモジュール化することでスタイルシートでの全体的なレイアウト変更も容易になります。また、各ブロック事での細かい変更もし易くなると思います。コードが複雑になってくると把握するのにも時間がかかりますし、ちょっとしたコード変更でサイトレイアウトが崩れた場合の問題点発見・修正にも時間をかけることなく解決できると思います。

モジュール化の仕方

【テンプレート】＞【モジュール】において、【モジュールの新規作成】にて好きなモジュール名で各ブロックを登録しておきます。モジュール化した後は、【テンプレート】＞【インデックス】でデフォルトのメインページにモジュールタグ（例：<$MTInclude module="モジュール名"$>）を組み込むだけで同じ表示になります。コードも簡素化することができ、変更・修正等が楽になります。

ヘッダーブロックのモジュール化（インデックスページ）

ページのヘッダー部分をモジュールとして登録します。モジュール名は好きな名前でかまいません。大文字・小文字の組み合わせでもOKです。とりあえず、モジュール名を”HEADER”にて登録しておきます。以下のテキストエリアの部分のコードがデフォルト（初期設定）でのコードとなります。下記のコードをすべて選択してモジュール登録すればOKです。

実際にメインページでのコードは<$MTInclude module="HEADER"$>となります。

エントリーブロックのモジュール化（インデックスページ）

メインのエントリー部分をモジュールとして登録します。モジュール名は好きな名前でかまいません。大文字・小文字の組み合わせでもOKです。とりあえず、モジュール名を”indexentry”にて登録しておきます。以下のテキストエリアの部分のコードがデフォルト（初期設定）でのコードとなります。下記のコードをすべて選択してモジュール登録すればOKです。

実際にメインページでのコードは<$MTInclude module="indexentry"$>となります。

<div id="alpha-inner" class="pkg">
                  
	<MTEntries>
	<$MTEntryTrackbackData$>
                     
	<MTDateHeader><h2 class="date-header"><$MTEntryDate format="%x"$></h2></MTDateHeader>
	<div class="entry" id="entry-<$MTEntryID$>">
		<h3 class="entry-header"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
		<div class="entry-content">
			<div class="entry-body">
				<$MTEntryBody$>
				<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
				<p class="entry-more-link">
				<a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>" »</a>
				</p>
				</MTIfNonEmpty>

サイドブロック：検索ブロックのモジュール化（インデックスページ）

サイドコンテンツ部分の各ブロックを個別にモジュールとして登録します。
サイドコンテンツ中の「検索」部分のモジュール化です。モジュール名は好きな名前でかまいません。大文字・小文字の組み合わせでもOKです。とりあえず、モジュール名を”search”にて登録しておきます。以下のテキストエリアの部分のコードがデフォルト（初期設定）でのコードとなります。下記のコードをすべて選択してモジュール登録すればOKです。

実際にメインページでのコードは<$MTInclude module="search"$>となります。

サイドブロック：最近のエントリーブロックのモジュール化（インデックスページ）

サイドコンテンツ中の「最近のエントリー」部分のモジュール化です。モジュール名は好きな名前でかまいません。大文字・小文字の組み合わせでもOKです。とりあえず、モジュール名を”latestentry”にて登録しておきます。以下のテキストエリアの部分のコードがデフォルト（初期設定）でのコードとなります。下記のコードをすべて選択してモジュール登録すればOKです。

実際にメインページでのコードは<$MTInclude module="latestentry"$>となります。

サイドブロック：カテゴリーブロックのモジュール化（インデックスページ）

サイドコンテンツ中の「カテゴリー」部分のモジュール化です。モジュール名は好きな名前でかまいません。大文字・小文字の組み合わせでもOKです。とりあえず、モジュール名を”listcategory”にて登録しておきます。以下のテキストエリアの部分のコードがデフォルト（初期設定）でのコードとなります。下記のコードをすべて選択してモジュール登録すればOKです。

実際にメインページでのコードは<$MTInclude module="listcategory"$>となります。

サイドブロック：アーカイブブロックのモジュール化（インデックスページ）

サイドコンテンツ中の「カテゴリー」部分のモジュール化です。モジュール名は好きな名前でかまいません。大文字・小文字の組み合わせでもOKです。とりあえず、モジュール名を”listarchive”にて登録しておきます。以下のテキストエリアの部分のコードがデフォルト（初期設定）でのコードとなります。下記のコードをすべて選択してモジュール登録すればOKです。

実際にメインページでのコードは<$MTInclude module="listarchive"$>となります。

サイドブロック：クリエイティブコモンズライセンスブロックのモジュール化（インデックスページ）

サイドコンテンツ中の「クリエイティブコモンズライセンス」部分のモジュール化です。モジュール名は好きな名前でかまいません。大文字・小文字の組み合わせでもOKです。とりあえず、モジュール名を”CClicense”にて登録しておきます。以下のテキストエリアの部分のコードがデフォルト（初期設定）でのコードとなります。下記のコードをすべて選択してモジュール登録すればOKです。

実際にメインページでのコードは<$MTInclude module="CClicense"$>となります。

サイドブロック：ムーバルタイプリンクブロックのモジュール化（インデックスページ）

サイドコンテンツ中の「ムーバルタイプリンク」部分のモジュール化です。モジュール名は好きな名前でかまいません。大文字・小文字の組み合わせでもOKです。とりあえず、モジュール名を”MovableTypeLink”にて登録しておきます。以下のテキストエリアの部分のコードがデフォルト（初期設定）でのコードとなります。下記のコードをすべて選択してモジュール登録すればOKです。

実際にメインページでのコードは<$MTInclude module="MovableTypeLink"$>となります。

以上までがインデックスページでのすべてのブロックのモジュール化の為のデフォルトコードとなります。

メインページのコードの書き換え

上記の各ブロックのモジュール化ができましたら、今度はコードを書き換えます。以下がデフォルトの状態でのメインページのコードとなります。とてつもなく長いコードでちょっとしたカスタマイズにも変更したい部分を探すのにも手間がかかります。デフォルトのコードの下にモジュール化した後のコードを記述しておきます。どれくらいコードが簡素化できるか比べてみてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
   <meta name="generator" content="<$MTProductName version="1"$>" />
   
   <link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
   <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" />
   
   <MTBlogIfCCLicense>
   <$MTCCLicenseRDF$>
   </MTBlogIfCCLicense>
</head>

<div id="container">
      <div id="container-inner" class="pkg">
      
         <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>
         </div>
         
         <div id="pagebody">
            <div id="pagebody-inner" class="pkg">
               <div id="alpha">
                  <div id="alpha-inner" class="pkg">
                  
                     <MTEntries>
                     <$MTEntryTrackbackData$>
                     
                     <MTDateHeader><h2 class="date-header"><$MTEntryDate format="%x"$></h2></MTDateHeader>
                     <div class="entry" id="entry-<$MTEntryID$>">
                        <h3 class="entry-header"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
                        <div class="entry-content">
                           <div class="entry-body">
                              <$MTEntryBody$>
                              <MTIfNonEmpty tag="EntryMore" convert_breaks="0">
                              <p class="entry-more-link">
                                 <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>" »</a>
                              <p></p>
                              </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>
                        </div>
                        <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>
                           <MTIfCommentsActive>| <a href="<$MTEntryPermalink$>#comments">コメント (<$MTEntryCommentCount$>)</a></MTIfCommentsActive>
                           <MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackback">トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive>
                        <p></p>
                     </div>
                     </MTEntries>
                  </div>
               </div>
               
               <div id="beta">
                  <div id="beta-inner" class="pkg">
                     <div class="module-search module">
                        <h2 class="module-header">検索</h2>
                        <div class="module-content">
                           <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>
                     
                     <div class="module-archives module">
                        <h2 class="module-header">最近のエントリー</h2>
                        <div class="module-content">
                           <ul class="module-list">
                           <MTEntries lastn="10">
                              <li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
                           </MTEntries>
                           </ul>
                           <a href="<$MTBlogURL$>atom.xml">このブログのフィードを取得</a><br />
                           [<a href="http://www.sixapart.jp/about/feeds">フィードとは</a>]
                        </div>
                     </div>
                     
                     <MTIfArchiveTypeEnabled archive_type="Category"><div class="module-categories module">
                        <h2 class="module-header">カテゴリー</h2>
                        <div class="module-content">
                        <MTTopLevelCategories>
                        <MTSubCatIsFirst><ul class="module-list"></MTSubCatIsFirst>
                           <MTIfNonZero tag="MTCategoryCount">
                           <li class="module-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>
                           <MTElse>
                           <li class="module-list-item"><MTCategoryLabel>
                           </MTElse>
                           </MTIfNonZero>
                              <MTSubCatsRecurse>
                           </li>
                        <MTSubCatIsLast></ul></MTSubCatIsLast>
                        </MTTopLevelCategories>
                        </div>
                     </div>
                     </MTIfArchiveTypeEnabled>
                     
                     <MTIfArchiveTypeEnabled archive_type="Monthly">
                     <div class="module-archives module">
                        <h2 class="module-header"><a href="<$MTBlogURL$>archives.html">アーカイブ</a></h2>
                        <div class="module-content">
                        <MTArchiveList archive_type="Monthly">
                           <MTArchiveListHeader><ul class="module-list"></MTArchiveListHeader>
                              <li class="module-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
                           <MTArchiveListFooter></ul></MTArchiveListFooter>
                        </MTArchiveList>
                        </div>
                     </div>
                     </MTIfArchiveTypeEnabled>
                     
                     
                     <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>
                     
                     <div class="module-powered module">
                        <div class="module-content">
                           Powered by<br /><a href="http://www.sixapart.jp/movabletype/">Movable Type</a>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>

以下がモジュール化したブロックを記述したコードになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

以上がインデックスページのコードとなります。このように書き直すことでコードがかなり簡素化できます。また、上記はインデックスページとなります。まだ、エントリーページ・カテゴリーページ・アーカイブページ・検索結果表示ページなど各ページ毎にモジュール化を行い、コードの書き換えをする必要があります。

徐々にカスタマイズの説明を増やして行きます。コードを簡素化することで全体のレイアウトのブロックを把握することができ、スタイルシートの変更によるデザイン変更も容易になります。

Technorati Tags: Movable Type , MT , カスタマイズ , デザイン , ムーバルタイプ , モジュール

<<; 無料ホストサーバーXREAにMovable Type ムーバルタイプ設置完了 | Top | エントリーアーカイブページブロックのモジュール化１ »

トラックバック

このエントリーのトラックバックURL:
http://weblibrary.s224.xrea.com/x/mt/mt-tb.cgi/18

WEBデザイン BLOG