このカテゴリでは、テンプレートを自分で作成するための注意事項や作業手順の一例を紹介します。
『テンプレートの作成例』カテゴリ内のエントリ一覧
- MT4のテンプレートとは
- テンプレートの題材について
- 先に問題点を洗い出しておく
- XHTMLの構造を確認する
- モジュール化設計
- テンプレートファイル・モジュールファイルの準備
- 型枠となるXHTMLファイルを作成
- テンプレート化のルールを決める
- (インデックス)メインページのテンプレート
- (インデックス)アーカイブインデックスのテンプレート
- (アーカイブ)ブログ記事のテンプレート
- (アーカイブ)ウェブページのテンプレート
- (アーカイブ)ブログ記事リストのテンプレート
- (システム)検索結果のテンプレート
- (システム)コメント完了のテンプレート
- (システム)コメントプレビューのテンプレート
- (モジュール)ブログ記事の概要のモジュール
- (モジュール)ブログ記事の詳細のモジュール
- (モジュール)ウェブページの詳細のモジュール
- (モジュール)ブログ記事のメタデータのモジュール
- (モジュール)コメントのモジュール
- (モジュール)コメント入力フォームのモジュール
- (モジュール)コメント詳細のモジュール
- (モジュール)カテゴリのモジュール
- (モジュール)タグのモジュール
- (モジュール)トラックバックのモジュール
- (追加)mdlXMLDecのモジュール
- (追加)mdlMetaのモジュール
- (モジュール)ヘッダーのモジュール
- (追加)mdlExtraのモジュール
- (モジュール)サイドバーのモジュール
- (モジュール)フッターのモジュール
- (スタイルシート)スタイルシート
MT4のテンプレートとは
Movable Type 4 からは、多くのパーツのモジュール化・ウィジェット化や変数の使用が進んだことにより、テンプレートの内容をある程度理解している人からすると合理的に扱いやすくなりました。その反面、初めて扱うような場合にはどこへ手を入れてよいかがわかりづらく、内容を理解するためにはかなりの時間と労力が必要とされるようです。
Movable Type 4 では、役割により5タイプのテンプレートで構成されます。詳細は、ドキュメントページ「テンプレートの種類と役割」を参照してください。
- インデックステンプレート
- アーカイブテンプレート
- テンプレートモジュール
- システムテンプレート
- ウィジェット
ここでは、シンプルなXHTMLサンプルとCSSサンプルを用いたプレーンなテンプレートを作成する手順を解説します。
テンプレートの題材について
テンプレートの作成は、完成された出来合いのXHTML+CSSを用い、それをMovable Type 4 で使用できるテンプレートモジュールにするという形で進めます。
今回は、説明用に作成したXHTML+CSS題材を用います(なお、このサイトでは、この手順で作成したテンプレートを用いています)。
ソース
今回は、メインコンテンツとサイドバーを2本含むサンプルを用います。以下は、雛形となるXHTMLファイルのコードです。コンテナ階層がわかりやすいよう、インデントをつけてあります。
<?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" xml:lang="ja" lang="ja" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Sample</title>
</head>
<body>
<div id="headcontent">
<h1>This Is a Sample</h1>
<p id="sitedescription">This In a Sample XHTML Pages.</p>
</div>
<div id="maincontainer">
<div id="maincontent">
<p>メインコンテンツ</p>
</div>
<div id="subcontent">
<p>サイドバー1</p>
</div>
<div id="extracontent">
<p>サイドバー2</p>
</div>
</div>
<div id="footcontent">
<address>アドレス</address>
</div>
</body>
</html>
先に問題点を洗い出しておく
今回の作業では、Movable Type 4 用のテンプレートの挙動を理解しつつ、実用に耐える簡素なプレーンテンプレートを作成することを目的とします。
まず、題材となるXHTMLを用いて、そのままテンプレート化を行うとすると、あとあと問題になりそうな部分があります。自分なりにその点をチェックして、紙などに書き出しておきます。まずは「そのままのXHTML→テンプレート化の作業」に集中し、「あとでまとめて問題点を直す」という作業を分けるためです。
予想される問題点
- metaセクションの内容がMovable Typeのデフォルトテンプレートの内容と異なる。
- 何も考えずにテンプレート化すると、どのページもtitle要素の内容が同じになる可能性。
- 何も考えずにテンプレート化すると、どのページもh1要素の内容が同じになる可能性。
- 見出しタグ(h1、h2、h3...)をどうするか考えておく。
- 今のところ、コメントやタグクラウドの細かいclass定義がない。どうするか。
- XHTMLの構造がデフォルトテンプレートと異なる。
など...というところでしょうか。
XHTMLの構造を確認する
まず、サンプルのXHTMLのコードを確認します。これはテンプレートをどうモジュール化するかを検討する際に必要な準備です。
サンプルのXHTMLは、以下のようなコードになっています。
<?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" xml:lang="ja" lang="ja" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Sample</title>
</head>
<body>
<div id="headcontent">
<h1>This Is a Sample</h1>
<p id="sitedescription">This In a Sample XHTML Pages.</p>
</div>
<div id="maincontainer">
<div id="maincontent">
<p>メインコンテンツ</p>
</div>
<div id="subcontent">
<p>サイドバー1</p>
</div>
<div id="extracontent">
<p>サイドバー2</p>
</div>
</div>
<div id="footcontent">
<address>アドレス</address>
</div>
</body>
</html>
XHTML文書構造が、明らかにデフォルトテンプレートとは異なります。
body要素内は、headcontent(ヘッダ)、maincontainer(メインコンテナ)、メインコンテナの内部にmaincontent(メインコンテンツ)、subcontent(サイドバー1)、extracontent(サイドバー2)、そしてfootcontent(フッター)というグループからの構成となっています。
このうち、headcontent、mainkontainer、footcontentはフラットな同一階層です。
モジュール化設計
どのようなモジュール化を行うかを検討し、機能別にグループ分けしてモジュールとして切り出す部分を決定します。
サンプルのXHTML構造であると、デフォルトテンプレートのように、ブロックの途中で区切るようなモジュール化をする必要はなさそうです。
今回は、図のように線囲みの部分を切り出しモジュール化します。
テンプレートファイル・モジュールファイルの準備
書き換えになるモジュール
今回のテンプレート作成例では、ほとんど全てのテンプレートおよびモジュールが書き換えとなります。また、下リスト内でXHTMLの構造が大幅な変更となるモジュールを強調表示し、divブロックのid要素名と機能を記載しています。
「(1)(2)(3)テンプレートファイル」は、再構築されると一枚のXHTMLページになり、(4)(5)テンプレートモジュール」は、それ自身ではXHTMLファイルとはなりえない単なる部品である点に注意してください。
- (1)インデックステンプレート
-
- main_index.mtml(メインページ)
- archive_index.mtml(アーカイブインデックス)
- styles.mtml(スタイルシート)
- (2)アーカイブテンプレート
-
- entry.mtml(ブログ記事)
- entry_listing.mtml(ブログ記事リスト)
- page.mtml(ウェブページ)
- (3)システムテンプレート
-
- search_results.mtml(検索結果)
- comment_response.mtml(コメント完了)
- comment_preview.mtml(コメントプレビュー)
- (4)テンプレートモジュール
-
- page_detail.mtml(ウェブページの詳細)
- categories.mtml(カテゴリ)
- comments.mtml(コメント)
- comment_form.mtml(コメント入力フォーム)
- comment_detail.mtml(コメント詳細)
- tags.mtml(タグ)
- trackbacks.mtml(トラックバック)
- entry_metadata.mtml(ブログ記事のメタデータ)
- entry_summary.mtml(ブログ記事の概要)
- entry_detail.mtml(ブログ記事の詳細)
- Header.mtml(ヘッダー)/ headcontentのidブロック。ヘッダーの内容。
- sidebar.mtml(サイドバー) / subcontentのidブロック。サイドバー1の内容。
- footer.mtml(フッター) / footcontentのidブロック。フッターの内容。
追加になるモジュール
英語名称で命名します。無理に日本語化する必要はありません。
- (5)追加テンプレートモジュール
-
- mdlXMLDec.mtml(XML宣言)/ XHTML先頭行のXML宣言をモジュール化。
- mdlMeta.mtml(メタデータ・タイトル)/ headセクション。主にメタデータ。タイトルも。
- mdlExtra.mtml(サイドバ2ーエリア)/ extracontentのidブロック。サイドバー2の内容。
自分のパソコンの作業用ローカルフォルダ内へ、(1)(2)(3)(4)のファイルをMovable Type 4 デフォルトテンプレートのある default_templates フォルダからコピー、(5)のファイルを空ファイルで作成しておきます。
型枠となるXHTMLファイルを作成
型枠となるXHTMLテンプレートを作成します。テンプレートの題材XHTMLファイルより不要部分をカットし、今回追加するモジュールをインクルードする記述を追記します。XHTMLの階層構造を無視して壊さないように注意します。
<$MTInclude module="mdlXMLDec"$>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" id="sixapart-standard">
<$MTInclude module="mdlMeta"$>
<body<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>
<$MTInclude module="ヘッダー"$>
<div id="maincontainer">
<div id="maincontent">
メインコンテンツの内容
</div>
<$MTInclude module="サイドバー"$>
<$MTInclude module="mdlExtra"$>
</div>
<$MTInclude module="フッター"$>
</body>
</html>
ひとつ、目につくところでは、bodyの後ろに変数でbody_onloadをつける準備をしているところです。これは、実際にはテンプレート先頭部で宣言されている変数制御により、コメントフォームがあるテンプレートでしか付加されないコードです。
- (1)インデックステンプレート
-
- main_index.mtml(メインページ)
- archive_index.mtml(アーカイブインデックス)
- (2)アーカイブテンプレート
-
- entry.mtml(ブログ記事)
- entry_listing.mtml(ブログ記事リスト)
- page.mtml(ウェブページ)
- (3)システムテンプレート
-
- search_results.mtml(検索結果)
- comment_response.mtml(コメント完了)
- comment_preview.mtml(コメントプレビュー)
修正するテンプレートファイルは、合計で7個です。ダイナミックパブリッシング・ポップアップウィンドウは今回は使用しません。
テンプレート化のルールを決める
計画的にテンプレートとモジュールを作成し、後々の修正の手間を最小限にするために、XHTMLをテンプレート化・モジュール化する一定のルールを決めておくべきです。
例えば、以下のような例です。
- 見出しh1は再構築後出来上がったひとつのXHTMLファイルにつき一回に限る。
- ヘッダ内の見出しh1の内容は必ずサイト名とする。
- maincontent内カテゴリ・エントリリスト見出しはh2とする。
- subcontent、extracontent内カテゴリ・エントリリストなどはdl、dt、ddでマークアップする。見出しはdt、内容がddとなる。div空ブロックは使用しない。
- 見出しは文書全てでh1、h2、h3、h4までしか使用しない。
- プレーンなXHTMLを目指し、デフォルトテンプレートで目に付く不要なdiv空ブロック、特殊なid名・class名はなるべく削除する方向で。
「あれ?ここはどうやるんだったっけ?h2?h3?」ということがなくなると、作業もはかどります。
なお、上のリストはあくまでもサンプルですので、本エントリを参考にされる方は適宜変えてください。
予約変数・テンプレート識別変数を使用する
以下はどの種類のページでどういう表示を行うか、などといった作業には欠かせない、テンプレート予約変数・テンプレート識別変数です。これは、例えば「メインインデックスページでのみタグクラウドを設置する」などといったことをやるときは必須となります。
※マークのついたもの以外は全てデフォルトと同じ名前です。
- メインインデックスであるかどうか判断
- MTIf name="main_index"
- システム以外全てであるかどうか判断
- MTIf name="main_template"
- カテゴリ類全部であるかどうか判断
- MTIf name="archive_listing"
- 日時用カテゴリのみであるかどうか判断
- MTIf name="datebased_only_archive"
- Auther用カテゴリのみであるかどうか判断
- MTIf name="author_archive"
- カテゴリのみであるかどうか判断
- MTIf name="category_archive"
- エントリのみであるかどうか判断
- MTIf name="entry_template"
- ウェブページのみであるかどうか判断
- MTIf name="page_template"
- エントリおよびウェブページであるかどうか判断
- feedback_template
- 検索ページであるかどうか判断
- MTIf name="search_results_template"
- コメント完了ページであるかどうか判断(※今回の例で追加)
- MTIf name="comment_response_template"
- コメントプレビューページであるかどうか判断
- MTIf name="comment_preview_template"
- システムページであるかどうか判断
- MTIf name="system_template"
(インデックス)メインページのテンプレート
インデックステンプレート>メインページのテンプレート記述例です。
ファイル名:main_index.mtml
<$MTInclude module="mdlXMLDec"$>
<MTIgnore>変数宣言</MTIgnore>
<MTSetVar name="body_class" value="mt-main-index">
<MTSetVar name="main_template" value="1">
<MTSetVar name="main_index" value="1">
<MTSetVarBlock name="title"><$MTBlogName encode_html="1"$></MTSetVarBlock>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" id="sixapart-standard">
<$MTInclude module="mdlMeta"$>
<body<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>
<$MTInclude module="ヘッダー"$>
<div id="maincontainer">
<div id="maincontent">
<h2>TOPページの記事</h2>
<p>ここにTOPページの記事を書きます。</p>
</div>
<$MTInclude module="サイドバー"$>
<$MTInclude module="mdlExtra"$>
</div>
<$MTInclude module="フッター"$>
</body>
</html>
以下、特記事項です。
- mdlXMLDecインクルードを変数宣言の前に追加。
- 変数宣言部分はデフォルトテンプレートからのコピペ。
(インデックス)アーカイブインデックスのテンプレート
インデックステンプレート>アーカイブインデックスのテンプレート記述例です。
ファイル名:archive_index.mtml
<$MTInclude module="mdlXMLDec"$>
<MTIgnore>変数宣言</MTIgnore>
<MTSetVar name="body_class" value="mt-archive-index">
<MTSetVar name="main_template" value="1">
<MTSetVar name="archive_index" value="1">
<MTSetVar name="module_about_context" value="1">
<MTSetVarBlock name="page_title">アーカイブ</MTSetVarBlock>
<MTSetVarBlock name="title"><$MTBlogName encode_html="1"$>: <$MTGetVar name="page_title"$></MTSetVarBlock>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" id="sixapart-standard">
<$MTInclude module="mdlMeta"$>
<body<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>
<$MTInclude module="ヘッダー"$>
<div id="maincontainer">
<div id="maincontent">
<h2>このブログの全ての記事</h2>
<MTCategories>
<MTSetVarBlock name="LopCatName"><MTCategoryLabel></MTSetVarBlock>
<h3><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryLabel remove_html="1"$>"><$MTCategoryLabel remove_html="1"$>[<$MTCategoryCount$>]</a></h3>
<ul>
<MTEntries lastn="0" category="$LopCatName">
<li><a href="<$MTEntryPermalink$>" title="Permalink:<$MTEntryTitle$>"><MTEntryTitle></a></li>
</MTEntries>
</ul>
</MTCategories>
</div>
<$MTInclude module="サイドバー"$>
<$MTInclude module="mdlExtra"$>
</div>
<$MTInclude module="フッター"$>
</body>
</html>
以下、特記事項です。
- mdlXMLDecインクルードを変数宣言の前に追加。
- 変数宣言部分はデフォルトテンプレートからのコピペ。
- maincontent内のコードは、サンプルとして、全てのカテゴリを出力し、かつカテゴリが内包する全エントリを展開するコードを記載。
(アーカイブ)ブログ記事のテンプレート
アーカイブ>ブログ記事(エントリ)のテンプレート記述例です。
ファイル名:entry.mtml
<$MTInclude module="mdlXMLDec"$>
<MTIgnore>変数宣言</MTIgnore>
<MTSetVar name="body_class" value="mt-archive-listing mt-entry-archive">
<MTSetVar name="module_about_context" value="1">
<MTIfCommentsAccepted><$MTSetVar name="body_onload" value="individualArchivesOnLoad(commenter_name)"$></MTIfCommentsAccepted>
<MTSetVarBlock name="page_title"><$MTEntryTitle$></MTSetVarBlock>
<MTSetVarBlock name="title"><$MTGetVar name="page_title"$></MTSetVarBlock>
<MTSetVarBlock name="html_head">
<MTEntryPrevious><link rel="prev" href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>" /></MTEntryPrevious>
<MTEntryNext><link rel="next" href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>" /></MTEntryNext>
<MTIfPingsAccepted><$MTEntryTrackbackData$></MTIfPingsAccepted>
<MTIfCommentsAccepted><script type="text/javascript" src="<$MTLink template="javascript"$>"></script></MTIfCommentsAccepted>
</MTSetVarBlock>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" id="sixapart-standard">
<$MTInclude module="mdlMeta"$>
<body<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>
<$MTInclude module="ヘッダー"$>
<div id="maincontainer">
<div id="maincontent">
<$MTInclude module="ブログ記事の詳細"$>
<$MTInclude module="カテゴリ"$>
<$MTInclude module="タグ"$>
<$MTInclude module="トラックバック"$>
<$MTInclude module="コメント"$>
</div>
<$MTInclude module="サイドバー"$>
<$MTInclude module="mdlExtra"$>
</div>
<$MTInclude module="フッター"$>
</body>
</html>
以下、特記事項です。
- mdlXMLDecインクルードを変数宣言の前に追加。
- 変数宣言部分はデフォルトテンプレートからのコピペ。
- このテンプレートからインクルードするモジュールは極力デフォルトのものをそのまま利用する。
- title変数は「エントリ名 - ブログ名」となっているので、「エントリ名」のみに変更。※1
- このテンプレートを再構築するとき、bodyに続く「onload="individualArchivesOnLoad(commenter_name)"」が付加される。
※1 title変数の変更コード
変更前
<MTSetVarBlock name="title"><$MTGetVar name="page_title"$> - <$MTBlogName encode_html="1"$></MTSetVarBlock>
変更後
<MTSetVarBlock name="title"><$MTGetVar name="page_title"$></MTSetVarBlock>
(アーカイブ)ウェブページのテンプレート
アーカイブ>ウェブページのテンプレート記述例です。
ファイル名:page.mtml
<$MTInclude module="mdlXMLDec"$>
<MTIgnore>変数宣言</MTIgnore>
<MTSetVar name="body_class" value="mt-archive-listing mt-page-archive">
<MTIfCommentsAccepted><$MTSetVar name="body_onload" value="individualArchivesOnLoad(commenter_name)"$></MTIfCommentsAccepted>
<MTSetVarBlock name="page_title"><$MTPageTitle$></MTSetVarBlock>
<MTSetVarBlock name="title"><$MTGetVar name="page_title"$></MTSetVarBlock>
<MTSetVarBlock name="html_head">
<MTIfPingsAccepted><$MTEntryTrackbackData$></MTIfPingsAccepted>
<MTIfCommentsAccepted><script type="text/javascript" src="<$MTLink template="javascript"$>"></script></MTIfCommentsAccepted>
</MTSetVarBlock>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" id="sixapart-standard">
<$MTInclude module="mdlMeta"$>
<body<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>
<$MTInclude module="ヘッダー"$>
<div id="maincontainer">
<div id="maincontent">
<$MTInclude module="ウェブページの詳細"$>
<$MTInclude module="タグ"$>
<$MTInclude module="トラックバック"$>
<$MTInclude module="コメント"$>
</div>
<$MTInclude module="サイドバー"$>
<$MTInclude module="mdlExtra"$>
</div>
<$MTInclude module="フッター"$>
</body>
</html>
以下、特記事項です。
- mdlXMLDecインクルードを変数宣言の前に追加。
- 変数宣言部分はデフォルトテンプレートからのコピペ。
- このテンプレートからインクルードするモジュールは極力デフォルトのものをそのまま利用する。
- title変数は「ウェブページ名 - ブログ名」となっているので、「ウェブページ名」のみに変更。※1
※1 title変数の変更コード
変更前
<MTSetVarBlock name="title"><$MTGetVar name="page_title"$> - <$MTBlogName encode_html="1"$></MTSetVarBlock>
変更後
<MTSetVarBlock name="title"><$MTGetVar name="page_title"$></MTSetVarBlock>
(アーカイブ)ブログ記事リストのテンプレート
アーカイブ>ブログ記事リスト(カテゴリ)のテンプレート記述例です。
ファイル名:entry_listing.mtml
<$MTInclude module="mdlXMLDec"$>
<MTIgnore>変数宣言</MTIgnore>
<MTSetVarBlock name="body_class">mt-archive-listing mt-<MTVar name="archive_class"></MTSetVarBlock>
<MTSetVar name="module_about_context" value="1">
<MTSetVarBlock name="page_title"><$MTArchiveTitle$>アーカイブ</MTSetVarBlock>
<MTSetVarBlock name="title"><$MTGetVar name="page_title" remove_html="1"$></MTSetVarBlock>
<MTIf name="datebased_archive">
<MTSetVarBlock name="html_head">
<MTArchivePrevious><link rel="prev" href="<$MTArchiveLink$>" title="<$MTArchiveTitle remove_html="1" encode_html="1"$>" /></MTArchivePrevious>
<MTArchiveNext><link rel="next" href="<$MTArchiveLink$>" title="<$MTArchiveTitle remove_html="1" encode_html="1"$>" /></MTArchiveNext>
</MTSetVarBlock>
</MTIf>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" id="sixapart-standard">
<$MTInclude module="mdlMeta"$>
<body<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>
<$MTInclude module="ヘッダー"$>
<div id="maincontainer">
<div id="maincontent">
<MTEntries lastn="0">
<$MTEntryTrackbackData$>
<$MTInclude module="ブログ記事の概要"$>
</MTEntries>
</div>
<$MTInclude module="サイドバー"$>
<$MTInclude module="mdlExtra"$>
</div>
<$MTInclude module="フッター"$>
</body>
</html>
以下、特記事項です。
- mdlXMLDecインクルードを変数宣言の前に追加。
- 変数宣言部分はデフォルトテンプレートからのコピペ。
- title変数は「ブログ名:カテゴリ名」となっているので、「カテゴリ名」のみに変更。※1
※1 title変数の変更コード
変更前
<MTSetVarBlock name="title"><$MTBlogName encode_html="1"$>: <$MTGetVar name="page_title"$></MTSetVarBlock>
変更後
<MTSetVarBlock name="title"><$MTGetVar name="page_title"$></MTSetVarBlock>
(システム)検索結果のテンプレート
システムテンプレート>検索結果のテンプレート記述例です。
ファイル名:search_results.mtml
<?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">
<MTIgnore>変数宣言</MTIgnore>
<MTSetVar name="body_class" value="mt-search-results">
<MTSetVar name="system_template" value="1">
<MTSetVar name="search_results_template" value="1">
<MTSetVarBlock name="page_title">検索結果</MTSetVarBlock>
<MTSetVarBlock name="title"><$MTBlogName encode_html="1"$>: <$MTGetVar name="page_title"$></MTSetVarBlock>
<MTIfStraightSearch>
<MTSetVar name="search_type" value="search">
<MTElse>
<MTSetVar name="search_type" value="tag">
</MTIfStraightSearch>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" id="sixapart-standard">
<$MTInclude module="mdlMeta"$>
<body<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>
<$MTInclude module="ヘッダー"$>
<div id="maincontainer">
<div id="maincontent">
<MTSearchResults>
<MTBlogResultHeader>
<h2>
<MTIfStraightSearch>
<$MTBlogName encode_html="1"$>で「<$MTSearchString$>」と一致するもの
</MTIfStraightSearch>
<MTIfTagSearch>
<$MTBlogName encode_html="1"$>でタグ「<$MTSearchString$>」が付けられているもの
</MTIfTagSearch>
</h2>
</MTBlogResultHeader>
<$MTInclude module="ブログ記事の概要"$>
</MTSearchResults>
<MTNoSearchResults>
<h2>
<MTIfStraightSearch>
「<$MTSearchString$>」と一致するもの
</MTIfStraightSearch>
<MTIfTagSearch>
タグ「<$MTSearchString$>」が付けられているもの
</MTIfTagSearch>
</h2>
<p>「<$MTSearchString$>」と一致する結果は見つかりませんでした。</p>
</MTNoSearchResults>
<MTNoSearch>
<h2>例</h2>
<p>すべての単語が順序に関係なく検索されます。フレーズで検索したいときは引用符で囲んでください。</p>
<p>例:<code>"movable type"</code></p>
<p>AND、OR、NOTを入れることで論理検索を行うこともできます。</p>
<p>例1:<code>個人 OR 出版</code></p>
<p>例2:<code>個人 NOT 出版</code></p>
</MTNoSearch>
</div>
<$MTInclude module="サイドバー"$>
<$MTInclude module="mdlExtra"$>
</div>
<$MTInclude module="フッター"$>
</body>
</html>
以下、特記事項です。
- このテンプレートはmdlXMLDecをインクルードしません。システムテンプレートの場合、サイトをphp化する際にも、常にhtmlで出力されるため、XML宣言の変更を必要としないからです。
- 変数宣言部分はデフォルトテンプレートからのコピペ。
(システム)コメント完了のテンプレート
システムテンプレート>コメント完了のテンプレート記述例です。
ファイル名:comment_response.mtml
<?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">
<MTIgnore>変数宣言</MTIgnore>
<MTSetVar name="system_template" value="1">
<MTSetVar name="comment_response_template" value="1">
<MTIf name="body_class" eq="mt-comment-confirmation">
<MTSetVarBlock name="page_title">投稿されたコメント</MTSetVarBlock>
<MTSetVar name="heading" value="確認">
<MTSetVarBlock name="message">
<p>コメントを投稿しました。</p>
</MTSetVarBlock>
</MTIf>
<MTIf name="body_class" eq="mt-comment-pending">
<MTSetVarBlock name="page_title">コメント保留中</MTSetVarBlock>
<MTSetVar name="heading" value="コメントありがとうございます。">
<MTSetVarBlock name="message">
<p>コメントは現在承認されるまで公開を保留されています。</p>
</MTSetVarBlock>
</MTIf>
<MTIf name="body_class" eq="mt-comment-error">
<MTSetVarBlock name="page_title">コメント投稿エラー</MTSetVarBlock>
<MTSetVar name="heading" value="$page_title">
<MTSetVarBlock name="message">
<p>コメントの投稿に失敗しました:</p>
<blockquote>
<$MTErrorMessage$>
</blockquote>
</MTSetVarBlock>
</MTIf>
<MTSetVarBlock name="title"><$MTBlogName encode_html="1"$>: <$MTGetVar name="page_title"$></MTSetVarBlock>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" id="sixapart-standard">
<$MTInclude module="mdlMeta"$>
<body<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>
<$MTInclude module="ヘッダー"$>
<div id="maincontainer">
<div id="maincontent">
<h2><$MTGetVar name="heading"$></h2>
<$MTGetVar name="message"$>
<p><a href="<$MTEntryLink$>">元のブログ記事</a>に戻る</p>
</div>
<$MTInclude module="サイドバー"$>
<$MTInclude module="mdlExtra"$>
</div>
<$MTInclude module="フッター"$>
</body>
</html>
以下、特記事項です。
- このテンプレートはmdlXMLDecをインクルードしません。システムテンプレートの場合、サイトをphp化する際にも、常にhtmlで出力されるため、XML宣言の変更を必要としないからです。
- 変数宣言部分はデフォルトテンプレートからのコピペ。
- コメント完了専用の参照変数 comment_response_template 変数を変数宣言へ追加する。
(システム)コメントプレビューのテンプレート
システムテンプレート>コメントプレビューのテンプレート記述例です。
ファイル名:comment_preview.mtml
<?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">
<MTIgnore>変数宣言</MTIgnore>
<MTSetVar name="body_class" value="mt-comment-preview">
<MTSetVar name="body_onload" value="individualArchivesOnLoad(commenter_name)">
<MTSetVar name="system_template" value="1">
<MTSetVar name="comment_preview_template" value="1">
<MTSetVar name="feedback_template" value="1">
<MTSetVarBlock name="page_title"><$MTEntryTitle$>へのコメント</MTSetVarBlock>
<MTSetVarBlock name="title"><$MTBlogName encode_html="1"$>: <$MTGetVar name="page_title"$></MTSetVarBlock>
<MTSetVarBlock name="html_head">
<script type="text/javascript" src="<$MTLink template="javascript"$>"></script>
</MTSetVarBlock>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" id="sixapart-standard">
<$MTInclude module="mdlMeta"$>
<body<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>
<$MTInclude module="ヘッダー"$>
<div id="maincontainer">
<div id="maincontent">
<h2>コメントの確認</h2>
<$MTInclude module="コメント詳細"$>
<$MTInclude module="コメント"$>
</div>
<$MTInclude module="サイドバー"$>
<$MTInclude module="mdlExtra"$>
</div>
<$MTInclude module="フッター"$>
</body>
</html>
以下、特記事項です。
- このテンプレートはmdlXMLDecをインクルードしません。システムテンプレートの場合、サイトをphp化する際にも、常にhtmlで出力されるため、XML宣言の変更を必要としないからです。
- 変数宣言部分はデフォルトテンプレートからのコピペ。
(モジュール)ブログ記事の概要のモジュール
テンプレートモジュール>ブログ記事の概要のモジュール記述例です。
このテンプレートは、通常、メインページやブログ記事リストからインクルードされます。エントリの追記を含まない本文部分を生成するテンプレートです。
ファイル名:entry_summary.mtml
<h2><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h2>
<$MTInclude module="ブログ記事のメタデータ"$>
<MTIfNonEmpty tag="EntryBody">
<$MTEntryBody>
</MTIfNonEmpty>
<MTIfTagSearch>
<$MTInclude module="タグ"$>
</MTIfTagSearch>
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<p class="moreread"><a href="<$MTEntryPermalink$>#more" title="<$MTEntryTitle$>"><$MTEntryTitle$></a>の続きを読む</p>
</MTIfNonEmpty>
以下、特記事項です。
- 冗長なdivブロックを削除する。
- 不要なid名・class名を削除する。
- 「追記」部分をpタグでマークアップする。
(モジュール)ブログ記事の詳細のモジュール
テンプレートモジュール>ブログ記事の詳細のモジュール記述例です。
このテンプレートは、通常、ブログ記事からインクルードされます。ブログ記事(エントリ)の概要までを含んだ完全な本文部分を生成するテンプレートです。
ファイル名:entry_detail.mtml
<h2><$MTEntryTitle$></h2>
<$MTInclude module="ブログ記事のメタデータ"$>
<MTIfNonEmpty tag="EntryBody">
<$MTEntryBody$>
</MTIfNonEmpty>
<MTIfNonEmpty tag="EntryMore" convert_breaks="0">
<div id="more">
<$MTEntryMore$>
</div>
</MTIfNonEmpty>
以下、特記事項です。
- デフォルトテンプレートではタイトルが何故かh1見出しとなっているので、h2見出しへ変更。
- 冗長なdivブロックを削除する。
- 不要なid名・class名を削除する。ただし、div id=moreブロックは「追記」へのアンカーとなるため削除しない。
- カテゴリやタグへのリンクは削除。
(モジュール)ウェブページの詳細のモジュール
テンプレートモジュール>ウェブページの詳細のモジュール記述例です。
このテンプレートは、通常、ウェブページからインクルードされます。ウェブページの概要までを含んだ完全な本文部分を生成するテンプレートです。
ファイル名:page_detail.mtml
<h2><$MTPageTitle$></h2>
<MTIfNonEmpty tag="PageBody">
<$MTPageBody$>
</MTIfNonEmpty>
<MTIfNonEmpty tag="PageMore" convert_breaks="0">
<div id="more">
<$MTPageMore"$>
</div>
</MTIfNonEmpty>
以下、特記事項です。
- タイトルが何故かh1見出しとなっているので、h2見出しへ変更。
- 冗長なdivブロックを削除する。
- 不要なid名・class名を削除する。ただし、div id=moreブロックは「追記」へのアンカーとなるため削除しない。
(モジュール)ブログ記事のメタデータのモジュール
テンプレートモジュール>ブログ記事のメタデータのモジュール記述例です。
このテンプレートは、通常、ブログ記事モジュールやブログ記事リストモジュールからインクルードされています。いわゆる共用の孫モジュールです。
ファイル名:entry_metadata.mtml
<p>
<MTIfNonEmpty tag="EntryAuthorDisplayName">
<$MTEntryDate language="ja" format="%x %X"$> | Writer: <$MTEntryAuthorLink show_url="1"$> | <a href="<$MTEntryPermalink$>" title="Permalink:<$MTEntryTitle$>">記事本文</a>
<MTElse>
<$MTEntryDate language="ja" format="%x %X"$> | <a href="<$MTEntryPermalink$>" title="Permalink:<$MTEntryTitle$>">記事本文</a>
</MTIfNonEmpty>
<MTUnless name="hide_counts" eq="1">
<MTIfCommentsActive>| <a href="<$MTEntryPermalink$>#comments" title="Comments for <$MTEntryTitle$>">コメント(<$MTEntryCommentCount$>)</a></MTIfCommentsActive>
<MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackback" title="Trackback for <$MTEntryTitle$>">トラックバック(<$MTEntryTrackbackCount$>)</a></MTIfPingsActive>
</MTUnless>
</p>
以下、特記事項です。
- 冗長なdivブロックを削除する。
- 不要なid名・class名を削除する。
- spanタグをpタグで置き換える。
(モジュール)コメントのモジュール
テンプレートモジュール>コメントのモジュール記述例です。
このモジュールは、エントリに対して投稿されたコメントを表示するためのものです。
ファイル名:comments.mtml
<MTIfCommentsActive>
<div id="comments">
<MTIf name="comment_preview_template"><$MTInclude module="コメント入力フォーム"$></MTIf>
<MTComments>
<MTCommentsHeader>
<h3>コメント(<$MTEntryCommentCount$>)</h3>
</MTCommentsHeader>
<div class="comments-unit">
<$MTInclude module="コメント詳細"$>
</div>
</MTComments>
<MTUnless name="comment_preview_template">
<$MTInclude module="コメント入力フォーム"$>
</MTUnless>
</div>
</MTIfCommentsActive>
以下、特記事項です。
- デフォルトテンプレートではタイトルがh2見出しとなっているので、h3見出しへ変更。
- 冗長なdivブロックを削除する。
- 不要なid名・class名を削除する。
- 不要なdivを削除したあとMTCommentsFooterテンプレートタグは不要になるので撤去する。
- div id="comments"はアンカーリンクとして、div class="comments-unit"(新設)はひとつのコメントをまとめる目的で使用する。CSSへはこの二つのidとclass定義を追加する。
(モジュール)コメント入力フォームのモジュール
テンプレートモジュール>コメント入力フォームのモジュール記述例です。
このモジュールは、エントリに対してコメントを投稿する時に使用するテキストボックスなどを表示するためのものです。
ファイル名:comment_form.mtml
<MTIfCommentsAccepted>
<div class="comments-open" id="comments-open">
<h3 class="comments-open-header">コメントする</h3>
<div class="comments-open-content">
<MTIfRegistrationAllowed>
<div id="comment-form-external-auth">
<script type="text/javascript">
<!--
<MTIf name="comment_preview_template">is_preview = true;</MTIf>
writeCommenterGreeting(commenter_name, <$MTEntryID$>, <$MTEntryBlogID$>, commenter_id, commenter_url);
//-->
</script>
</div>
</MTIfRegistrationAllowed>
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
<input type="hidden" name="__lang" value="<$MTBlogLanguage$>" />
<div id="comments-open-data">
<div id="comment-form-name">
<label for="comment-author">名前</label><br />
<input id="comment-author" name="author" size="30" value="<MTIf name="comment_preview_template"><$MTCommentAuthor encode_html="1"$></MTIf>" />
</div>
<div id="comment-form-email">
<label for="comment-email">電子メール</label><br />
<input id="comment-email" name="email" size="30" value="<MTIf name="comment_preview_template"><$MTCommentEmail encode_html="1"$></MTIf>" />
</div>
<div id="comment-form-url">
<label for="comment-url">URL</label><br />
<input id="comment-url" name="url" size="30" value="<MTIf name="comment_preview_template"><$MTCommentURL encode_html="1"$></MTIf>" />
</div>
<div id="comment-form-remember-me"><br />
<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>
</div>
</div>
<div id="comments-open-text">
<label for="comment-text">コメント <MTIfAllowCommentHTML>(スタイル用のHTMLタグを使うことができます)</MTIfAllowCommentHTML></label><br />
<textarea id="comment-text" name="text" rows="15" cols="50"><MTIf name="comment_preview_template"><$MTCommentBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$></MTIf></textarea>
</div>
<MTIfNonEmpty tag="MTCaptchaFields">
<MTIfCommentsAccepted><MTIfRegistrationAllowed><MTElse><$MTCaptchaFields$></MTIfRegistrationAllowed></MTIfCommentsAccepted>
<div id="comments-open-captcha">
</div>
</MTIfNonEmpty>
<div id="comments-open-footer">
<input type="submit" accesskey="v" name="preview" id="comment-preview" value="確認" />
<input type="submit" accesskey="s" name="post" id="comment-submit" value="投稿" />
<MTIf name="comment_preview_template">
<input type="button" name="cancel" id="comment-cancel" value="キャンセル" onclick="window.location='<$MTEntryPermalink$>'" />
</MTIf>
</div>
</form>
</div>
</div>
</MTIfCommentsAccepted>
以下、特記事項です。
- タイトルがh2見出しとなっているので、h3見出しへ変更。
- 名前、電子メール、url、コメント記憶、コメントテキストにはbrタグを付加。
- 少し複雑なので基本的にはデフォルトのまま。
(モジュール)コメント詳細のモジュール
テンプレートモジュール>コメント詳細のモジュール記述例です。
このモジュールは、エントリに対して投稿されたコメントをひとつのみ表示するためのものです。コメントモジュールやコメントプレビューモジュールからインクルードされます。
ファイル名:comment_detail.mtml
<p><span class="vcard author"><$MTCommentAuthorLink default_name="Anonymous" show_email="0"$></span><MTIfNonEmpty tag="CommentAuthorIdentity"><$MTCommentAuthorIdentity$></MTIfNonEmpty> (<$MTCommentDate$>)</p>
<$MTCommentBody$>
<$MTCommentDate language="ja" format="%x %X"$>
以下、特記事項です。
- 冗長なdivブロックを削除する。
- 不要なid名・class名を削除する。
- コメント投稿日時を付加する。
(モジュール)カテゴリのモジュール
テンプレートモジュール>カテゴリモジュール記述例です。
このモジュールは、「ブログ記事の詳細」モジュールよりインクルードされる孫モジュールです。エントリの属するカテゴリを表示する機能を持っています。
ファイル名:categories.mtml
<MTIfNonEmpty tag="EntryCategory">
<div class="entry-categories">
<h3 class="entry-categories-header">カテゴリ<span class="delimiter">:</span></h3>
<ul class="entry-categories-list">
<li class="entry-category"><MTEntryCategories glue='<span class="delimiter">,</span></li> <li class="entry-category">'><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel remove_html="1"$></a></MTEntryCategories></li>
</ul>
</div>
</MTIfNonEmpty>
(モジュール)タグのモジュール
テンプレートモジュール>タグモジュール記述例です。
このモジュールは、「ブログ記事の詳細」モジュールよりインクルードされる孫モジュールです。エントリについているタグを表示する機能を持っています。
ファイル名:tags.mtml
<MTEntryIfTagged>
<div class="entry-tags">
<h3 class="entry-tags-header">タグ<span class="delimiter">:</span></h3>
<ul class="entry-tags-list">
<li class="entry-tag"><MTEntryTags glue='<span class="delimiter">,</span></li> <li class="entry-tag">'><a href="<$MTTagSearchLink$>&IncludeBlogs=<$MTBlogID$>" rel="tag"><$MTTagName$></a></MTEntryTags></li>
</ul>
</div>
</MTEntryIfTagged>
(モジュール)トラックバックのモジュール
テンプレートモジュール>トラックバックのモジュール記述例です。
このモジュールは、「ブログ記事の詳細」モジュールよりインクルードされる孫モジュールです。エントリのトラックバックデータを表示する機能を持っています。
ファイル名trackbacks.mtml
<MTIfPingsActive>
<h3 id="trackback">トラックバック(<$MTEntryTrackbackCount$>)</h3>
<p>このブログ記事を参照しているブログ一覧: <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></p>
<p>このブログ記事に対するトラックバックURL: <input accesskey="B" tabindex="1" type="text" value="<$MTEntryTrackbackLink$>" readonly="readonly" id="trackback-url" name="trackback-url" size="50" /></p>
<MTPings>
<div class="trackback" id="ping-<$MTPingID$>">
<p>» <a href="<$MTPingURL$>"><$MTPingTitle$></a>(<$MTPingBlogName$>)~のトラックバック</p>
<p><$MTPingExcerpt$> <a href="<$MTPingURL$>">続きを読む</a></p>
<p><a href="#ping-<$MTPingID$>"><$MTPingDate$></a></p>
</div>
</MTPings>
</MTIfPingsActive>
見やすいようインデントと改行を入れています。
以下、特記事項です。
- デフォルトテンプレートではタイトルがh2見出しとなっているので、h3見出しへ変更。
- 冗長なdivブロックを削除する。
- 不要なid名・class名を削除する。ただしid="trackback"はアンカーリンクとなるので残す。
(追加)mdlXMLDecのモジュール
XML宣言を行うモジュールです。システムテンプレート以外のテンプレートから、直接インクルードされます。
この部分をモジュール化するのには理由があります。
- XHTML文書では、XML宣言は文頭で行わなければならないが、変数関連のテンプレートタグを用いると意図しない改行が入る場合があるため、デフォルトの位置では具合が悪い。
- サイトをphp化するときなどに労力を低減させるため。サイトをphp化する際は、システムテンプレート以外のテンプレートモジュールよりインクルードされていますので、書き換えはここ一箇所でよい。
以下、テンプレートモジュール>mdlXMLDecのモジュール記述例です。
ファイル名:mdlXMLDec.mtml
<?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">
なお、サイトをphpで出力する場合は以下のようにしてください。
<? echo('<?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">
(追加)mdlMetaのモジュール
メタ宣言などを行うモジュールです。全てのテンプレートから直接インクルードされます。
デフォルトテンプレートでは「ヘッダー」モジュールの中に、このmdlMetaモジュールに該当する部分があります。デフォルトテンプレートの記述では、足りない部分があるので、手書きで追加して補っています。
ここで使用されているhtml_head変数やtitle変数は、他のテンプレートで値のセットが終わっているので、このモジュールでは単にMTGetVar(mt:varと記述されていますが、同じことです)で変数の値を出力させれば、インデックスやカテゴリやエントリページでは適切なデータが入ります。
以下、テンプレートモジュール>mdlMetaのモジュール記述例です。
ファイル名:mdlMeta.mtml
<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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="generator" content="<$MTProductName version="1"$>" />
<link rel="stylesheet" href="<$MTLink template="styles"$>" type="text/css" />
<$mt:var name="html_head"$>
<link rev="made" href="mailto:info@mtde.info" />
<meta name="description" content="<$MTBlogDescription$>" />
<meta name="keywords" content="XHTML,CSS,サンプル" />
<title><$mt:var name="title"$></title>
</head>
(モジュール)ヘッダーのモジュール
ヘッダブロック用モジュールです。デフォルトのモジュールの中身を書き換えて使用しています。デフォルトの「ヘッダー」モジュールとは少し異なります。テンプレートの題材となるXHTMLのdiv id="headcontent" で定義されたブロックの内容のみのモジュールです。全てのテンプレートから直接インクルードされます。
以下、テンプレートモジュール>ヘッダーのモジュール記述例です。
ファイル名:header.mtml
<div id="headcontent">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName$></a></h1>
<p id="sitedescription"><MTBlogDescription></p>
</div>
(追加)mdlExtraのモジュール
extracontentブロック内、つまりサイドバー2の部分の記述を行うモジュールです。全てのテンプレートから直接インクルードされます。
サイドバーの記事が記述されるextracontentコンテナの内容のみのモジュール化であり、全てのテンプレートファイルのための記述が集約されています。現在どのページであるのかは予約変数またはテンプレート識別変数で判断され、その部分の再構築しか行いません。
サンプルの現状ではほとんど空ですが、必要な記述を行っていきます。なおサイドバー2自体が必要ない場合は、各テンプレートからmdlExtraインクルード記述を削除し、CSSの調整のみで2カラム化が可能です。
以下、テンプレートモジュール>mdlExtraのモジュール記述例です。
ファイル名)mdlExtra.mtml
<div id="extracontent">
<MTIgnore>---------- 共通 ----------</MTIgnore>
<h3>mdlExtra</h3>
<p>エクストラコンテンツは2本目のサイドバーです。不要であれば8箇所のテンプレートからのインクルードをやめ、CSS調整してください。</p>
<MTIgnore>---------- 共通 ----------</MTIgnore>
<MTIgnore>---------- メインインデックスページのみ ----------</MTIgnore>
<MTIf name="main_index">
</MTIf>
<MTIgnore>---------- メインインデックスページのみ ----------</MTIgnore>
<MTIgnore>---------- カテゴリのみ ----------</MTIgnore>
<MTIf name="category_archive">
</MTIf>
<MTIgnore>---------- エントリのみ ----------</MTIgnore>
<MTIf name="entry_template">
</MTIf>
<MTIgnore>---------- エントリのみ ----------</MTIgnore>
<MTIgnore>---------- ウェブページのみ ----------</MTIgnore>
<MTIf name="page_template">
</MTIf>
<MTIgnore>---------- ウェブページのみ ----------</MTIgnore>
<MTIgnore>---------- 月別アーカイブのみ ----------</MTIgnore>
<MTIf name="datebased_only_archive">
</MTIf>
<MTIgnore>---------- 月別アーカイブのみ ----------</MTIgnore>
<MTIgnore>---------- 共通 ----------</MTIgnore>
<dl>
<dt>Powered by </dt>
<dd>
<p><a href="http://www.sixapart.jp/movabletype/"><img src="<$MTStaticWebPath$>images/mt4-bug-pbmt-white.png" alt="Powered by Movable Type <$MTVersion$>" width="120" height="75" /></a></p>
</dd>
</dl>
<MTIgnore>---------- 共通 ----------</MTIgnore>
</div>
(モジュール)サイドバーのモジュール
subcontentブロック内、つまりサイドバーの部分の記述を行うモジュールです。デフォルトのサイドバーモジュールの中身を書き換えて使用しています。全てのテンプレートから直接インクルードされます。
サイドバーの記事が記述されるsubcontentコンテナの内容のみのモジュール化であり、全てのテンプレートファイルのための記述が集約されています。現在どのページであるのかは予約変数またはテンプレート識別変数で判断され、その部分の再構築しか行いません。
以下、テンプレートモジュール>サイドバーのモジュール記述例です。
ファイル名)sidebar.mtml
<div id="subcontent">
<MTIgnore>---------- 共通 ----------</MTIgnore>
<MTUnless name="main_index">
<h3><a href="<MTBlogURL>" title="TOPページへ戻る">TOPページへ戻る</a></h3>
</MTUnless>
<dl>
<dt>検索</dt>
<dd>
<form method="get" action="<$mt:CGIPath$><$mt:SearchScript$>">
<input type="text" id="search" class="ti" name="search" value="<$mt:SearchString$>" />
<mt:If name="search_results_template">
<input type="hidden" name="IncludeBlogs" value="<$mt:SearchIncludeBlogs$>" accesskey="7" tabindex="0" />
<ul class="search-options">
<li><input type="checkbox" name="CaseSearch" /> 大文字/小文字を区別する</li>
<li><input type="checkbox" name="RegexSearch" /> 正規表現</li>
</ul>
<mt:else>
<input type="hidden" name="IncludeBlogs" value="<$mt:BlogID$>" tabindex="1" />
</mt:if>
<input type="submit" accesskey="4" value="検索" />
</form>
</dd>
</dl>
<MTIgnore>---------- 共通 ----------</MTIgnore>
<MTIgnore>---------- メインインデックスページのみ ----------</MTIgnore>
<MTIf name="main_index">
<dl>
<dt>Categories</dt>
<dd>
<MTTopLevelCategories>
<MTSubCatIsFirst>
<ul>
</MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryLabel remove_html="1"$>"><$MTCategoryLabel remove_html="1"$>[<$MTCategoryCount$>]</a></li>
<MTElse>
<li><$MTCategoryLabel remove_html="1"$></li>
</MTIfNonZero>
<$MTSubCatsRecurse$>
<MTSubCatIsLast>
</ul>
</MTSubCatIsLast>
</MTTopLevelCategories>
</dd>
</dl>
<dl>
<dt>New Entries</dt>
<dd>
<ul>
<MTEntries lastn="5">
<li><a href="<MTEntryPermalink>"><MTEntryTitle></a></li>
</MTEntries>
</ul>
</dd>
</dl>
<dl>
<dt>Archives</dt>
<dd>
<ul>
<MTArchiveList archive_type="Monthly"><li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li></MTArchiveList>
<li><a href="<$MTBlogURL$>archives.html">All Entries</a></li>
</ul>
</dd>
</dl>
<dl>
<dt>Comments</dt>
<dd>
<ul>
<MTEntries recently_commented_on="5">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
<MTComments>
┗<$MTCommentAuthor$> <$MTCommentDate format="%m月%d日"$><br />
</MTComments>
</li>
</MTEntries>
</ul>
</dd>
</dl>
<dl>
<dt>TrackBacks</dt>
<dd>
<ul>
<MTPings lastn="5">
<li>
<a href="<$MTPingURL$>"><$MTPingTitle$></a><br />
┗<$MTPingBlogName$></li>
</MTPings>
</ul>
</dd>
</dl>
<dl>
<dt>Tags</dt>
<dd>
<div class="module-tagcloud module">
<div class="module-content">
<ul class="module-list">
<MTTags>
<li class="module-list-item taglevel<$MTTagRank$>"><a href="<$MTTagSearchLink$>" title="タグ:<$MTTagName>の一覧"><$MTTagName$></a>
</li>
</MTTags>
</ul>
</div>
</div>
</dd>
</dl>
<MTBlogIfCCLicense>
<dl>
<dt>Licenses</dt>
<dd>
<ul>
<li><a href="<$MTBlogCCLicenseURL$>"><img alt="Creative Commons License" src="<$MTBlogCCLicenseImage$>" width="88" height="31" /></a><br />
<a href="<$MTBlogCCLicenseURL$>">Creative Commons License</a>.</li>
</ul>
</dd>
</dl>
</MTBlogIfCCLicense>
<dl>
<dt>Powered by </dt>
<dd>
<p><a href="http://www.sixapart.jp/movabletype/"><img src="<$MTStaticWebPath$>images/mt4-bug-pbmt-white.png" alt="Powered by Movable Type <$MTVersion$>" width="120" height="75" /></a></p>
</dd>
</dl>
</MTIf>
<MTIgnore>---------- メインインデックスページのみ ----------</MTIgnore>
<MTIgnore>---------- カテゴリのみ ----------</MTIgnore>
<MTIf name="category_archive">
<dl>
<dt>Categories</dt>
<dd>
<MTSetVarBlock name="CurCat"><MTCategoryBasename></MTSetVarBlock>
<MTTopLevelCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<MTSetVarBlock name="Compare"><MTCategoryBasename></MTSetVarBlock>
<MTIf name="Compare" eq="$CurCat">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryLabel remove_html="1"$>"><strong><$MTCategoryLabel remove_html="1"$>[<$MTCategoryCount$>]</strong></a></li>
<MTElse>
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryLabel remove_html="1"$>"><$MTCategoryLabel remove_html="1"$>[<$MTCategoryCount$>]</a></li>
</MTIf>
<MTElse>
<li><MTCategoryLabel remove_html="1"></li>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
</dd>
</dl>
<MTIfNonZero tag="BlogEntryCount">
<MTEntries lastn="0">
<MTEntriesHeader>
<dl>
<dt>Entries</dt>
<dd>
<ul>
</MTEntriesHeader>
<li><a href="<MTEntryPermalink>"><MTEntryTitle></a></li>
<MTEntriesFooter>
</ul>
</dd>
</dl>
</MTEntriesFooter>
</MTEntries>
</MTIfNonZero>
</MTIf>
<MTIgnore>---------- エントリのみ ----------</MTIgnore>
<MTIf name="entry_template">
<dl>
<dt>Categories</dt>
<dd>
<MTSetVarBlock name="CurCat"><MTCategoryBasename></MTSetVarBlock>
<MTTopLevelCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<MTSetVarBlock name="Compare"><MTCategoryBasename></MTSetVarBlock>
<MTIf name="Compare" eq="$CurCat">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryLabel remove_html="1"$>"><strong><$MTCategoryLabel remove_html="1"$>[<$MTCategoryCount$>]</strong></a></li>
<MTElse>
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryLabel remove_html="1"$>"><$MTCategoryLabel remove_html="1"$>[<$MTCategoryCount$>]</a></li>
</MTIf>
<MTElse>
<li><MTCategoryLabel remove_html="1"></li>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
</dd>
</dl>
<dl>
<dt>Entries</dt>
<dd>
<MTSetVarBlock name="EntCat"><MTEntryCategory></MTSetVarBlock>
<MTSetVarBlock name="CurEnt"><MTEntryTitle><MTEntryID></MTSetVarBlock>
<ul>
<MTEntries category="$EntCat">
<MTSetVarBlock name="LopEnt"><MTEntryTitle><MTEntryID></MTSetVarBlock>
<MTIf name="LopEnt" ne="$CurEnt">
<li><a href="<MTEntryPermalink>"><MTEntryTitle></a></li>
<MTElse>
<li><a href="<MTEntryPermalink>"><strong><MTEntryTitle></strong></a></li>
</MTIf>
</MTEntries>
</ul>
</dd>
</dl>
</MTIf>
<MTIgnore>---------- エントリのみ ----------</MTIgnore>
<MTIgnore>---------- ウェブページのみ ----------</MTIgnore>
<MTIf name="page_template">
<dl>
<dt>Pages</dt>
<dd>
<MTTopLevelFolders>
<MTIfNonZero tag="MTFolderCount">
<ul>
<li><MTFolderLabel>[<$MTFolderCount$>]</li>
<ul>
<MTPages lastn="5">
<li><a href="<$MTPagePermalink$>"><$MTPageTitle$></a></li>
</MTPages>
</ul>
<MTElse>
<li><$MTFolderLabel$></li>
</MTIfNonZero>
<$MTSubFolderRecurse$>
</ul>
</MTTopLevelFolders>
</dd>
</dl>
</MTIf>
<MTIgnore>---------- ウェブページのみ ----------</MTIgnore>
<MTIgnore>---------- 月別アーカイブのみ ----------</MTIgnore>
<MTIf name="datebased_only_archive">
<dl>
<dt>Archives</dt>
<dd>
<ul>
<MTArchiveList archive_type="Monthly"><li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li></MTArchiveList>
<li><a href="<$MTBlogURL$>archives.html">All Entries</a></li>
</ul>
</dd>
</dl>
</MTIf>
<MTIgnore>---------- 月別アーカイブのみ ----------</MTIgnore>
<MTIgnore>---------- 共通 ----------</MTIgnore>
<dl>
<dt>Feed</dt>
<dd>
<ul>
<li class="feed"><a href="<$MTLink template="atom"$>">Atom</a></li>
<li class="feed"><a href="<$MTLink template="rss"$>">RSS 2.0</a></li>
</ul>
</dd>
</dl>
<MTIgnore>---------- 共通 ----------</MTIgnore>
</div>
(モジュール)フッターのモジュール
footcontentブロック内、つまりフッタの部分の記述を行うモジュールです。デフォルトのフッターモジュールの中身を書き換えて使用しています。
以下、テンプレートモジュール>フッターのモジュール記述例です。
ファイル名:footer.mtml
<div id="footcontent">
<address>2008 <a href="<MTBlogURL>">sample</a></address>
</div>
(スタイルシート)スタイルシート
インデックステンプレート>スタイルシートの記述例です。
デフォルトの内容は以下のようになっています。
/* Default Layout: <MTSetVar name="page_layout" value="layout-wtt"> */
@import url(<$MTStaticWebPath$>themes-base/blog.css);
@import url(<$MTStaticWebPath$>themes/minimalist-red/screen.css);
これを全て削除し、替わりにサンプルテンプレートでの表示を調整したコードを記述しています。Movable Type 4 で使用可能な変数を用い、コード先頭で各ブロックの色やサイズを定義しています。MTIgnoreはコメント行で、固定幅とリキッドレイアウトの切り替えが可能です。
ファイル名:styles.mtml
@charset "UTF-8";
/*Version: 1.0.2 (2008/03/05)*/
/*---------------------------------------------------------------------------------*/
<MTIgnore>定数セクション</MTIgnore>
<MTIgnore>色の設定</MTIgnore>
<MTSetVar name="COLOR_TEXT" value="#333333"> <MTIgnore>Cテキスト色</MTIgnore>
<MTSetVar name="COLOR_TEXT_A" value="#104e8b"> <MTIgnore>Cリンクテキスト色</MTIgnore>
<MTSetVar name="COLOR_TEXT_A_HOVER" value="#ff7f00"> <MTIgnore>Cリンクテキストホバー色</MTIgnore>
<MTSetVar name="COLOR_TEXT_R" value="#ffffff"> <MTIgnore>RCテキスト色(リバース)</MTIgnore>
<MTSetVar name="COLOR_TEXT_A_R" value="#ffffff"> <MTIgnore>RCリンクテキスト色(リバース)</MTIgnore>
<MTSetVar name="COLOR_TEXT_A_HOVER_R" value="#ff7f00"> <MTIgnore>RCリンクテキストホバー色(リバース)</MTIgnore>
<MTIgnore>ヘッダとフッタ</MTIgnore>
<MTSetVar name="COLOR_BACKGROUND_HEADER" value="#000000"> <MTIgnore>Cバック色(ヘッダ)</MTIgnore>
<MTSetVar name="HEIGHT_HEADER" value="150px"> <MTIgnore>H高さ(ヘッダ)</MTIgnore>
<MTSetVar name="COLOR_BACKGROUND_FOOTER" value="#000000"> <MTIgnore>Cバック色(フッタ)</MTIgnore>
<MTSetVar name="HEIGHT_FOOTER" value="32px"> <MTIgnore>H高さ(フッタ)</MTIgnore>
<MTSetVar name="COLOR_BACKGROUND_GLOBALNAVI" value="#333333"> <MTIgnore>Cバックグラウンド色(グローバルナビゲーション)</MTIgnore>
<MTIgnore>固定幅</MTIgnore>
<MTSetVar name="WIDTH_HEADER" value="100%"> <MTIgnore>W幅(ヘッダ)</MTIgnore>
<MTSetVar name="WIDTH_BACKGROUND_GLOBALNAVI" value="100%"> <MTIgnore>W幅(グローバルナビ)</MTIgnore>
<MTSetVar name="WIDTH_CONTENT_TOTAL" value="1000px"> <MTIgnore>W幅(メイン総合)</MTIgnore>
<MTSetVar name="WIDTH_CONTENT_MAIN" value="575px"> <MTIgnore>W幅(メイン)</MTIgnore>
<MTSetVar name="WIDTH_CONTENT_SUB" value="195px"> <MTIgnore>W幅(サイドバー1)</MTIgnore>
<MTSetVar name="WIDTH_CONTENT_EXTRA" value="195px"> <MTIgnore>W幅(サイドバー2)</MTIgnore>
<MTSetVar name="WIDTH_FOOTER" value="100%"> <MTIgnore>W幅(フッタ)</MTIgnore>
<MTIgnore>
<MTIgnore>リキッド(96%で)</MTIgnore>
<MTSetVar name="WIDTH_HEADER" value="100%"> <MTIgnore>W幅(ヘッダ)</MTIgnore>
<MTSetVar name="WIDTH_BACKGROUND_GLOBALNAVI" value="100%"> <MTIgnore>W幅(グローバルナビ)</MTIgnore>
<MTSetVar name="WIDTH_CONTENT_TOTAL" value="90%"> <MTIgnore>W幅(メイン総合)</MTIgnore>
<MTSetVar name="WIDTH_CONTENT_MAIN" value="52%"> <MTIgnore>W幅(メイン)</MTIgnore>
<MTSetVar name="WIDTH_CONTENT_SUB" value="22%"> <MTIgnore>W幅(サイドバー1)</MTIgnore>
<MTSetVar name="WIDTH_CONTENT_EXTRA" value="22%"> <MTIgnore>W幅(サイドバー2)</MTIgnore>
<MTSetVar name="WIDTH_FOOTER" value="100%"> <MTIgnore>W幅(フッタ)</MTIgnore>
</MTIgnore>
/*---------------------------------------------------------------------------------*/
/* 全般 */
* {
margin: 0;
padding: 0;
}
body {
background-color: #ffffff;
color:<MTGetVar name="COLOR_TEXT">;
font-family: Arial, Helvetica, Tahoma, "Trebuchet MS", Verdana, "ヒラギノ角ゴ Pro W3", Osaka, "メイリオ", "MS Pゴシック", sans-serif;
font-size:90%;
line-height:120%;
margin:0;
padding:0;
text-align:center;
}
div:after {
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
div {
display: inline-block;
}
a {
color:<MTGetVar name="COLOR_TEXT_A">;
text-decoration:none;
}
a:hover {
text-decoration:underline;
color:<MTGetVar name="COLOR_TEXT_A_HOVER">;
}
img {
border:0;
margin:0;
}
img a {
border:0;
margin:0;
}
p {
margin:10px 0 10px 0;
}
ul,ol {
font-size:95%;
margin:10px 0 18px 15px;
}
dl {
font-size:95%;
margin:10px 0 18px 0px;
}
ul ul,ol ol {
margin:4px 0 4px 20px;
}
strong{
color: #27408b;
background-color: #bcd2ee;
}
blockquote {
font-size: 100%;
background-color: #eeeeee;
background-image: url(blogimg/quote.gif);
background-position: left top;
background-repeat: no-repeat;
border: 1px solid #cccccc;
padding: 14px;
margin:10px 0 18px 0;
overflow: auto;
}
pre {
font-size: 100%;
background-color: #eeeeee;
border: 1px solid #cccccc;
padding: 14px;
margin:10px 0 18px 0;
overflow: scroll;
}
h1 {
color:<MTGetVar name="COLOR_TEXT">;
font-size:140%;
margin:10px 0 18px 0;
}
h1 a {
color:<MTGetVar name="COLOR_TEXT_A">;
text-transform:none;
}
h2 {
background-color: #dadada;
color:<MTGetVar name="COLOR_TEXT">;
font-size:110%;
margin:18px 0 12px 0;
padding:3px;
}
h3 {
border-bottom:1px solid #dadada;
color:<MTGetVar name="COLOR_TEXT">;
font-size:100%;
margin:18px 0 12px 0;
padding:3px;
}
h4 {
border-bottom:1px dashed #dadada;
color:<MTGetVar name="COLOR_TEXT">;
font-size:100%;
margin:18px 0 12px 0;
}
h5,h6 {
font-size:100%;
margin:18px 0 12px 0;
}
/*---------------------------------------------------------------------------------*/
/* 大外 */
#maincontainer {
color:<MTGetVar name="COLOR_TEXT">;;
margin:0 auto;
padding:0;
width:<MTGetVar name="WIDTH_CONTENT_TOTAL">;
clear:both;
}
#maincontainer dt {
border-bottom:1px solid #dadada;
color:<MTGetVar name="COLOR_TEXT">;
font-size:100%;
font-weight:bold;
margin:18px 0 8px 0;
}
#maincontainer dd {
margin: 5px 0 18px 15px;
}
/*---------------------------------------------------------------------------------*/
/* ヘッダ */
#headcontent {
background-color: <MTGetVar name="COLOR_BACKGROUND_HEADER">;
color:<MTGetVar name="COLOR_TEXT_R">;
background-image: url("blogimg/logo.jpg");
background-position: right top;
background-repeat: no-repeat;
width:<MTGetVar name="WIDTH_HEADER">;
height:<MTGetVar name="HEIGHT_HEADER">;
margin:0 auto 0 auto;
text-align:left;
}
#headcontent a {
color:<MTGetVar name="COLOR_TEXT_A_R">;
}
#headnavi {
font-size:85%;
padding:0 5px 2px 0;
text-align:right;
}
#headcontent h1 {
margin:0;
padding:10px;
}
#sitedescription {
font-size:110%;
margin:0;
padding:0 0 10px 10px;
}
/*---------------------------------------------------------------------------------*/
/* ナビゲーション */
/* グローバルナビゲーション */
#globalnavi {
width:<MTGetVar name="WIDTH_BACKGROUND_GLOBALNAVI">;
background-color: <MTGetVar name="COLOR_BACKGROUND_GLOBALNAVI">;
color:<MTGetVar name="COLOR_TEXT_R">;
font-size:90%;
margin:0 auto 0 auto;
padding-bottom:3px;
text-align:center;
clear:both;
}
#globalnavi ul {
margin:0;
padding:2px;
list-style:none;
letter-spacing: 0.07em;
}
#globalnavi ul li {
display:inline;
margin:0;
}
#globalnavi ul li a {
color:<MTGetVar name="COLOR_TEXT_A_R">;
padding-left:10px;
padding-right:10px;
float:left;
}
#globalnavi ul li a:hover {
color:<MTGetVar name="COLOR_TEXT_A_HOVER_R">;
}
/* パンくずリスト */
#topicpath {
font-size:90%;
border-bottom:1px dashed #dadada;
margin: 10px 0 10px 0;
padding: 0;
}
#topicpath p {
margin:0;
}
/*---------------------------------------------------------------------------------*/
/* メイン */
#maincontent {
float:left;
line-height:1.5;
margin-right:20px;
text-align:left;
width:<MTGetVar name="WIDTH_CONTENT_MAIN">;
clear:both;
}
#maincontent img {
margin:10px 10px 10px 0;
}
#maincontent li.nomark {
list-style:none;
margin-left:10px;
}
#maincontent li.arrow01 {
list-style: none;
margin: 0;
padding: 0 0 0 16px;
background: url("blogimg/listarrow01.gif") no-repeat 0px 50%;
}
/*---------------------------------------------------------------------------------*/
/* サブ、エクストラ */
#subcontent {
float:right;
width:<MTGetVar name="WIDTH_CONTENT_SUB">;
}
#extracontent {
float:left;
width:<MTGetVar name="WIDTH_CONTENT_EXTRA">;
}
#subcontent,#extracontent {
margin:0 0 5px;
padding:1px 0 0;
text-align:left;
}
#subcontent ul,#extracontent ul {
font-size:90%;
list-style:none;
margin:0;
padding:0;
clear: both;
}
#subcontent li,#extracontent li {
list-style:none;
margin:0 0 4px;
padding:0;
}
#subcontent li a,#extracontent li a{
padding:2px;
}
#subcontent ul ul,#extracontent ul ul{
line-height:120%;
margin:4px 0 3px 10px;
padding:0;
}
#subcontent ul ul li a,#extracontent ul ul li a{
}
h2#subcontent, h2#extracontent {
margin:18px 0 12px 0;
clear: both;
}
h3#subcontent, h3#extracontent {
margin:18px 0 12px 0;
clear: both;
}
#subcontent dl h2,#extracontent dl h2{
margin:3px 0 8px;
clear: both;
}
#subcontent dl h3,#extracontent dl h3{
margin:3px 0 8px;
clear: both;
}
#subcontent dl,#extracontent dl {
clear: both;
}
#subcontent dt,#extracontent dt {
font-weight:bold;
border-bottom:1px solid #dadada;
color:&lt;MTGetVar name="COLOR_TEXT">;
font-size:100%;
margin:18px 0 12px 0;
}
#subcontent dd,#extracontent dd {
margin: 0;
padding: 0;
}
#subcontent p,#extracontent p {
font-size:90%;
}
/* Feed */
#subcontent .feed, #extracontent .feed {
list-style: none;
margin: 0 0 5px 0;
padding: 0 0 0 16px;
background: url("blogimg/feed-icon-14x14.png") no-repeat 0px 50%;
}
/*---------------------------------------------------------------------------------*/
/* フッター */
#footcontent {
width:<MTGetVar name="WIDTH_CONTENT_FOOTER">;
height:<MTGetVar name="HEIGHT_FOOTER">;
background-color: <MTGetVar name="COLOR_BACKGROUND_FOOTER">;
clear:both;
color:<MTGetVar name="COLOR_TEXT_R">;
font-size:90%;
line-height:1.5;
margin:0 auto;
padding:0;
text-align:right;
}
#footcontent address, p {
margin:0;
padding:4px 10px 0 0;
}
#footcontent a {
color:<MTGetVar name="COLOR_TEXT_A_R">;
}
/*---------------------------------------------------------------------------------*/
/* Movable Type 用 追加 */
/* タグクラウド */
.module-tagcloud .module-content{
text-align: left;
}
.module-tagcloud .module-content .module-list{
list-style: none;
}
.module-tagcloud .module-content .module-list .module-list-item{
display: inline;
}
.module-tagcloud .module-content .module-list li.taglevel1{
font-size: 200%;
}
.module-tagcloud .module-content .module-list li.taglevel2{
font-size: 170%;
}
.module-tagcloud .module-content .module-list li.taglevel3{
font-size: 150%;
}
.module-tagcloud .module-content .module-list li.taglevel4{
font-size: 135%;
}
.module-tagcloud .module-content .module-list li.taglevel5{
font-size: 110%;
}
.module-tagcloud .module-content .module-list li.taglevel6{
font-size: 100%;
}
#comments {
background:#ffffff;
margin:20px 0 20px 0;
padding:10px 0 10px 0;
}
.comments-unit {
background:#eeeeee;
margin:7px;
padding:7px;
}
/* アドセンス */
.ads {
border-style: none;
margin: 10px;
}
/* 画像左配置 */
.imageleft{
float: left;
}
/* 画像右配置 */
.imageright{
float: right;
}
/* 回り込みクリア */
.clear{
clear: both;
}
/* Entry Tag */
.entry-tags {font-size: 100%;margin: 10px 0 10px 0;clear: both;}
.entry-tags-header,.entry-tags-list,.entry-tag { display: inline; border-bottom:none;}
.entry-tags-list {margin: 0px;padding: 0px;list-style: none;}
.entry-categories,entry-category {font-size: 100%;margin: 10px 0 10px 0;clear: both;}
.entry-categories-header,.entry-categories-list,.entry-category { display: inline; border-bottom:none;}
.entry-categories-list {margin: 0px;padding: 0px;list-style: none;}
border-bottom:none;
/* Track Back */
#trackback{
margin-top:15px;
}
/* 追記 */
.moreread{
text-align: right;
}
/* メイン部画像サムネイル */
div#maincontent .item {
display: inline;
clear: both;
overflow: hidden;
vertical-align: middle;
}
div#maincontent .item img {
margin: 0 10px 10px 0;
float: left;
}
/* サイドバー画像サムネイル */
div#subcontent li.item,
div#extracontent li.item {
display: inline;
float: left;
margin: 2px 5px 5px 2px;
padding: 0;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 70px;
height: 70px;
}
/* 汎用ボックス */
.box {
background:#eed8ae;
color:<MTGetVar name="COLOR_TEXT">;
font-size:95%;
padding:10px;
}
.box a {
color:<MTGetVar name="COLOR_TEXT_A">;
}
/* Lead文 */
.lead {
background:#ccffcc;
color:<MTGetVar name="COLOR_TEXT">;
font-size:100%;
font-weight:bold;
padding:10px;
}
/* アイテム・エントリのメタデータ */
.asset-meta{
background:9999ff;
color:<MTGetVar name="COLOR_TEXT">;
font-size:90%;
border-bottom:1px solid #dadada;
padding:1px;
margin:-8px 0 15px 0;
}
- エントリ
-
- MT4のテンプレートとは
- テンプレートの題材について
- 先に問題点を洗い出しておく
- XHTMLの構造を確認する
- モジュール化設計
- テンプレートファイル・モジュールファイルの準備
- 型枠となるXHTMLファイルを作成
- テンプレート化のルールを決める
- (インデックス)メインページのテンプレート
- (インデックス)アーカイブインデックスのテンプレート
- (アーカイブ)ブログ記事のテンプレート
- (アーカイブ)ウェブページのテンプレート
- (アーカイブ)ブログ記事リストのテンプレート
- (システム)検索結果のテンプレート
- (システム)コメント完了のテンプレート
- (システム)コメントプレビューのテンプレート
- (モジュール)ブログ記事の概要のモジュール
- (モジュール)ブログ記事の詳細のモジュール
- (モジュール)ウェブページの詳細のモジュール
- (モジュール)ブログ記事のメタデータのモジュール
- (モジュール)コメントのモジュール
- (モジュール)コメント入力フォームのモジュール
- (モジュール)コメント詳細のモジュール
- (モジュール)カテゴリのモジュール
- (モジュール)タグのモジュール
- (モジュール)トラックバックのモジュール
- (追加)mdlXMLDecのモジュール
- (追加)mdlMetaのモジュール
- (モジュール)ヘッダーのモジュール
- (追加)mdlExtraのモジュール
- (モジュール)サイドバーのモジュール
- (モジュール)フッターのモジュール
- (スタイルシート)スタイルシート
- タグ
-
- .htaccess
- Advantage
- Apache
- Archive
- Asset
- Author
- Authority
- AutoSave
- BackUp
- body
- Bug
- Calc
- Category
- Check
- CMS
- Comment
- Company Site
- Config
- Contact
- CORESERVER
- count
- Create
- Creative Commons
- CSS
- Custom Field
- Date
- Default
- delete
- Designer
- DNS
- Domain
- Entry
- Environment
- Eval
- Example
- Export
- Feature
- Feed
- FFFTP
- File
- Folder
- For
- GetVar
- head
- html
- If
- Image
- Import
- Include
- index
- info
- Install
- key
- keyword
- License
- Local
- Loop
- Management
- Manager
- Meta
- Modifier
- Module
- MTElse
- MTElseIf
- MTFor
- MTGetVar
- MTIf
- MTIgnore
- MTLoop
- MTSeHashVar
- MTSetVar
- MTSetVarBlock
- MTSetVars
- MTSetVarTemplate
- MTUnless
- MySQL
- Navigation
- Next
- op
- Page
- Perl
- php
- PhpMyAdmin
- Ping
- Plugin
- pop
- Previous
- Principle
- push
- ReBuild
- Role
- Sample
- SetUp
- SetVar
- shift
- Spam
- Tag
- Template
- TrackBack
- Trouble
- undef
- unshift
- UpGrade
- UpLoad
- Usability
- Variable
- Version
- WebPage
- Wizard
- Writer
- XAMPP
- XHTML
- XML
- 導入編
- ローカル環境
- サンプル
- トラブル集