<?xml version="1.0" encoding="EUC-JP"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>MovableTypeオリジナルテンプレートを作ろう</title>
    <link rel="alternate" type="text/html" href="http://movabletype.gonz-style.com/" />
    <link rel="self" type="application/atom+xml" href="http://movabletype.gonz-style.com/atom.xml" />
   <id>tag:movabletype.gonz-style.com,2008://3</id>
    <link rel="service.post" type="application/atom+xml" href="http://gonz-style.com/mt/mt-atom.cgi/weblog/blog_id=3" title="MovableTypeオリジナルテンプレートを作ろう" />
    <updated>2006-06-26T15:28:57Z</updated>
    <subtitle>ゼロからはじめるテンプレートの作り方、プラグインの使い方などMovable Typeをカスタマイズする方法</subtitle>
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type  3.2-ja-2</generator>
 
<entry>
    <title>サイトの再構築時にInternal Server Errorが表示される</title>
    <link rel="alternate" type="text/html" href="http://movabletype.gonz-style.com/blog/mt-352.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://gonz-style.com/mt/mt-atom.cgi/weblog/blog_id=3/entry_id=352" title="サイトの再構築時にInternal Server Errorが表示される" />
    <id>tag:movabletype.gonz-style.com,2006://3.352</id>
    
    <published>2006-06-07T00:55:21Z</published>
    <updated>2006-06-26T15:28:57Z</updated>
    
    <summary>Movable Typeのサイトを再構築した時にInternal Server Errorが表示される場合の対処方法</summary>
    <author>
        <name>kokoro-net.com</name>
        <uri>http://kokoro-net.com/</uri>
    </author>
            <category term="疑問・質問コーナ" />
    
    <content type="html" xml:lang="ja" xml:base="http://movabletype.gonz-style.com/">
        サイトを再構築した再に、「500 Eorror」や、「Internal Server Error」などが表示されて、再構築できません。
エラーの原因と対処方法を教えてください。

        <![CDATA[サイトを再構築した再に、「500 Eorror」や、「Internal Server Error」などが表示されて、再構築できません。
エラーの原因と対処方法を教えてください。

このエラーは、サーバのタイムアウトが原因で発生するエラーです。
エラーが発生する原因とその対処方法について、解説します。



<div class="under_line3">
<h4>■Internal Server Errorが表示される原因</h4>
</div>

Movable Typeのサイトを再構築したときに、Internal Server Errorが表示される原因には、以下のことが考えられます。

１．サーバの負荷が高い（アクセスが集中している）
２．記事が大量にあるために、再構築に時間が掛かっている。

ひとことで言えば、サーバの能力（スペック）が低いために発生するエラーです。
手っ取り早いのは、サーバの能力を増強してもらうことですが、まず不可能でしょう。

私たちの手で解決するしかありません。


では、ひとつずつ対処方法を説明します。



<div class="under_line3">
<h4>■サーバの負荷を減らす</h4>
</div>

サーバの負荷が高くなることで発生しているエラーですから、サーバの負荷を減らしてあげれば、解決します。

記事が大量にある場合は、１度に再構築するエントリーアーカイブ量を減らします。

１度に再構築するエントリーアーカイブ量を減らすには、mt-config.cgiファイルの「EntriesPerRebuild」を変更します。

具体的な手順は以下の通り

１．mt-config.cgiファイルを開く

２．以下の記述がある部分を探す

<div class="temp">
EntriesPerRebuild 40
</div>

３．上記の「40」という数字を小さくする。（例えば、10くらいにする）

４．EntriesPerRebuildの先頭に「#」があれば、削除する。
　（※#は、「この行はコメントです」という意味ですから、Movable Typeはその行を無視します）

副作用として、再構築する時間が長くなりますが、再構築されないよりはずっといいでしょう。



<div class="under_line3">
<h4>■それでもダメなら、使用しているデータベースを変更する</h4>
</div>

BerkeleyDB（標準）を使用している方は、データベースを変えてみるのも効果があります。

ただし、データベースを変更するということは、Movable Typeのインストールからやり直すということを意味しますので、それなりの覚悟が必要です。


ここでは、BerkeleyDBからMySQLへ移行する手順を説明します。


１．テンプレートをバックアップする。

　[（例）バックアップするテンプレート一覧]
　・スタイルシート
　・メインページ
　・カテゴリー・アーカイブ
　・エントリー・アーカイブ
　・テンプレート・モジュールすべて（使用している場合のみ）
　・Atom（標準からカスタマイズしている場合のみ）
　・RSS2.0（標準からカスタマイズしている場合のみ）
　・その他カスタマイズしたテンプレートすべて

２．記事をバックアップする。

Movable Typeにログインして、「メイン・メニュー」→「ユーティリティ」→「読み込み/書き出し」をクリックします。

次に、「エントリーの書き出し」を」クリックして、「○○○○○○○○」からエントリーを書き出すをクリックします。
（○○○○○○は、ご自分のブログ名です。）

ファイルのダウンロードがはじまりますので、パソコンの適当なフォルダにファイルを保存します。
（よくわからない人は、ディスクトップに保存しましょう）


３．dbフォルダをバックアップする。

万が一データベースの移行が失敗したときのことを考えて、サーバのdbフォルダを丸ごとバックアップします。

FFFTPなどのFTPソフトでサーバに接続します。
Movable Typeのインストールフォルダ（mt.cgiがあるフォルダ）に、dbという名前のフォルダがありますので、フォルダ毎ダウンロードしてください。


４．MySQLにデータベースを作成する。

Movable Typeを再インストールする前に、事前にMySQLにデータデータベースを作成します。
MySQLでデータベースを作成する方法は、レンタルサーバによって異なりますので、詳しくは、レンタルサーバのサイトでご確認ください。

データベースを作成したら、MySQLのデータベース名、MySQLへログインするためのユーザID、パスワードをメモしておきます。


５．mt-config.cgiファイルを編集する。

次に、mt-config.cgiを編集し、データベースを変更します。

mt-config.cgiをテキストエディタで開き、以下の部分を変更してください。

【編集前】
<div class="temp">
### BerkeleyDB Configuration - BerekelyDB requires only the path to your
# database directory.
#
 DataSource  ./db
</div>

上記の「 DataSource  ./db」とう行の先頭に「#」を挿入します。

【編集後】
<div class="temp">
### BerkeleyDB Configuration - BerekelyDB requires only the path to your
# database directory.
#
# DataSource  ./db
</div>

次に、MySQLを部分を変更します。

【編集前】
<div class="temp">
### MySQL Configuration - Add the name of your database, username
# password and, optionally database host given to you by your web 
# hosting provider.
#
# ObjectDriver DBI::mysql
# Database <database-name>
# DBUser <database-username>
# DBPassword <database-password>
# DBHost localhost
</div>

上記の「 Database」の行、「DBUser」の行、「DBPassword」の行の先頭の「#」を削除します。
<database-name>に、ご自分のMySQLデータベース名
<database-username>に、ご自分のMySQLにログインするときのユーザID
<database-password>に、ご自分のMySQLにログインするときのパスワード
を記述します。


【編集後】
<div class="temp">
### MySQL Configuration - Add the name of your database, username
# password and, optionally database host given to you by your web 
# hosting provider.
#
 ObjectDriver DBI::mysql
 Database （あなたがお使いのデータベース名）
 DBUser （あなたがMySQLを使うときのユーザID）
 DBPassword （あなたがMySQLを使うときのパスワード）
 DBHost localhost
</div>

編集が終わったら、ファイルを保存して、サーバにアップロード（転送）します。


６．Movable Typeを再インストールする。

http://(あなたのドメイン)/cgi-bin/mt/mt.cgiにアクセスします。

後は､画面の指示にしたがって、インストールを実行してください。


７．テンプレートの復旧

手順１でバックアップしたテンプレートをすべて、元にもどします。


８．記事の復旧

手順２でバックアップした記事をもとにもどします。

Movable Typeのインストールフォルダに、「import」という名前でフォルダを作成してください。

作成した「import」フォルダに、手順２で保存したファイルをアップロードします。

次に、Movable Typeにログインして、「メイン・メニュー」→「ユーティリティ」→「読み込み/書き出し」をクリックします。

「エントリーの投稿者を自分にする」にチェックを入れて、「読み込み/書き出し」ボタンを押して、記事を読み込みます。

「データがすべて読み込まれました」と表示されれば、記事の復旧は完了です。

後は､エラーにならないことを祈りつつ、サイトを再構築してください。



<div class="under_line3">
<h4>■ワンポイントアドバイス</h4>
</div>

サブカテゴリを設定していた場合、記事の読み込みを行うと、すべてのカテゴリがトップレベルになってしまいます。

その場合は、メイン・メニュー→カテゴリーから、カテゴリーを移動してください。

カテゴリーを移動したあとに、サイトを再構築するのを忘れずに♪


]]>
    </content>
</entry>
<entry>
    <title>インストール時に、「Got an error: データベース接続の設定に誤りがあります」というエラーになる</title>
    <link rel="alternate" type="text/html" href="http://movabletype.gonz-style.com/blog/mt-351.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://gonz-style.com/mt/mt-atom.cgi/weblog/blog_id=3/entry_id=351" title="インストール時に、「Got an error: データベース接続の設定に誤りがあります」というエラーになる" />
    <id>tag:movabletype.gonz-style.com,2006://3.351</id>
    
    <published>2006-06-06T15:22:08Z</published>
    <updated>2006-06-06T15:23:08Z</updated>
    
    <summary>Movable Typeのインストール時に、「Got an error: データベース接続の設定に誤りがあります」というエラーになる場合の対処方法</summary>
    <author>
        <name>kokoro-net.com</name>
        <uri>http://kokoro-net.com/</uri>
    </author>
            <category term="疑問・質問コーナ" />
    
    <content type="html" xml:lang="ja" xml:base="http://movabletype.gonz-style.com/">
        インストール時に、「Got an error: データベース接続の設定に誤りがあります」というエラーになり先に進めません。
エラーの原因と対処方法を教えてください。

        <![CDATA[インストール時に、「Got an error: データベース接続の設定に誤りがあります」というエラーになり先に進めません。
エラーの原因と対処方法を教えてください。



<div class="under_line3">
<h4>■Got an errorになる原因<h4>
</div>

Movable Typeのインストール時に、「Got an error: データベース接続の設定に誤りがあります」が表示される原因は、mt-config.cgiファイルの編集に失敗していることが原因です。


mt-config.cgiファイルは、500行以上ありますが、そのほとんがコメントです。

コメント行には、行の先頭に「#」があります。
行の先頭に「#」がある場合は、その行を無視します。
つまり、設定が反映されないということですね。


Got an error: データベース接続の設定に誤りがありますというエラーは、mt-config.cgiファイルのデータベースを設定する行がコメントになっているために発生するエラーです。



<div class="under_line3">
<h4>■エラーの対処方法<h4>
</div>

対処方法は、mt-config.cgiファイルのデータベース設定部分を記述している行の先頭の「#」を削除すればＯＫです。

以下に、データベースごとにmt-config.cgiファイルの編集方法を記載しますので、参考にしてください。


▼MySQLの場合
<div class="temp">
### MySQL Configuration - Add the name of your database, username
# password and, optionally database host given to you by your web 
# hosting provider.
#
 ObjectDriver DBI::mysql
 Database (レンタルサーバ管理者より連絡されたデータベース名)
 DBUser （レンタルサーバ管理者より連絡されたデータベース接続用ユーザID）
 DBPassword （レンタルサーバ管理者より連絡されたデータベース接続用パスワード）
 DBHost localhost
</div>



▼PostgreSQLの場合
<div class="temp">
### PostgreSQL Configuration - Add the name of your database, username,
# password and, optionally database host given to you by your web 
# hosting provider.
#
 ObjectDriver DBI::postgres
 Database (レンタルサーバ管理者より連絡されたデータベース名)
 DBUser （レンタルサーバ管理者より連絡されたデータベース接続用ユーザID）
 DBPassword （レンタルサーバ管理者より連絡されたデータベース接続用パスワード）
 DBHost localhost
</div>


▼SQLiteの場合
<div class="temp">
### SQLite Configuration - SQLite requires only the path to your SQLite
# database file.
#
 ObjectDriver DBI::sqlite
 Database ./db/mtdb
</div>



▼BerkeleyDBの場合
<div class="temp">
### BerkeleyDB Configuration - BerekelyDB requires only the path to your
# database directory.
#
 DataSource  ./db/mtdb
</div>

]]>
    </content>
</entry>
<entry>
    <title>テンプレートモジュールを使ってフッターやメニュー（カテゴリー）を表示する</title>
    <link rel="alternate" type="text/html" href="http://movabletype.gonz-style.com/blog/mt-348.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://gonz-style.com/mt/mt-atom.cgi/weblog/blog_id=3/entry_id=348" title="テンプレートモジュールを使ってフッターやメニュー（カテゴリー）を表示する" />
    <id>tag:movabletype.gonz-style.com,2006://3.348</id>
    
    <published>2006-05-27T00:59:25Z</published>
    <updated>2006-05-27T01:00:03Z</updated>
    
    <summary>Movable Typeオリジナルテンプレートテンプレートモジュールを使ってフッターを表示する方法</summary>
    <author>
        <name>kokoro-net.com</name>
        <uri>http://kokoro-net.com/</uri>
    </author>
            <category term="テンプレートの作り方" />
    
    <content type="html" xml:lang="ja" xml:base="http://movabletype.gonz-style.com/">
        テンプレートモジュールを使えば、1ヶ所の修正だけで、すべてのページを変更することができます。

        <![CDATA[<div class="under_line3">
<h4>■テンプレートモジュールを使う理由（メリット）</h4>
</div>

ほとんどのサイトでは、ページの最下部に、「Copy Right (C) 2006」などの表記があると思います。
また、ページの目立つ部分に、コンテンツメニューとして、カテゴリー一覧の表示があるかもしれません。

そして、この表記は、トップをはじめ、全てのページに同じ内容が表示されているとします。

この部分を変更しようとした場合、Movable Typeでは、メインページ、カテゴリーアーカイブ、エントリーアーカイブ、コメントプレビュー、コメント保留、コメントエラーなどの全てのテンプレートを修正しなければなりません。

人間がやることですから、間違って、関係ないタグを変更してしまったり、一部のテンプレートの修正が漏れてしまうかも知れません。

テンプレートモジュールを使えば、1ヶ所の修正だけで、すべてのページを変更することができます。



<div class="under_line3">
<h4>■テンプレートモジュールの作成方法</h4>
</div>

テンプレートモジュールの作成は、いたって簡単です。

Movable Typeにログインして、「テンプレート」⇒「モジュール」をクリックします。
「モジュールを新規作成」をクリックして、共通化するタグやテキスト（文字列）を記述します。
「テンプレート名」に、英数字で、わかりやすい名前を付けて、「保存」ボタンを押せば、テンプレートモジュールの完成です。

ヘッダーやフッター、カテゴリー表示やGoogleAdsenseのコード、メルマガの登録フォームなどのモジュールを作成しておくと良いでしょう。



<div class="under_line3">
<h4>■テンプレートモジュールの使い方</h4>
</div>

作成したテンプレートモジュールを使うには、メインページやカテゴリーアーカイブ、エントリーアーカイブで、以下のように記述します。

<div class="temp">
&lt;$MTInclude module="モジュール名"$&gt;
</div>

以上で、終了です。

テンプレートモジュールを使うことで、テンプレートに記述する行数も少なくなり、すっきりして、見やすくなりますね。


]]>
    </content>
</entry>
<entry>
    <title>dbフォルダを作らないと動かないのか？</title>
    <link rel="alternate" type="text/html" href="http://movabletype.gonz-style.com/blog/mt-347.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://gonz-style.com/mt/mt-atom.cgi/weblog/blog_id=3/entry_id=347" title="dbフォルダを作らないと動かないのか？" />
    <id>tag:movabletype.gonz-style.com,2006://3.347</id>
    
    <published>2006-05-26T00:57:22Z</published>
    <updated>2006-05-26T01:00:02Z</updated>
    
    <summary>Movable Typeインストール時にdbフォルダを作らないと動かないのか</summary>
    <author>
        <name>kokoro-net.com</name>
        <uri>http://kokoro-net.com/</uri>
    </author>
            <category term="疑問・質問コーナ" />
    
    <content type="html" xml:lang="ja" xml:base="http://movabletype.gonz-style.com/">
        Movable Typeのインストール時にdbフォルダを作成するように記載されていますが、dbフォルダはなんのために作成するのでしょうか？
また、dbフォルダがないとちゃんと動作しないのでしょうか？

        <![CDATA[Movable Typeのインストール時にdbフォルダを作成するように記載されていますが、dbフォルダはなんのために作成するのでしょうか？
また、dbフォルダがないとちゃんと動作しないのでしょうか？



<div class="under_line3">
<h4>■dbフォルダが必要なケース</h4>
</div>

Movable Typeを使用するのに、dbフォルダが必要なのは、データベースに、SQLiteか、BerkeleyDB（バークレイDB)を利用している場合だけです。

MySQLやPostgreSQLを利用する場合は、dbフォルダを作成する必要はありません。

どのデータベースを利用するかは、レンタルサーバによって決められています。

以下に参考情報として、各レンタルサーバ毎に使用できるデータベースを記載しておきます。

【参考：各レンタルサーバで使用できるデータベース】

ロリポップ・・・MySQL　または、SQLite
さくらインターネット・・・BerkeleyDB（標準）
XREA・・・MySQL（標準）、または、SQLite、または、PostgreSQL
エックスサーバ・・・MySQL



<div class="under_line3">
<h4>■Movable Typeで使用するデータベースの指定方法</h4>
</div>

Movable Typeでどのデータベースを使用するかは、「mt-config.cgi」で指定します。

「mt-config.cgi」ファイルの以下記述が使用するデータベースの指定です。


▼MySQLの場合
<div class="temp">
### MySQL Configuration - Add the name of your database, username
# password and, optionally database host given to you by your web 
# hosting provider.
#
 ObjectDriver DBI::mysql
 Database <database-name>
 DBUser <database-username>
 DBPassword <database-password>
 DBHost localhost
</div>



▼PostgreSQLの場合
<div class="temp">
### PostgreSQL Configuration - Add the name of your database, username,
# password and, optionally database host given to you by your web 
# hosting provider.
#
# ObjectDriver DBI::postgres
# Database <database-name>
# DBUser <database-username>
# DBPassword <database-password>
# DBHost localhost
</div>


▼SQLiteの場合
<div class="temp">
### SQLite Configuration - SQLite requires only the path to your SQLite
# database file.
#
 ObjectDriver DBI::sqlite
 Database ./db/mtdb
</div>



▼BerkeleyDBの場合
<div class="temp">
### BerkeleyDB Configuration - BerekelyDB requires only the path to your
# database directory.
#
# DataSource  /path/to/database/directory
</div>



<div class="under_line3">
<h4>■ワンポイントアドバイス</h4>
</div>

データベースには、Movable Typeのエントリー（記事）をはじめ、すべてのテンプレートやコメント、設定情報が格納されています。

SQLiteやBerkeleyDBは、データベースに直接アクセスされたり、データベースをダウンロードされる可能性もあります。
不正アクセスを防ぐために、.htaccessファイルを設定しましょう。

.htaccessをテキストエディタで新規に作成し、以下の内容を記述します。

<div class="temp">
&lt;Files *&gt;
deny from all
&lt;/Files&gt;
</div>

作成した.htaccessファイルをdbフォルダにアップロードします。


]]>
    </content>
</entry>
<entry>
    <title>Movable Typeのインストール時に500エラーInternal Server Errorが表示される</title>
    <link rel="alternate" type="text/html" href="http://movabletype.gonz-style.com/blog/mt-346.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://gonz-style.com/mt/mt-atom.cgi/weblog/blog_id=3/entry_id=346" title="Movable Typeのインストール時に500エラーInternal Server Errorが表示される" />
    <id>tag:movabletype.gonz-style.com,2006://3.346</id>
    
    <published>2006-05-25T00:56:04Z</published>
    <updated>2006-05-29T14:08:01Z</updated>
    
    <summary>Movable Typeインストール時にInternal Server Errorが表示される場合の対処方法</summary>
    <author>
        <name>kokoro-net.com</name>
        <uri>http://kokoro-net.com/</uri>
    </author>
            <category term="疑問・質問コーナ" />
    
    <content type="html" xml:lang="ja" xml:base="http://movabletype.gonz-style.com/">
        Movable Typeをサーバにアップロードし、「mt-check.cgi」や「mt.cgi」を実行すると「Internal Server Error」と表示されます。
どうしたらよいのでしょうか？

        <![CDATA[Movable Typeをサーバにアップロードし、「mt-check.cgi」や「mt.cgi」を実行すると「Internal Server Error」と表示されます。
どうしたらよいのでしょうか？



<div class="under_line3">
<h4>■Internal Server Errorが表示される原因</h4>
</div>

Internal Server Errorが表示される原因には、以下のことが考えられます。

１．「.cgi」の拡張子を持つファイルに実行権限が正しく設定されていない。
２．サーバ側でタイムアウトが発生している。


では、ひとつずつ対処方法を説明します。



<div class="under_line3">
■「.cgi」の拡張子を持つファイルに実行権限が正しく設定されていない</h4>
</div>

Movable Typeのファイルをアップロードした後に、「.cgi」の拡張がついたファイルについては、実行権限が必要です。

FFFTPなどのFTPソフトを使って、属性の変更を行ってください。

属性の値をどのようにしたら良いかわからない場合は、お使いのレンタルサーバのマニュアルや良くある質問などを見てみましょう。

たいていのレンタルサーバでは、Movable Typeについて、どの属性値を使ったら良いのかが記載されています。

なお、ほとんどのサーバは、属性値を「755」に設定すれば、動作できると思います。



<div class="under_line3">
<h4>■サーバ側でタイムアウトが発生している。</h4>
</div>

属性を変更して、実行権限を付与してもエラーが発生する場合は、サーバ側でタイムアウトになっている可能性があります。

特に、夜遅くなってからは、どのレンタルサーバでもアクセスが集中するため、サーバの負荷が高くなり、処理する時間が長くなって、タイムアウトが発生します。

残念ながら、この場合の対処方法はありません。

他のレンタルサーバに変更するか、アクセスの少ない時間を狙って実行してみましょう。



]]>
    </content>
</entry>
<entry>
    <title>既存のエントリー（記事）を修正したら、トップページにエントリーが表示されなくなった</title>
    <link rel="alternate" type="text/html" href="http://movabletype.gonz-style.com/blog/mt-345.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://gonz-style.com/mt/mt-atom.cgi/weblog/blog_id=3/entry_id=345" title="既存のエントリー（記事）を修正したら、トップページにエントリーが表示されなくなった" />
    <id>tag:movabletype.gonz-style.com,2006://3.345</id>
    
    <published>2006-05-24T00:53:25Z</published>
    <updated>2006-05-24T01:00:03Z</updated>
    
    <summary>Movable Typeで、既存のエントリー（記事）を修正したら、トップページにエントリーが表示されなくなった</summary>
    <author>
        <name>kokoro-net.com</name>
        <uri>http://kokoro-net.com/</uri>
    </author>
            <category term="疑問・質問コーナ" />
    
    <content type="html" xml:lang="ja" xml:base="http://movabletype.gonz-style.com/">
        以前に投稿したエントリー（記事）を修正して保存したら、今まで表示されていたトップページのエントリー（記事）が1つも表示されなくなりました。
どうしてでしょうか？

        <![CDATA[以前に投稿したエントリー（記事）を修正して保存したら、今まで表示されていたトップページのエントリー（記事）が1つも表示されなくなりました。
どうしてでしょうか？



<div class="under_line3">
<h4>■トップページにエントリーが表示されなくなった原因</h4>
</div>

Movable Typeで、エントリー（記事）を表示するには、&lt;MTEntry&gt;タグを使います。
この&lt;MTEntry&gt;タグは、どのエントリーを表示するかをアトリビューション(属性値)で指定することができます。

例えば、新しいものから10個のエントリー（記事）を表示する場合は、以下のように記述します。

<div class="temp">
&lt;$MTEntry lastn="10"$&gt;
</div>

このアトリビューション(属性値)は、省略することも可能です。
省略した場合は、「表示に関する初期設定」で設定された値に従って表示されます。

Movable Typeの標準設定では、表示に関する初期設定が「7日分」となっているため、サイトが再構築された時点から7日以内に投稿されたエントリー（記事）だけが（トップページなどに）表示されることになります。

つまり、最後に投稿した日が、7日より以前だった場合に、トップページにエントリーが1つも表示されないという現象が発生するのです。



<div class="under_line3">
<h4>■トップページにエントリーが表示されなくなった場合の対処方法</h4>
</div>

対処方法は、２つあります。

１つは、&lt;MTEntry&gt;タグに、アトリビューション(属性値)を指定する方法です。

属性で使えるのは、以下の通りです。

lastn="N"　・・・　新しいものからN個のエントリー（記事）を表示する。
days="N"　・・・　N日以内に投稿されたエントリー（記事）を表示する。


もうひとつは、Movable Typeの設定を変える方法です。

「メインメニュー」⇒「設定」⇒「基本」をクリックします。
「表示に関する初期設定」の「表示数」を変更します。

標準では、「7日分」となっています。
単位が、日数とエントリー数から選択できますので、数字と単位の組合せで、自由に変更してください。


]]>
    </content>
</entry>
<entry>
    <title>カテゴリーを任意の順番にならべる方法</title>
    <link rel="alternate" type="text/html" href="http://movabletype.gonz-style.com/blog/mt-344.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://gonz-style.com/mt/mt-atom.cgi/weblog/blog_id=3/entry_id=344" title="カテゴリーを任意の順番にならべる方法" />
    <id>tag:movabletype.gonz-style.com,2006://3.344</id>
    
    <published>2006-05-23T12:26:24Z</published>
    <updated>2006-05-23T12:29:49Z</updated>
    
    <summary>Movable Typeオリジナルテンプレートカテゴリーを任意の順番にならべる方法</summary>
    <author>
        <name>kokoro-net.com</name>
        <uri>http://kokoro-net.com/</uri>
    </author>
            <category term="テンプレートの作り方" />
    
    <content type="html" xml:lang="ja" xml:base="http://movabletype.gonz-style.com/">
        Movable Typeで、カテゴリーの一覧を表示する場合、表示されるカテゴリーの並び順は、カテゴリー名順になります。
そのまま使うと不都合なことが起こりますね。
時系列にカテゴリ分けしている場合など、カテゴリーが表示される順番を自分で決めたいものです。

        <![CDATA[<div class="under_line3">
<h4>■カテゴリーを並べ替える理由</h4>
</div>

Movable Typeで、カテゴリーの一覧を表示する場合、表示されるカテゴリーの並び順は、カテゴリー名順になります。
そのまま使うと不都合なことが起こりますね。
時系列にカテゴリ分けしている場合など、カテゴリーが表示される順番を自分で決めたいものです。

カテゴリーを任意の順番に表示するには、プラグインを使う必要があります。
ここでは、プラグインMovable Typeで、カテゴリーを自分の思い通りに並べる方法を説明します。



<div class="under_line3">
<h4>■カテゴリーを任意の順番に並べ替えるいくつかの方法</h4>
</div>


カテゴリーを任意の順番にならべるプラグインは、いくつか公開されています。

▼cutfirstcharプラグインを使った方法
<a href="http://www.google.co.jp/url?sa=U&start=1&q=http://www.h-fj.com/blog/archives/2004/12/19-113315.php&e=14977" target="_blank">The blog of H.Fujimoto：カテゴリを任意の順番に並べ替える</a>


▼pmHeadChangerプラグインを使った方法
<a href="http://pmlabo.com/archives/2004/12/post_21.html" target="_blank">pmLabo.:●MovableTypeのカテゴリーソートに使える数字置換プラグイン</a>


▼カテゴリーの説明を使った方法
<a href="http://www.total-web.jp/technical/000083.php" target="_blank">TOTAL WEB:Movable Typeでカテゴリーの並び順を変更する</a>


上記のうち、Gonzがおすすめするのは、pmHeadChangerプラグインを使った方法です。

pmHeadChangerプラグインを使うには、「プラグインのインストール」が必要です。

インストールといっても、ファイルをサーバにコピーするだけの簡単な作業なんです。



<div class="under_line3">
<h4>■プラグインのインストール方法</h4>
</div>

まずは、以下のサイトから［pm_headchangers.zip］ファイルをダウンロードして、解凍します。

<a href="http://pmlabo.com/archives/2004/12/post_21.html" target="_blank">pmLabo.●MovableTypeのカテゴリーソートに使える数字置換プラグイン</a>


解凍したファイルをサーバのMovableTypeインストールフォルダの下の「plugins」フォルダに転送します。

サーバに転送したファイルの属性を755または、705に変更します。


以上で、プラグインのインストールが終了です。
（ほとんどのプラグインのインストールも同じ要領でインストールできます。）

念のため、プラグインがちゃんとインストールできたか確認してみましょう。

Movable Typeにログインして、「システム・メニュー」⇒「プラグイン」をクリックします。
プラグインに「pm_headchanger_xxxx.pl」が表示されていれば、ＯＫです。



<div class="under_line3">
<h4>■プラグインの使い方</h4>
</div>

pmHeadChangerプラグインを使うには、まずカテゴリー名を「数字」＋「)」＋「カテゴリー名称」のように変更します。
数字が小さい順に表示されます。「）」で区切って、表示したいカテゴリー名をつけます。
すると、）までの文字が削除されてカテゴリー名だけが表示されます。

例：
100)Movable Typeの基礎知識
200)Movable Typeのカスタマイズ
300)Movable Typeの小技・大技


<b style="color:red;">【注意】
カテゴリーアーカイブやエントリーアーカイブの格納先にカテゴリー名を使用している場合（標準で使っている場合）は、URLが変わります。
</b>


次に、メインページやカテゴリーアーカイブ、エントリーアーカイブのカテゴリー名を表示する場所で、以下のように記述します。

<div class="temp">
&lt;$MTCategoryLabel pmhc=""$&gt;
</div>


以上で、カテゴリーが任意の順番に表示されるようになりました。



<div class="under_line3">
<h4>■ワンポイントアドバイス</h4>
</div>

カテゴリー名（&lt;$MTCategoryLabel$&gt;）は、インデックステンプレートのAtomテンプレートとRSS2.0テンプレートでも使用しています。
できれば、この２つのテンプレートも変更しておきましょう。



]]>
    </content>
</entry>
<entry>
    <title>付箋紙の作り方</title>
    <link rel="alternate" type="text/html" href="http://movabletype.gonz-style.com/blog/mt-277.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://gonz-style.com/mt/mt-atom.cgi/weblog/blog_id=3/entry_id=277" title="付箋紙の作り方" />
    <id>tag:movabletype.gonz-style.com,2006://3.277</id>
    
    <published>2006-05-17T00:54:50Z</published>
    <updated>2006-05-17T01:00:03Z</updated>
    
    <summary>Movable Typeオリジナルテンプレートのデザイン方法</summary>
    <author>
        <name>kokoro-net.com</name>
        <uri>http://kokoro-net.com/</uri>
    </author>
            <category term="スタイルシートの作り方" />
    
    <content type="html" xml:lang="ja" xml:base="http://movabletype.gonz-style.com/">
        このサイトで配布している無料テンプレートでも使ってる付箋紙のような形のタイトルを作る方法を説明します。

        <![CDATA[このサイトで配布している無料テンプレートでも使ってる付箋紙のような形のタイトルを作る方法を説明します。

まずは、完成形から

<div style="width:200px;border-top:1px solid #0000cc;border-left:10px solid #0000cc;border-bottom:1px solid #0000cc;border-right:1px solid #0000cc;">
<b style="margin:0;padding:3px;">メニュータイトル</b>
</div>



<div class="under_line3">
<h4>■スタイルシートの記述方法</h4>
</div>

まずは、スタイルシートから説明します。

付箋紙は、枠線（border）を使います。
左側の枠線を極太にして、上下の枠線を細くすれば、付箋紙のように見せることができます。

<div class="temp">
.fusenshi {
 border-top:1px solid #0000cc;
 border-left:10px solid #0000cc;
 border-bottom:1px solid #0000cc;
 border-right:1px solid #0000cc;
 padding:3px;
}
</div>

border-top:1px solid #0000cc;で、上側の枠線を細く表示します。
border-left:10px solid #0000cc;で、左側の枠線を極太で表示します。
border-bottom:1px solid #0000cc;で、下側の枠線を細く表示します。
border-right:1px solid #0000cc;で、右側の枠線を細く表示します。
padding:3px;で、文字の上下左右に3pxの余白を入れます。


スタイルシートの記述はこれだけです。



<div class="under_line3">
<h4>■テンプレートでの記述方法</h4>
</div>

上記のスタイルシートを使って、メインページやカテゴリアーカイブページなどのテンプレートを記述します。

<div class="temp">
&gt;div class="fusenshi"&lt;
メニュータイトル
&gt;/div&lt;
</div>

divというタグを使って、そのdivに、スタイルシートで定義したfusenshiクラスを指定します。
タイトル文字を&gt;div class="fusenshi"&lt;〜&gt;/div&lt;の間に入れれば、完成です。

どうですか？
とっても簡単でしょ？

]]>
    </content>
</entry>
<entry>
    <title>メニューBOXの作り方</title>
    <link rel="alternate" type="text/html" href="http://movabletype.gonz-style.com/blog/mt-276.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://gonz-style.com/mt/mt-atom.cgi/weblog/blog_id=3/entry_id=276" title="メニューBOXの作り方" />
    <id>tag:movabletype.gonz-style.com,2006://3.276</id>
    
    <published>2006-05-16T00:55:36Z</published>
    <updated>2006-05-16T01:00:06Z</updated>
    
    <summary>Movable TypeオリジナルテンプレートメニューBOXの作り方</summary>
    <author>
        <name>kokoro-net.com</name>
        <uri>http://kokoro-net.com/</uri>
    </author>
            <category term="スタイルシートの作り方" />
    
    <content type="html" xml:lang="ja" xml:base="http://movabletype.gonz-style.com/">
        ポータルサイトやショッピングサイトでよく見かけるページの左右に配置されたメニューBOXを作ってみましょう。

        <![CDATA[ポータルサイトやショッピングサイトでよく見かけるページの左右に配置されたメニューBOXを作ってみましょう。


まずは、完成形からお見せします。

<div style="width:160px;border:1px solid #0000cc;">
<h5 style="margin:0;padding:3px;background-color:#0000cc;color:#ffffff;">
メニュータイトル
</h5>
メニュー１<br />
メニュー２<br />
メニュー３<br />
メニュー４<br />
メニュー５<br />
</div>


今回は、このメニューBOXの作り方をご説明しますね。


最初にスタイルシートで、BOXの大きさ（横幅）を定義します。

横幅は、width属性を使います。
そして、単位には、px（ピクセル）を使います。



<div class="under_line3">
<h4>■横幅160pxでメニューBOXの枠を定義する</h4>
</div>

では、メニューBOXの横幅を160pxで定義してみましょう。

<div class="temp">
.menu-box {
 width:160px;
}
</div>


.menu-boxという要素は、『クラス要素』と言って、定義する属性をグルーピングしてくれます。
まあ、もっとわかりやすく説明すると、複数の属性を定義した集合体といったところでしょうか

クラスを定義するには、属性の最初に、『.（ピリオド）』を使います。
クラスの名前は、自由につけられますので、後で見てわかりやすい名前をつけましょう。

ここでは、menu-boxというクラスを『.menu-box』と定義しています。



<div class="under_line3">
<h4>■メニューBOXに枠線をつける</h4>
</div>

上のmenu-boxに、境界線（枠線）を濃い青色で表示する定義を追加してみましょう。


<div class="temp">
.menu-box {
 width:160px;
 border:1px solid #0000cc;
}
</div>


境界線（枠線）は、borderという属性を使います。
「border:1px solid #0000cc;」で、上下左右に、太さ1px、線の種類は実線(solid)、カラーは濃い青色(#0000cc)の線を表示します。



<div class="under_line3">
<h4>■メニュータイトル部分を定義する</h4>
</div>

次に、メニュータイトル部分を定義します。

メニューのタイトルには、HTMLのh1〜h6タグを使うのが良いでしょう。

ここでは、h5タグを使ってみます。

完成形のように、背景色に、濃い青色、文字色は白で定義します。


<div class="temp">
h5 {
 margin:0;
 padding:3px;
 background-color:#0000cc;
 color:#ffffff;
}
</div>

h1〜h6タグは、ブロック要素と言います。
ブロック要素は、要素の前後に改行が入ります。

さらに、h1〜h6タグは、要素の上下に、余白が多くとられますので、これを「margin:0;」で無くしてします。

「padding:3px;」は、文字と境界線の間に、3px分の余白を作っています。

背景色は、「background-color:#0000cc;」で、濃い青色を指定
文字色は、「color:#ffffff;」で、白を指定しています。


以上で、スタイルシートの準備が完了しました。



<div class="under_line3">
<h4>■テンプレートの記述方法</h4>
</div>

上で作成したスタイルシートを使って、インデックステンプレートなどを編集します。


メニューBOXを表示させたい位置に、以下のように記述します。


<div class="temp">
&lt;div class="menu-box"&gt;
&lt;h5&gt;メニュータイトル&lt;/h5&gt;
メニュー１&lt;br /&gt;
メニュー２&lt;br /&gt;
メニュー３&lt;br /&gt;
メニュー４&lt;br /&gt;
メニュー５&lt;br /&gt;
&lt;/div&gt;
</div>

これで、メニューBOXが完成です。


では、詳しく説明します。


まず、「&lt;div class="menu-box"&gt;」で、ここからメニューBOXの記述がはじまることを宣言します。

次に「&lt;h5&gt;メニュータイトル&lt;/h5&gt;」で、メニュータイトルを表示します。

続けて、「メニュー１&lt;br /&gt;」〜「メニュー５&lt;br /&gt;」で、メニューリストを表示します。

最後に、「&lt;/div&gt;」で、メニューBOXの記述が終わったことを宣言します。



<div class="under_line3">
<h4>■カテゴリー一覧での使用例</h4>
</div>

実際には、このメニューBOXに、カテゴリー一覧やコメント、トラックバックなどを表示して使いますよね。

メニューBOXに、カテゴリー一覧を表示する場合は、以下のように記述します。


<div class="temp">
&lt;div class="menu-box"&gt;
&lt;h5&gt;カテゴリー&lt;/h5&gt;
&lt;MTSubCategories&gt;
&lt;MTSubCatIsFirst&gt;&lt;ul&gt;&lt;/MTSubCatIsFirst&gt;
&lt;li&gt;&lt;MTCategoryLabel&gt;&lt;/li&gt;
&lt;MTSubCatsRecurse&gt;
&lt;MTSubCatIsLast&gt;&lt;/ul&gt;&lt;/MTSubCatIsLast&gt;
&lt;/MTSubCategories&gt;
&lt;/div&gt;
</div>


メニュータイトルを「カテゴリー」に変更します。

「メニュー１&lt;br /&gt;」〜「メニュー５&lt;br /&gt;」の変わりに、Movable Typeのカテゴリー一覧を表示するMTタグを使っています。


「&lt;MTSubCategories&gt;」は、これから、カテゴリーを表示するための記述がはじまることを宣言しています。

「&lt;MTSubCatIsFirst&gt;&lt;ul&gt;&lt;/MTSubCatIsFirst&gt;」は、（サブカテゴリを設定している場合）兄弟カテゴリの中で最初のカテゴリのときだけ表示される内容を記述します。

「&lt;li&gt;&lt;MTCategoryLabel&gt;&lt;/li&gt;」は、カテゴリ名を表示しています。

「&lt;MTSubCatsRecurse&gt;」は、すべてのカテゴリが表示し終わるまで、繰り返して表示させるMTタグです。

「&lt;MTSubCatIsLast&gt;&lt;/ul&gt;&lt;/MTSubCatIsLast&gt;」は、兄弟カテゴリの中の最後のカテゴリのときに表示される内容を記述します。

「&lt;/MTSubCategories&gt;」は、ここでカテゴリーを表示するための記述が終わったことを宣言しています。



<div class="under_line3">
<h4>■ワンポイントアドバイス</h4>
</div>

上記のように、h5タグについて、スタイルを定義すると、すべてのテンプレートで使われるh5タグに、このスタイルが適用されてしまいます。

例えば、メインページでは、メニュータイトルとして使い、エントリーアーカイブページでは、普通のh5タグとして使いたい場合もあるでしょう。

そのような場合は、メニューBOXで使うh5タグだけに適用するスタイルの定義方法があります。

menu-boxクラスの中のh5タグについて、スタイルを定義するやり方です。


<div class="temp">
<b style="color:red;">.menu-box </b>h5 {
 margin:0;
 padding:3px;
 background-color:#0000cc;
 color:#ffffff;
}
</div>


上記のように、h5の前に、「<b style="color:red;">.menu-box</b>」を記述すると、「&lt;div class="menu-box"&gt;」〜「&lt;/div&gt;」で囲まれたh5タグだけに、スタイルが適用されます。

]]>
    </content>
</entry>
<entry>
    <title>2カラム型テンプレート：エントリーカイブページの作り方</title>
    <link rel="alternate" type="text/html" href="http://movabletype.gonz-style.com/blog/mt-275.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://gonz-style.com/mt/mt-atom.cgi/weblog/blog_id=3/entry_id=275" title="2カラム型テンプレート：エントリーカイブページの作り方" />
    <id>tag:movabletype.gonz-style.com,2006://3.275</id>
    
    <published>2006-05-15T00:56:24Z</published>
    <updated>2006-05-17T15:44:30Z</updated>
    
    <summary>Movable Typeオリジナルテンプレート2カラム型エントリーカイブページの作り方</summary>
    <author>
        <name>kokoro-net.com</name>
        <uri>http://kokoro-net.com/</uri>
    </author>
            <category term="テンプレートの作り方" />
    
    <content type="html" xml:lang="ja" xml:base="http://movabletype.gonz-style.com/">
        エントリーカイブページは、今までのメインページやカテゴリーアーカイブページと違い、コメントの投稿フォームがあるので、ちょっと複雑になっています。

投稿フォームに関連して、JavaScriptというプログラム言語が使われています。
ここを下手にいじるとコメントが投稿されなくなったり、エラーが表示されたりしますので、気をつけてください。

エントリーアーカイブページを作るときは、投稿フォームがあることに注意してカスタマイズしてくださいね。

        <![CDATA[エントリーカイブページは、今までのメインページやカテゴリーアーカイブページと違い、コメントの投稿フォームがあるので、ちょっと複雑になっています。

投稿フォームに関連して、JavaScriptというプログラム言語が使われています。
ここを下手にいじるとコメントが投稿されなくなったり、エラーが表示されたりしますので、気をつけてください。

エントリーアーカイブページを作るときは、投稿フォームがあることに注意してカスタマイズしてくださいね。
ここでは、以下ような左側にメニューがある2カラム型のメインページテンプレートを作成します。


<div style="width:300px;padding:5px;border:1px dotted red;">ページ全体枠(#container)<div style="margin:0;padding:0;width:400px;"><div align="center" style="margin:0;padding:0;background-color:#008000;color:#FFFFFF;"><br>ヘッダー部分(#banner)<br><br></div><div align="center" style="margin:0;padding:0;width:150px;background-color:#00FFFF;float:left;"><br>左側メニュー<br>部分(#leftbar)<br><br><br><br><br></div><div align="center" style="margin:0;padding:0;width:250px;background-color:#00FF00;float:right;color:#FFFFFF;"><br>本体部分(#content)<br><br><br><br><br><br></div><br clear=all><div align="center" style="margin:0;padding:0;background-color:#0000FF;color:#FFFFFF;"><br>フッター部分(#footer)<br><br></div></div></div>



<div class="under_line3">
<h4>■デフォルトスタイルシートの削除と変更</h4>
</div>


手順１：Movable Typeのメイン・メニューから、テンプレート⇒アーカイブ⇒エントリー・アーカイブをクリックしてください。


手順２：表示されたテンプレートの内容のうち、&lt;body class="layout-one-column" onload="individualArchivesOnLoad(commenter_name)"&gt;から&lt;/body&gt;の間に記述されている部分を削除します。<b style="color:red;">※&lt;body class="layout-one-column" onload="individualArchivesOnLoad(commenter_name)"&gt;と&lt;/body&gt;は残しておいてね</b>


手順３：&lt;body class="layout-one-column" onload="individualArchivesOnLoad(commenter_name)"&gt;を次のように変更します。

<div class="temp">
【変更前】<br />
&lt;body class="layout-one-column" onload="individualArchivesOnLoad(commenter_name)"&gt;<br />
【変更後】<br />
&lt;body onload="individualArchivesOnLoad(commenter_name)"&gt;<br />
</div>
<div style="margin-left:15px;font-size:12px;">
スタイルシートの作成で、layout-one-columnは、定義していませんので、この部分を削除します。
</div>



<div class="under_line3">
<h4>■ページ全体の記述</h4>
</div>

手順４：そして、いつものように、”ページ全体の表示エリア”の開始を宣言します。

<div class="temp">
&lt;div&nbsp;id="container"&gt;
</div>



<div class="under_line3">
<h4>■ヘッダー部分の記述</h4>
</div>

手順５：次に、ブログタイトルや説明を表示するヘッダー部分を記述します。

ヘッダーには、ブログのタイトルとブログの説明文を表示してみましょう。

ここは、メインページやカテゴリーアーカイブページと同じですね。

<div class="temp">
&lt;div&nbsp;id="banner"&gt;<br />
&lt;h1&gt;&lt;$MTBlogName encode_html="1"$&gt;&lt;/h1&gt;<br />
&lt;h2&gt;&lt;$MTBlogDescription$&gt;&lt;/h2&gt;<br />
&lt;/div&gt;
</div>
<div style="margin-left:15px;font-size:12px;">
&lt;h1&gt;〜&lt;/h1&gt;のことをHTMLのh1タグって呼ぶます。意味は、一番大きな文字で表示するってことです。
そして、&lt;$MTBlogName encode_html="1"$&gt;がブログタイトルを表して、&lt;$MTBlogDescription$&gt;がブログの説明を表します。
</div>



<div class="under_line3">
<h4>■左側メニュー部分の記述（カテゴリー一覧）</h4>
</div>

次に、左側メニュー部分を記述します。

左側メニューには、カテゴリー一覧を表示してみます。

<div class="temp">
&lt;h3&gt;カテゴリー&lt;/h3&gt;<br />
&lt;MTTopLevelCategories&gt;<br />
&lt;MTSubCatIsFirst&gt;&lt;ul&gt;&lt;/MTSubCatIsFirst&gt;<br />
&lt;MTIfNonZero tag="MTCategoryCount"&gt;<br />
&lt;li&gt;<br />
&lt;a href="&lt;$MTCategoryArchiveLink$&gt;" title="&lt;$MTCategoryDescription$&gt;"&gt;<br />
&lt;$MTCategoryLabel$&gt;&lt;/a&gt;<br />
&lt;MTElse&gt;<br />
&lt;li&gt;&lt;$MTCategoryLabel$&gt;<br />
&lt;/MTElse&gt;<br />
&lt;/MTIfNonZero&gt;<br />
&lt;MTSubCatsRecurse&gt;<br />
&lt;/li&gt;<br />
&lt;MTSubCatIsLast&gt;&lt;/ul&gt;&lt;/MTSubCatIsLast&gt;<br />
&lt;/MTTopLevelCategories&gt;<br />
</div>
<div style="margin-left:15px;font-size:12px;">
この部分はちょっとややこしいので、解説は省略しますが、この記述で、トップレベルカテゴリーから全てのサブカテゴリーを表示させます。
</div>



<div class="under_line3">
<h4>■左側メニュー部分の記述終了</h4>
</div>

手順６：ここで、左側メニュー部分の記述が終了したので、左側メニュー部分の終了を宣言します。

<div class="temp">
&lt;/div&gt;
</div>



<div class="under_line3">
<h4>■本体部分の記述（エントリー）</h4>
</div>

次に、本体部分を記述します。

最初に、本体部分の表示を開始することを宣言します。

手順７：本体部分の表示開始を宣言する。

<div class="temp">
&lt;div&nbsp;id="centent"&gt;
</div>

手順８：次に、エントリーの内容を表示する部分です。

<div class="temp">
&lt;h3&gt;&lt;$MTEntryTitle$&gt;&lt;/h3&gt;<br />
&lt;$MTEntryBody$&gt;<br />
&lt;$MTEntryMore$&gt;<br />
投稿者: &lt;$MTEntryAuthorDisplayName$&gt; 日時: &lt;$MTEntryDate$&gt;<br />
</div>
<div style="margin-left:15px;font-size:12px;">
&lt;$MTEntryTitle$&gt;は、エントリーのタイトル、&lt;$MTEntryMore$&gt;は、エントリーの追記を表します。
</div>



<div class="under_line3">
<h4>■本体部分の記述（トラックバック）</h4>
</div>

次に、トラックバックを表示してみましょう。


手順９：トラックバック関連の表示をする。

<div class="temp">
&lt;MTIfPingsActive&gt;<br />
トラックバック<br />
&lt;MTIfPingsAccepted&gt;<br />
このエントリーのトラックバックURL:<br />
&lt;$MTEntryTrackbackLink$&gt;<br />
&lt;/MTIfPingsAccepted&gt;<br />
&lt;MTPings&gt;<br />
&raquo; &lt;a rel="nofollow" href="&lt;$MTPingURL$&gt;"&gt;&lt;$MTPingTitle$&gt;&lt;/a&gt; from &lt;$MTPingBlogName$&gt;&lt;br /&gt;<br />
&lt;$MTPingExcerpt$&gt; &lt;a rel="nofollow" href="&lt;$MTPingURL$&gt;"&gt;[詳しくはこちら]&lt;/a&gt;<br />
トラックバック時刻:  &lt;a href="#ping-&lt;$MTPingID$&gt;"&gt;&lt;$MTPingDate$&gt;&lt;/a&gt;<br />
&lt;/MTPings&gt;<br />
&lt;/MTIfPingsActive&gt;<br />
</div>
<div style="margin-left:15px;font-size:12px;">
&lt;MTIfPingsAccepted&gt;は、トラックバックの受付URLを表示します。<br />
&lt;$MTPingURL$&gt;は、トラックバック元のURL。<br />
&lt;$MTPingTitle$&gt;は、トラックバックをしたブログの記事タイトル<br />
&lt;$MTPingBlogName$&gt;は、トラックバックをしたブログのタイトル<br />
&lt;$MTPingDate$&gt;は、トラックバックを受けた時間<br />
</div>



<div class="under_line3">
<h4>■本体部分の記述（コメント）</h4>
</div>

次に、コメントを表示してみましょう。


手順１０：コメントを表示する。

<div class="temp">
&lt;MTIfCommentsActive&gt;<br />
&lt;MTComments&gt;<br />
&lt;MTCommentsHeader&gt;<br />
コメント<br />
&lt;/MTCommentsHeader&gt;<br />
&lt;a id="c&lt;$MTCommentID pad="1"$&gt;"&gt;&lt;/a&gt;<br />
&lt;$MTCommentBody$&gt;<br />
投稿者 &lt;$MTCommentAuthorLink default_name="Anonymous"$&gt; | &lt;$MTCommentDate$&gt;<br />
&lt;/MTComments&gt;<br />
</div>
<div style="margin-left:15px;font-size:12px;">
&lt;MTComments&gt;〜&lt;/MTComments&gt;は、この間に記述されている内容をコメントの数分繰り返して表示します。<br />
&lt;MTCommentsHeader&gt;〜&lt;/MTCommentsHeader&gt;は、この間に記述されている内容を最初のコメントのときだけ表示します。<br />
&lt;$MTCommentBody$&gt;は、コメントの内容です。<br />
&lt;$MTCommentAuthorLink default_name="Anonymous"$&gt;は、リンク付きの投稿者の名前を表示し、もし、名前が未入力であれば、「Anonymous」と表示されます。<br />
&lt;MTCommentAuthor&gt;は、コメントを投稿した人の名前。<br />
&lt;$MTCommentDate&gt;は、コメントを投稿した時間<br />
この部分は、手順11のコメント投稿フォームとセットで使ってくださいね。<br />
</div>



<div class="under_line3">
<h4>■本体部分の記述（コメント投稿フォーム）</h4>
</div>

次に、コメントを投稿するためのフォームを表示します。

手順１１：コメント投稿フォームを表示する。

<div class="temp">
&lt;MTEntryIfCommentsOpen&gt; <br />
&lt;form method="post" action="&lt;$MTCGIPath$&gt;&lt;$MTCommentScript$&gt;"<br />
 name="comments_form"<br />
 onsubmit="if (this.bakecookie.checked) rememberMe(this)"&gt;<br />
&lt;input type="hidden" name="static" value="1" /&gt;<br />
&lt;input type="hidden" name="entry_id" value="&lt;$MTEntryID$&gt;" /&gt;<br />
コメントを投稿する<br />
&lt;script type="text/javascript"&gt;&lt;!--<br />
writeTypeKeyGreeting(commenter_name, &lt;$MTEntryID$&gt;);<br />
//--&gt;&lt;/script&gt;<br />
&lt;MTIfCommentsModerated&gt;<br />
(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)<br />
&lt;/MTIfCommentsModerated&gt;<br />
&lt;table border=0&gt;<br />
&lt;tbody&gt;<br />
&lt;tr&gt;<br />
 &lt;td align="right"&gt;<br />
  &lt;label for="comment-author"&gt;名前: &lt;/label&gt;<br />
 &lt;/td&gt;<br />
 &lt;td&gt;<br />
  &lt;input id="comment-author" name="author" size="30" /&gt;<br />
 &lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
 &lt;td align="right"&gt;<br />
  &lt;label for="comment-email"&gt;メールアドレス: &lt;/label&gt;<br />
 &lt;/td&gt;<br />
 &lt;td&gt;<br />
  &lt;input id="comment-email" name="email" size="30" /&gt;<br />
 &lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
 &lt;td align="right"&gt;<br />
  &lt;label for="comment-url"&gt;URL: &lt;/label&gt;<br />
 &lt;/td&gt;<br />
 &lt;td&gt;<br />
  &lt;input id="comment-url" name="url" size="30" /&gt;<br />
 &lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
 &lt;td colspan="2"&gt;<br />
  &lt;label for="comment-bake-cookie"&gt;&lt;input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" /&gt;この情報を登録しますか?&lt;/label&gt;<br />
 &lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
 &lt;td colspan="2" align="center"&gt;<br />
  &lt;label for="comment-text"&gt;コメント:  &lt;MTIfAllowCommentHTML&gt;(スタイル用のHTMLタグが使えます)&lt;/MTIfAllowCommentHTML&gt;&lt;/label&gt;&lt;br /&gt;<br />
  &lt;textarea id="comment-text" name="text" rows="10" cols="50"&gt;&lt;/textarea&gt;<br />
&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
 &lt;td colspan="2" align="center"&gt;<br />
  &lt;input type="submit" accesskey="v" name="preview" id="comment-preview" value="確認" /&gt;　　<br />
  &lt;input type="submit" accesskey="s" name="post" id="comment-post" value="投稿" /&gt;<br />
 &lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/tbody&gt;<br />
&lt;/table&gt;<br />
&lt;/form&gt;<br />
&lt;/MTEntryIfCommentsOpen&gt;<br />
&lt;/MTIfCommentsActive&gt;<br />
</div>
<div style="margin-left:15px;font-size:12px;">
この部分は、JavaScriptやら、formやら難しい記述があるので、とにかく、この記述をコピーして使ってください。<br />
なお、手順１０のコメント表示とセットで使ってくださいね。
</div>



<div class="under_line3">
<h4>■フッター部分の記述</h4>
</div>

手順１２：最後尾に、フッターを表示しましょう。

<div class="temp">
&lt;div&nbsp;id="footer"&gt;<br />
Copy Right (C) 2006 All rights reserved.<br />
&lt;/div&gt;
</div>



<div class="under_line3">
<h4>■ページ全体に対する記述の終了宣言</h4>
</div>

手順１３：最後の最後に、ページ全体の終了を宣言します。

<div class="temp">
&lt;/div&gt;
</div>


手順１４：以上で、メインページの記述は終了しました。「保存」ボタンをクリックしてください。

手順１５：右側のメイン・メニューから「サイトを再構築」をクリックしてください。

手順１６：表示された画面で、「アーカイブのみを再構築:エントリー」を選択し、【再構築】ボタンをクリックしてください。



<div class="under_line3">
<h4>★ワンポイントアドバイス（左に本体、右にメニューを表示するには？）</h4>
</div>

左側に本体、右側にメニューを表示する場合はどうしたらいいのでしょうか？

答えは、左側メニューの記述と本体の記述の順番を逆にします。


【左側：メニュー、右側：本体の場合の記述順】
　ヘッダー(#banner)　⇒　左側メニュー(#leftbar)　⇒　本体(#content)　⇒　フッター(#footer)


【左側：本体、右側：メニューの場合の記述順】
　ヘッダー(#banner)　⇒　本体(#content)　⇒　右側メニュー(#rightbar)　⇒　フッター(#footer)
]]>
    </content>
</entry>
<entry>
    <title>2カラム型テンプレート：カテゴリーアーカイブページの作り方</title>
    <link rel="alternate" type="text/html" href="http://movabletype.gonz-style.com/blog/mt-274.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://gonz-style.com/mt/mt-atom.cgi/weblog/blog_id=3/entry_id=274" title="2カラム型テンプレート：カテゴリーアーカイブページの作り方" />
    <id>tag:movabletype.gonz-style.com,2006://3.274</id>
    
    <published>2006-05-14T00:55:17Z</published>
    <updated>2006-05-17T15:43:32Z</updated>
    
    <summary>Movable Typeオリジナルテンプレート2カラム型カテゴリーアーカイブページの作り方</summary>
    <author>
        <name>kokoro-net.com</name>
        <uri>http://kokoro-net.com/</uri>
    </author>
            <category term="テンプレートの作り方" />
    
    <content type="html" xml:lang="ja" xml:base="http://movabletype.gonz-style.com/">
        2カラム型テンプレートのカテゴリーアーカイブページの作り方を説明します。
1カラム型と同様に、内容はメインページとほとんど同じです。

        <![CDATA[2カラム型テンプレートのカテゴリーアーカイブページの作り方を説明します。
1カラム型と同様に、内容はメインページとほとんど同じです。


ここでは、以下ような左側にメニューがある2カラム型のメインページテンプレートを作成します。


<div style="width:300px;padding:5px;border:1px dotted red;">ページ全体枠(#container)<div style="margin:0;padding:0;width:400px;"><div align="center" style="margin:0;padding:0;background-color:#008000;color:#FFFFFF;"><br>ヘッダー部分(#banner)<br><br></div><div align="center" style="margin:0;padding:0;width:150px;background-color:#00FFFF;float:left;"><br>左側メニュー<br>部分(#leftbar)<br><br><br><br><br></div><div align="center" style="margin:0;padding:0;width:250px;background-color:#00FF00;float:right;color:#FFFFFF;"><br>本体部分(#content)<br><br><br><br><br><br></div><br clear=all><div align="center" style="margin:0;padding:0;background-color:#0000FF;color:#FFFFFF;"><br>フッター部分(#footer)<br><br></div></div></div>



<div class="under_line3">
<h4>■デフォルトスタイルシートの削除</h4>
</div>

他人が作ったテンプレートを修正するのは、ものすごく大変です。
自分が作ったテンプレートであれば、どのになにを記述してあるのかすぐに検討がつきますので、後でのカスタマイズもすぐにできますよね。

ということで、標準のテンプレートは、あっさりと削除しましょう。


手順１：Movable Typeのメイン・メニューから、テンプレート⇒アーカイブ⇒カテゴリー・アーカイブをクリックしてください。


手順２：表示されたテンプレートの内容のうち、&lt;body&gt;から&lt;/body&gt;の間に記述されている部分を削除します。
<b style="color:red;">※&lt;body&gt;と&lt;/body&gt;は残しておいてね</b>



<div class="under_line3">
<h4>■ページ全体の記述</h4>
</div>

手順３：最初に記述するのは、ページ全体に対する記述です。
スタイルシートで定義した、#containerを使います。

<div class="temp">
&lt;div&nbsp;id="container"&gt;
</div>
<div style="margin-left:15px;font-size:12px;">
「これから、ページに表示する内容を記述しますよ」っていう意味です。
</div>



<div class="under_line3">
<h4>■ヘッダー部分の記述</h4>
</div>

手順４：次に、ブログタイトルや説明を表示するヘッダー部分を記述します。

ヘッダーには、ブログのタイトルとブログの説明文を表示してみましょう。

<div class="temp">
&lt;div&nbsp;id="banner"&gt;<br />
&lt;h1&gt;&lt;$MTBlogName encode_html="1"$&gt;&lt;/h1&gt;<br />
&lt;h2&gt;&lt;$MTBlogDescription$&gt;&lt;/h2&gt;<br />
&lt;/div&gt;
</div>
<div style="margin-left:15px;font-size:12px;">
&lt;h1&gt;〜&lt;/h1&gt;のことをHTMLのh1タグって呼ぶます。意味は、一番大きな文字で表示するってことです。
そして、&lt;$MTBlogName encode_html="1"$&gt;がブログタイトルを表して、&lt;$MTBlogDescription$&gt;がブログの説明を表します。
</div>



<div class="under_line3">
<h4>■左側メニュー部分の記述（カテゴリー一覧）</h4>
</div>

次に、左側メニュー部分を記述します。

左側メニューには、カテゴリー一覧と最近のエントリー一覧を表示してみます。


手順５：まずは、左側メニューの記述がはじまることを宣言しましょう。

<div class="temp">
&lt;div&nbsp;id="leftbar"&gt;
</div>


手順６：左側メニューの最初には、カテゴリー一覧を表示してみましょう。

<div class="temp">
&lt;h3&gt;カテゴリー&lt;/h3&gt;<br />
&lt;MTTopLevelCategories&gt;<br />
&lt;MTSubCatIsFirst&gt;&lt;ul&gt;&lt;/MTSubCatIsFirst&gt;<br />
&lt;MTIfNonZero tag="MTCategoryCount"&gt;<br />
&lt;li&gt;<br />
&lt;a href="&lt;$MTCategoryArchiveLink$&gt;" title="&lt;$MTCategoryDescription$&gt;"&gt;<br />
&lt;$MTCategoryLabel$&gt;&lt;/a&gt;<br />
&lt;MTElse&gt;<br />
&lt;li&gt;&lt;$MTCategoryLabel$&gt;<br />
&lt;/MTElse&gt;<br />
&lt;/MTIfNonZero&gt;<br />
&lt;MTSubCatsRecurse&gt;<br />
&lt;/li&gt;<br />
&lt;MTSubCatIsLast&gt;&lt;/ul&gt;&lt;/MTSubCatIsLast&gt;<br />
&lt;/MTTopLevelCategories&gt;<br />
</div>
<div style="margin-left:15px;font-size:12px;">
この部分はちょっとややこしいので、解説は省略しますが、この記述で、トップレベルカテゴリーから全てのサブカテゴリーを表示させます。
</div>



<div class="under_line3">
<h4>■左側メニュー部分の記述（最近のエントリー一覧）</h4>
</div>


手順７：カテゴリーの次は、最近のエントリー一覧を表示してみましょう。

<div class="temp">
&lt;h3&gt;最近のエントリー&lt;/h3&gt;<br />
&lt;MTEntries&gt;<br />
&lt;a href="&lt;$MTEntryPermalink$&gt;" title="&lt;$MTEntryTitle$&gt;"&gt;<br />
&lt;$MTEntryTitle$&gt;&lt;/a&gt;<br />
&lt;/MTEntries&gt;<br />
</div>
<div style="margin-left:15px;font-size:12px;">
この部分もちょっとややこしいので、少しだけ解説します。
&lt;$MTEntryTitle$&gt;は、エントリーのタイトルを表示するという意味です。
</div>



<div class="under_line3">
<h4>■左側メニュー部分の記述終了</h4>
</div>

手順８：ここで、左側メニュー部分の記述が終了したので、左側メニュー部分の終了を宣言します。

<div class="temp">
&lt;/div&gt;
</div>



<div class="under_line3">
<h4>■本体部分の記述</h4>
</div>

次に、本体部分を記述します。

本体部分には、新しく投稿された記事を表示してみます。
表示する内容は、エントリータイトル、エントリー概要です。


手順９：新着記事を表示する。

<div class="temp">
&lt;h3&gt;最新の記事&lt;/h3&gt;<br />
&lt;MTEntries&gt;<br />
&lt;h4&gt;<br />
&lt;a href="&lt;$MTEntryPermalink$&gt;" title="&lt;$MTEntryTitle$&gt;"&gt;<br />
&lt;$MTEntryTitle$&gt;&lt;/a&gt;<br />
&lt;/h4&gt;<br />
&lt;$MTEntryExcerpt$&gt;<br />
&lt;/MTEntries&gt;<br />
</div>
<div style="margin-left:15px;font-size:12px;">
この部分もちょっとややこしいので、少しだけ解説します。
&lt;$MTEntryTitle$&gt;は、エントリーのタイトル、&lt;$MTEntryExcerpt$&gt;は、エントリーの概要を表します。
エントリーの概要に入力がない場合は、本文の最初の20文字が表示されます。
ちなみに、本文を表示する場合には、&lt;$MTEntryBody$&gt;、追記は、&lt;$MTEntryMore $&gt;を使います。
</div>



<div class="under_line3">
<h4>■フッター部分の記述</h4>
</div>

ヘッダー、左側メニュー、本体と表示し終わりましたので、最後にフッターを表示します。

通常、フッターには、Copy Rightなどの著作権を表示しますね。

手順１０：最後尾に、フッターを表示しましょう。

<div class="temp">
&lt;div&nbsp;id="footer"&gt;<br />
Copy Right (C) 2006 All rights reserved.<br />
&lt;/div&gt;
</div>



<div class="under_line3">
<h4>■ページ全体に対する記述の終了宣言</h4>
</div>


手順１１：最後の最後に、ページ全体の終了を宣言します。

<div class="temp">
&lt;/div&gt;
</div>


手順１２：以上で、カテゴリーアーカイブページの記述は終了しました。「保存」ボタンをクリックして、サイトを再構築してください。



<div class="under_line3">
<h4>★ワンポイントアドバイス（左に本体、右にメニューを表示するには？）</h4>
</div>

左側に本体、右側にメニューを表示する場合はどうしたらいいのでしょうか？

答えは、左側メニューの記述と本体の記述の順番を逆にします。


【左側：メニュー、右側：本体の場合の記述順】
　ヘッダー(#banner)　⇒　左側メニュー(#leftbar)　⇒　本体(#content)　⇒　フッター(#footer)


【左側：本体、右側：メニューの場合の記述順】
　ヘッダー(#banner)　⇒　本体(#content)　⇒　右側メニュー(#rightbar)　⇒　フッター(#footer)


]]>
    </content>
</entry>
<entry>
    <title>2カラム型テンプレート：メインページの作り方</title>
    <link rel="alternate" type="text/html" href="http://movabletype.gonz-style.com/blog/mt-273.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://gonz-style.com/mt/mt-atom.cgi/weblog/blog_id=3/entry_id=273" title="2カラム型テンプレート：メインページの作り方" />
    <id>tag:movabletype.gonz-style.com,2006://3.273</id>
    
    <published>2006-05-13T00:59:35Z</published>
    <updated>2006-05-17T15:48:48Z</updated>
    
    <summary>Movable Typeオリジナルテンプレート2カラム型メインページの作り方</summary>
    <author>
        <name>kokoro-net.com</name>
        <uri>http://kokoro-net.com/</uri>
    </author>
            <category term="テンプレートの作り方" />
    
    <content type="html" xml:lang="ja" xml:base="http://movabletype.gonz-style.com/">
        2カラム型テンプレートのメインページの作り方を説明します。
ここをマスターすれば、Movable Typeもすぐに攻略できるようになります。

        <![CDATA[2カラム型テンプレートのメインページの作り方を説明します。
ここをマスターすれば、Movable Typeもすぐに攻略できるようになります。

ここでは、以下ような左側にメニューがある2カラム型のメインページテンプレートを作成します。


<div style="width:300px;padding:5px;border:1px dotted red;">ページ全体枠(#container)<div style="margin:0;padding:0;width:400px;"><div align="center" style="margin:0;padding:0;background-color:#008000;color:#FFFFFF;"><br>ヘッダー部分(#banner)<br><br></div><div align="center" style="margin:0;padding:0;width:150px;background-color:#00FFFF;float:left;"><br>左側メニュー<br>部分(#leftbar)<br><br><br><br><br></div><div align="center" style="margin:0;padding:0;width:250px;background-color:#00FF00;float:right;color:#FFFFFF;"><br>本体部分(#content)<br><br><br><br><br><br></div><br clear=all><div align="center" style="margin:0;padding:0;background-color:#0000FF;color:#FFFFFF;"><br>フッター部分(#footer)<br><br></div></div></div>



<div class="under_line3">
<h4>■デフォルトスタイルシートの削除</h4>
</div>

他人が作ったテンプレートを修正するのは、ものすごく大変です。
自分が作ったテンプレートであれば、どのになにを記述してあるのかすぐに検討がつきますので、後でのカスタマイズもすぐにできますよね。

ということで、標準のテンプレートは、あっさりと削除しましょう。


手順１：Movable Typeのメイン・メニューから、テンプレート⇒メインページをクリックしてください。


手順２：表示されたテンプレートの内容のうち、&lt;body&gt;から&lt;/body&gt;の間に記述されている部分を削除します。
<b style="color:red;">※&lt;body&gt;と&lt;/body&gt;は残しておいてね</b>



<div class="under_line3">
<h4>■ページ全体の記述</h4>
</div>

手順３：最初に記述するのは、ページ全体に対する記述です。
スタイルシートで定義した、#containerを使います。

<div class="temp">
&lt;div&nbsp;id="container"&gt;
</div>
<div style="margin-left:15px;font-size:12px;">
「これから、ページに表示する内容を記述しますよ」っていう意味です。
</div>



<div class="under_line3">
<h4>■ヘッダー部分の記述</h4>
</div>

手順４：次に、ブログタイトルや説明を表示するヘッダー部分を記述します。

ヘッダーには、ブログのタイトルとブログの説明文を表示してみましょう。

<div class="temp">
&lt;div&nbsp;id="banner"&gt;<br />
&lt;h1&gt;&lt;$MTBlogName encode_html="1"$&gt;&lt;/h1&gt;<br />
&lt;h2&gt;&lt;$MTBlogDescription$&gt;&lt;/h2&gt;<br />
&lt;/div&gt;
</div>
<div style="margin-left:15px;font-size:12px;">
&lt;h1&gt;〜&lt;/h1&gt;のことをHTMLのh1タグって呼ぶます。意味は、一番大きな文字で表示するってことです。
そして、&lt;$MTBlogName encode_html="1"$&gt;がブログタイトルを表して、&lt;$MTBlogDescription$&gt;がブログの説明を表します。
</div>



<div class="under_line3">
<h4>■左側メニュー部分の記述（カテゴリー一覧）</h4>
</div>

次に、左側メニュー部分を記述します。

左側メニューには、カテゴリー一覧と最近のエントリー一覧、最近のコメント、それに最近のトラックバックを表示してみます。


手順５：まずは、左側メニューの記述がはじまることを宣言しましょう。

<div class="temp">
&lt;div&nbsp;id="leftbar"&gt;
</div>


手順６：左側メニューの最初には、カテゴリー一覧を表示してみましょう。

<div class="temp">
&lt;h3&gt;カテゴリー&lt;/h3&gt;<br />
&lt;MTTopLevelCategories&gt;<br />
&lt;MTSubCatIsFirst&gt;&lt;ul&gt;&lt;/MTSubCatIsFirst&gt;<br />
&lt;MTIfNonZero tag="MTCategoryCount"&gt;<br />
&lt;li&gt;<br />
&lt;a href="&lt;$MTCategoryArchiveLink$&gt;" title="&lt;$MTCategoryDescription$&gt;"&gt;<br />
&lt;$MTCategoryLabel$&gt;&lt;/a&gt;<br />
&lt;MTElse&gt;<br />
&lt;li&gt;&lt;$MTCategoryLabel$&gt;<br />
&lt;/MTElse&gt;<br />
&lt;/MTIfNonZero&gt;<br />
&lt;MTSubCatsRecurse&gt;<br />
&lt;/li&gt;<br />
&lt;MTSubCatIsLast&gt;&lt;/ul&gt;&lt;/MTSubCatIsLast&gt;<br />
&lt;/MTTopLevelCategories&gt;<br />
</div>
<div style="margin-left:15px;font-size:12px;">
この部分はちょっとややこしいので、解説は省略しますが、この記述で、トップレベルカテゴリーから全てのサブカテゴリーを表示させます。
</div>



<div class="under_line3">
<h4>■左側メニュー部分の記述（最近のエントリー一覧）</h4>
</div>


手順７：カテゴリーの次は、最近のエントリー一覧を表示してみましょう。

<div class="temp">
&lt;h3&gt;最近のエントリー&lt;/h3&gt;<br />
&lt;MTEntries&gt;<br />
&lt;a href="&lt;$MTEntryPermalink$&gt;" title="&lt;$MTEntryTitle$&gt;"&gt;<br />
&lt;$MTEntryTitle$&gt;&lt;/a&gt;<br />
&lt;/MTEntries&gt;<br />
</div>
<div style="margin-left:15px;font-size:12px;">
この部分もちょっとややこしいので、少しだけ解説します。
&lt;$MTEntryTitle$&gt;は、エントリーのタイトルを表示するという意味です。
</div>



<div class="under_line3">
<h4>■左側メニュー部分の記述（最近のコメント一覧）</h4>
</div>

手順８：次に、最近のコメントを表示してみましょう。

<div class="temp">
&lt;h3&gt;最近のコメント&lt;/h3&gt;<br />
&lt;MTEntries recently_commented_on="5"&gt;<br />
&lt;a href="&lt;$MTEntryLink$&gt;"&gt;&lt;MTEntryTitle&gt;&lt;/a&gt;<br />
&lt;MTComments lastn="5"&gt;<br />
　Posted by &lt;a href="&lt;$MTEntryLink$&gt;#c&lt;$MTCommentID pad="1"$&gt;" title="c&lt;$MTCommentID$&gt;"&gt;<br />
&lt;MTCommentAuthor&gt;&lt;/a&gt; &lt;$MTCommentDate format="%m/%d"$&gt;&lt;br /&gt;<br />
&lt;/MTComments&gt;<br />
&lt;/MTEntries&gt;<br />
</div>
<div style="margin-left:15px;font-size:12px;">
&lt;MTComments lastn="5"&gt;のlastn="5"で、最新の５つのコメントを表示します。数字は、自由に変更してください。
&lt;MTCommentAuthor&gt;は、コメントを投稿した人の名前。
&lt;$MTCommentDate format="%m/%d"$&gt;&lt;br /&gt;は、コメントを投稿した時間
</div>



<div class="under_line3">
<h4>■左側メニュー部分の記述（最近のトラックバック一覧）</h4>
</div>

手順９：次に、最近のトラックバックを表示してみましょう。

<div class="temp">
&lt;h3&gt;最近のトラックバック&lt;/h3&gt;<br />
&lt;MTPings lastn="10"&gt;<br />
&lt;a href="&lt;$MTPingURL$&gt;" target="_blank" title="t&lt;$MTPingID$&gt;"&gt;<br />
&lt;$MTPingTitle$&gt;&lt;/a&gt;<br />
　from &lt;$MTPingBlogName$&gt; &lt;$MTPingDate format="%m/%d %X"$&gt;&lt;br /&gt;<br />
&lt;/MTPings&gt;<br />
</div>
<div style="margin-left:15px;font-size:12px;">
コメントと同様に、&lt;MTPings lastn="10"&gt;のlastn="10"で、最新の10のトラックバックを表示します。数字は、自由に変更してください。
&lt;$MTPingURL$&gt;は、トラックバック元のURL。
&lt;$MTPingTitle$&gt;は、トラックバックをしたブログの記事タイトル
&lt;$MTPingBlogName$&gt;は、トラックバックをしたブログのタイトル
&lt;$MTPingDate format="%m/%d %X"$&gt;は、トラックバックを受けた時間
</div>



<div class="under_line3">
<h4>■左側メニュー部分の記述終了</h4>
</div>

手順１０：ここで、左側メニュー部分の記述が終了したので、左側メニュー部分の終了を宣言します。

<div class="temp">
&lt;/div&gt;
</div>



<div class="under_line3">
<h4>■本体部分の記述</h4>
</div>

次に、本体部分を記述します。

本体部分には、新しく投稿された記事を表示してみます。
表示する内容は、エントリータイトル、エントリー概要です。


手順１１：新着記事を表示する。

<div class="temp">
&lt;h3&gt;最新の記事&lt;/h3&gt;<br />
&lt;MTEntries&gt;<br />
&lt;h4&gt;<br />
&lt;a href="&lt;$MTEntryPermalink$&gt;" title="&lt;$MTEntryTitle$&gt;"&gt;<br />
&lt;$MTEntryTitle$&gt;&lt;/a&gt;<br />
&lt;/h4&gt;<br />
&lt;$MTEntryExcerpt$&gt;<br />
&lt;/MTEntries&gt;<br />
</div>
<div style="margin-left:15px;font-size:12px;">
この部分もちょっとややこしいので、少しだけ解説します。
&lt;$MTEntryTitle$&gt;は、エントリーのタイトル、&lt;$MTEntryExcerpt$&gt;は、エントリーの概要を表します。
エントリーの概要に入力がない場合は、本文の最初の20文字が表示されます。
ちなみに、本文を表示する場合には、&lt;$MTEntryBody$&gt;、追記は、&lt;$MTEntryMore $&gt;を使います。
</div>



<div class="under_line3">
<h4>■フッター部分の記述</h4>
</div>

ヘッダー、左側メニュー、本体と表示し終わりましたので、最後にフッターを表示します。

通常、フッターには、Copy Rightなどの著作権を表示しますね。

手順１２：最後尾に、フッターを表示しましょう。

<div class="temp">
&lt;div&nbsp;id="footer"&gt;<br />
Copy Right (C) 2006 All rights reserved.<br />
&lt;/div&gt;
</div>



<div class="under_line3">
<h4>■ページ全体に対する記述の終了宣言</h4>
</div>


手順１３：最後の最後に、ページ全体の終了を宣言します。

<div class="temp">
&lt;/div&gt;
</div>


手順１４：以上で、メインページの記述は終了しました。「保存と再構築」ボタンをクリックして、サイトを再構築してください。



<div class="under_line3">
<h4>★ワンポイントアドバイス（左に本体、右にメニューを表示するには？）</h4>
</div>

左側に本体、右側にメニューを表示する場合はどうしたらいいのでしょうか？

答えは、左側メニューの記述と本体の記述の順番を逆にします。


【左側：メニュー、右側：本体の場合の記述順】
　ヘッダー(#banner)　⇒　左側メニュー(#leftbar)　⇒　本体(#content)　⇒　フッター(#footer)


【左側：本体、右側：メニューの場合の記述順】
　ヘッダー(#banner)　⇒　本体(#content)　⇒　右側メニュー(#rightbar)　⇒　フッター(#footer)


]]>
    </content>
</entry>
<entry>
    <title>2カラム型テンプレート：スタイルシートの作り方</title>
    <link rel="alternate" type="text/html" href="http://movabletype.gonz-style.com/blog/mt-272.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://gonz-style.com/mt/mt-atom.cgi/weblog/blog_id=3/entry_id=272" title="2カラム型テンプレート：スタイルシートの作り方" />
    <id>tag:movabletype.gonz-style.com,2006://3.272</id>
    
    <published>2006-05-12T00:58:21Z</published>
    <updated>2006-05-17T15:38:12Z</updated>
    
    <summary>Movable Typeオリジナルテンプレート2カラム型スタイルシートの作り方</summary>
    <author>
        <name>kokoro-net.com</name>
        <uri>http://kokoro-net.com/</uri>
    </author>
            <category term="テンプレートの作り方" />
    
    <content type="html" xml:lang="ja" xml:base="http://movabletype.gonz-style.com/">
        Movable Type3.2用の2カラム型テンプレートの作り方を説明します。
2カラム型や3カラム型のテンプレートを作れるようになれば、カスタマイズにも幅が出てきますね。
まず最初は、1カラム型と同様に、スタイルシートの作り方から説明しますね。

        <![CDATA[Movable Type3.2用の2カラム型テンプレートの作り方を説明します。
2カラム型や3カラム型のテンプレートを作れるようになれば、カスタマイズにも幅が出てきますね。
まず最初は、1カラム型と同様に、スタイルシートの作り方から説明しますね。

今回は、以下のような左側にメニューを表示するタイプの2カラム型テンプレートを作成してみます。


<div style="width:300px;padding:5px;border:1px dotted red;">ページ全体枠(#container)<div style="margin:0;padding:0;width:400px;"><div align="center" style="margin:0;padding:0;background-color:#008000;color:#FFFFFF;"><br>ヘッダー部分(#banner)<br><br></div><div align="center" style="margin:0;padding:0;width:150px;background-color:#00FFFF;float:left;"><br>左側メニュー<br>部分(#leftbar)<br><br><br><br><br></div><div align="center" style="margin:0;padding:0;width:250px;background-color:#00FF00;float:right;color:#FFFFFF;"><br>本体部分(#content)<br><br><br><br><br><br></div><br clear=all><div align="center" style="margin:0;padding:0;background-color:#0000FF;color:#FFFFFF;"><br>フッター部分(#footer)<br><br></div></div></div>



<div class="under_line3">
<h4>■デフォルトスタイルシートの削除</h4>
</div>

まず、最初は、標準で用意されているスタイルシートテンプレートを全て削除しましょう。


手順１：Movable Typeのメイン・メニューから、テンプレート⇒スタイルシートをクリックしてください。

手順２：表示されたテンプレートの内容を全て、削除します。（必要に応じてバックアップを取ってね）



<div class="under_line3">
<h4>■スタイルシートの冒頭部分</h4>
</div>

手順３：ブラウザによってスタイルシートの扱いが若干違うので、基準をあわせる意味で、以下のように記述します。これは、おまじないのようなものです。

<div class="temp">
* { margin:0; padding:0; }
</div>



<div class="under_line3">
<h4>■ページ全体の定義(#container)</h4>
</div>

手順４：次に、ページ全体の枠（コンテンツを表示するエリア）を横幅720pxで定義します。

<div class="temp">
#container {
 margin:0;
 padding:0;
 width:720px;
}
</div>
<div style="margin-left:15px;font-size:12px;">
margin:0;で外側の余白、padding:0;で内側の余白を無くして、width:720px;で、コンテンツを表示する横幅を指定しています。ちなみに、pxとは、ピクセルと読み、大きさの単位を表しています。
</div>



<div class="under_line3">
<h4>■ヘッダー部分の定義(#banner)</h4>
</div>

手順５：次に、ブログのタイトルやブログの説明を表示するヘッダー部分を定義します。

<div class="temp">
#banner {
 margin:0;
 padding:0;
 width:720px;
 height:80px;
}
</div>
<div style="margin-left:15px;font-size:12px;">
height:80px;は、高さを指定する場合に使います。つまり、タイトル部分は、横幅：720px、高さ：80pxということになりますね。
</div>



<div class="under_line3">
<h4>■左側メニュー部分の定義(#leftbar)</h4>
</div>

手順６：次に、左側のメニューを表示する部分を記述しましょう。

<div class="temp">
#leftbar {
 margin:0;
 padding:0;
 width:160px;
 float:left;
}
</div>
<div style="margin-left:15px;font-size:12px;">
width:160px;で、表示する幅を指定しています。
float:left;は、左回りこみといって、メニューの右側に本体部分を表示するようにしています。
（float:left;を指定しない場合は、メニューの右側は余白になり、下側に、本体部分が表示されます。）
</div>



<div class="under_line3">
<h4>■本体部分の定義(#content)</h4>
</div>

手順７：次に、本文（メインコンテンツ）を表示する本体部分を記述しましょう。

<div class="temp">
#content {
 margin:0;
 padding:0;
 width:560px;
 float:right;
}
</div>
<div style="margin-left:15px;font-size:12px;">
width:560px;で本体部分の横幅を指定しています。
横幅は、720px（ページ全体の横幅）-160px（左側メニューの横幅）=560px（本体部分の横幅）になります。
float:right;で右回り込み、つまり、本体部分の左側にメニューを表示するように指定します。
</div>



<div class="under_line3">
<h4>■フッター部分の定義(#footer)</h4>
</div>

手順８：最後の記述は、フッターの表示エリアです。

<div class="temp">
#footer {
 margin:0;
 padding:0;
 width:720px;
 clear:both;
}
</div>
<div style="margin-left:15px;font-size:12px;">
フッターは、ページ全体と同じ横幅(720px)になります。
clear:both;で、左回り込みと右回り込みを解除します。
</div>


これで、2カラム型テンプレートのスタイルシートは、終了です。



<div class="under_line3">
<h4>★ワンポイントアドバイス（左に本体、右にメニューを表示するには？）</h4>
</div>

左側に本体、右側にメニューを表示する場合はどうしたらいいのでしょうか？

答えは、#leftbarで定義した「float:left;」と、#contantで定義した「float:right;」を反対にすればいいのです。

以下のように感じですね。

右側メニュー部分の定義
<div class="temp">
#rightbar {
 margin:0;
 padding:0;
 width:160px;
 float:right;
}
</div>


本体部分の定義
<div class="temp">
#content {
 margin:0;
 padding:0;
 width:560px;
 float:left;
}
</div>

]]>
    </content>
</entry>
<entry>
    <title>ページの背景に画像を表示する方法</title>
    <link rel="alternate" type="text/html" href="http://movabletype.gonz-style.com/blog/mt-271.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://gonz-style.com/mt/mt-atom.cgi/weblog/blog_id=3/entry_id=271" title="ページの背景に画像を表示する方法" />
    <id>tag:movabletype.gonz-style.com,2006://3.271</id>
    
    <published>2006-05-11T00:57:07Z</published>
    <updated>2006-05-11T01:00:03Z</updated>
    
    <summary>ページ全体の背景に画像を表示すると、かなりイメージが変わりますね。 サイトに訪れ...</summary>
    <author>
        <name>kokoro-net.com</name>
        <uri>http://kokoro-net.com/</uri>
    </author>
            <category term="スタイルシートの作り方" />
    
    <content type="html" xml:lang="ja" xml:base="http://movabletype.gonz-style.com/">
        ページ全体の背景に画像を表示すると、かなりイメージが変わりますね。
サイトに訪れる人は、数秒であなたのサイトを評価して、次のアクションを起こします。
次のアクションが別のサイトに移動するというにならないためには、第一印象が大事です。

        <![CDATA[ページ全体の背景に画像を表示すると、かなりイメージが変わりますね。
サイトに訪れる人は、数秒であなたのサイトを評価して、次のアクションを起こします。
次のアクションが別のサイトに移動するというにならないためには、第一印象が大事です。

ページ全体の背景に画像を表示するには、bodyタグに、background-image属性を定義します。



<div class="under_line3">
<h4>■スタイルシートの記述方法</h4>
</div>

<div class="temp">
body {
 background-image: url(&lt;$MTBlogURL$&gt;bodyback.gif);
}
</div>

url()で、画像ファイルを指定します。
&lt;$MTBlogURL$&gt;は、Movable Typeのインデックスページがおいてあるフォルダのパスを表します。

また、小さい画像を横または、縦方向だけに繰り返して表示するには、background-repeat属性を使います。

background-repeat:repeat-x;で、横方向への繰り返し
background-repeat:repeat-y;で、縦方向への繰り返し
background-repeat:no-repeat;は、繰り返さない
なにも指定しなければ、双方向に繰り返して表示されます。

]]>
    </content>
</entry>
<entry>
    <title>コンテンツを中央に表示する方法</title>
    <link rel="alternate" type="text/html" href="http://movabletype.gonz-style.com/blog/mt-270.html" />
    <link rel="service.edit" type="application/atom+xml" href="http://gonz-style.com/mt/mt-atom.cgi/weblog/blog_id=3/entry_id=270" title="コンテンツを中央に表示する方法" />
    <id>tag:movabletype.gonz-style.com,2006://3.270</id>
    
    <published>2006-05-10T00:55:00Z</published>
    <updated>2006-05-10T01:00:03Z</updated>
    
    <summary>Movable Typeオリジナルテンプレートのデザイン方法</summary>
    <author>
        <name>kokoro-net.com</name>
        <uri>http://kokoro-net.com/</uri>
    </author>
            <category term="スタイルシートの作り方" />
    
    <content type="html" xml:lang="ja" xml:base="http://movabletype.gonz-style.com/">
        あなたのブログは、中央に表示されていますか？
それとも、左側に寄せて表示していますか？
もしかして、右側に寄せて表示してる？

サイトのコンテンツを中央に表示させる方法を説明します。

        <![CDATA[あなたのブログは、中央に表示されていますか？
それとも、左側に寄せて表示していますか？
もしかして、右側に寄せて表示してる？

サイトのコンテンツを中央に表示させる方法を説明します。



<div class="under_line3">
<h4>■左右の余白で調整する</h4>
</div>

コンテンツを中央に表示するということは、つまり、左右に同じ幅の余白を作るということですね。

余白の指定には、「margin」を使います。
そして、左余白は、margin-left、右余白は、margin-rightです。

中央に表示するには、margin-leftとmargin-rightに「auto」という値を指定します。

スタイルシートには、以下のように記述します。

<div class="temp">
#container {
 margin-left:auto;
 margin-right:auto;
}
</div>



<div class="under_line3">
<h4>■テンプレートでの記述方法</h4>
</div>

テンプレートには、以下のように記述します。

<div class="temp">
&lt;body&gt;
&lt;div id="container"&gt;

（ここに中身を表示する）

&lt;/div&gt;
&lt;/body&gt;
</div>

簡単ですね！
]]>
    </content>
</entry>

</feed> 

