このサイトは「Movable Type WEBデザインの新しいルール」のサポートサイトです。

Movable Type WEBデザインの新しいルールMovable Type WEBデザインの新しいルール
荒木 勇次郎 松永 英明

翔泳社 2007-10-17

Amazonで詳しく見る by G-Tools

2008年2月21日

テンプレートセットの配布を開始しました

Movable Type 4.1 用のテンプレートセット（書籍対応版）の配布を開始します。注：Movable Type 4.0/4.01 ではご利用になれません。ご利用になる際は 4.1、または 4.1 へのバージョンアップを行ってください。

Movable Type 4.1 で書籍のカスタマイズを行う場合、MT4.1 で追加されたテンプレートセット機能を用いれば、「3-4：テンプレートを入れ替えてデザインを変更する」の手順1～14が不要（テンプレートセットを入れ替えた後の再構築のみ必要）になります。

テンプレートセットをご利用になる場合、以下の手順にしたがって作業を進めてください。

１．テンプレートセットのダウンロード

テンプレートセットアーカイブを、下記のページからダウンロードしてください。

KoikikukanTemplateSet_20080221.zip

以下、テンプレートセットの利用方法です。

２．テンプレートセットのインストール

ダウンロードしたテンプレートセットアーカイブを解凍し、中にある plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の plugins フォルダに丸ごとアップロードしてください。

また、mt-static/plugins 配下にある KoikikukanTemplateSet フォルダを Movable Type の mt-static/plugins フォルダに丸ごとアップロードしてください。

「システムメニュー」→「プラグイン」でプラグインの一覧が表示されるので、「KoikikukanTemplateSet」が表示されていればインストールOKです。

３．テンプレートセットの入れ替え

ここではインストールされた状態で入れ替える方法を説明します。

ブログ管理画面より「デザイン」→「テンプレート」をクリック。

右下にある「ブログのテンプレートを初期化」をクリック。

「新しいテンプレートセットを適用」を選択し、セレクトボックスから「小粋空間テンプレートセット（書籍用）」を選択。「既存のテンプレートのバックアップを作成する」をチェックすると、入れ替え前のテンプレートのバックアップがとれます。
選択後、右下の「次へ」をクリック。

「確認」をクリック。これでテンプレートセットの入れ替えが開始します。

「テンプレートの初期化を完了しました。」が表示されれば完了です。

サイトの再構築アイコンをクリック。

「すべてのファイル」を選択して「再構築」をクリック。

「すべてのファイルを再構築しました。 」が表示されたら再構築完了です。

前の画面の「サイトを見る」をクリックするか、ブログ管理画面の「サイト表示」のアイコンをクリック。

当サイトのテンプレートセットのデザインで表示されれば完了です。デフォルトデザインのままであればブラウザをリロードしてください。

Permalink | Category : サポートブログ

2008年2月20日

Movable Type 4.1 で「3-11・カラムレイアウトを変更する」を行う場合の注意

Movable Type 4.1 で「3-11・カラムレイアウトを変更する」を行う場合、手順1の内容を下記のように変更してください。
なお、手順1の上段のリストは「template_4_0_utf8_1_8」をもとにしています。お使いのテンプレートのテンプレートモジュール「ヘッダー」のbody要素の部分が上段の内容になっていない場合は、サポートサイトで配布している「小粋空間テンプレート」より、[Modules] header.mtml の内容をご利用ください。

手順1の上段のリスト（赤色が変更前の内容）

<MTUnless name="system_template"><MTSetVar name="page_layout" value="layout-three-column"></MTUnless>
<body class="<$MTGetVar name="page_layout"$>"<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>

手順1の下段のリスト（青色が変更後の内容）

<MTUnless name="system_template"><MTSetVar name="page_layout" value="layout-two-column-right"></MTUnless>
<body class="<$MTGetVar name="page_layout"$>"<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>

Movable Type 4.01 をお使いになっている場合、この変更は必要ありませんが、Movable Type 4.1 にアップグレードした後は、「テンプレート」→「テンプレートモジュール」→「ヘッダー」の下記の部分を変更してください。

変更前（赤色が削除部分）

<body class="<$MTGetVar name="page_layout" default="layout-three-column"$>"<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>

変更後（青色が追加部分）

<MTUnless name="system_template"><MTSetVar name="page_layout" value="layout-three-column"></MTUnless>
<body class="<$MTGetVar name="page_layout"$>"<MTIf name="body_onload"> onload="<$MTGetVar name="body_onload"$>"</MTIf>>

これはMT4.1でMTGetVarタグで使っている変数page_layoutの動作が変わったため、4.0用のテンプレートではカラムレイアウトが崩れてしまう不具合に対応するためのものです。

具体的な変更内容は、head要素の直前にMTUnlessタグを追加して、body要素にあるdefault属性を削除しています。MTUnlessタグに記述した変数page_layoutが、default属性に設定したときと同じように動作します。

Permalink | Category : サポートブログ

2008年1月 2日

テンプレートの再構築で「モジュールというテンプレートが見つかりませんでした」というエラーになる場合の対処

3-4「テンプレートを入れ替えてデザインを変更する」の手順13あたりで、下記のようなエラーが発生する場合の対処方法です。

再構築時のエラー

原因

原因は、テンプレートモジュールに「サイドバー（またはサイドバー2）」というテンプレートモジュールを作っていない状態で「保存と再構築」を実行、または再構築画面から再構築を実行したためです。

注：このエラーが発生することを予想して、手順13の説明でその解説を行っています。

具体的に解説すると、メインページテンプレートや他のアーカイブページのテンプレートには、

<$MTInclude module="サイドバー"$>

または

<$MTInclude module="サイドバー2"$>

という、テンプレートモジュールを呼び出すためのタグが書かれています。再構築実行時、Movable Type のプログラムはこのタグを読み込み、「サイドバー（サイドバー2）というテンプレートモジュールを呼び出す」という動作を行うのですが、テンプレートモジュールの一覧には「サイドバー（またはサイドバー2）」というテンプレートモジュールがありません（下）。

テンプレートモジュールの一覧

そのため、Movable Type では再構築を続行することができず、エラーを出力するのです。

対処方法

テンプレートモジュール「サイドバー」「サイドバー2」を作成すれば、再構築のエラーは発生しなくなります。
以下、「サイドバー」「サイドバー2」の作成方法です。

注意：この方法では、P107・手順14に記載している手順とは異なる、より分かりやすい手順を示しており、「サイドバー(2カラム)」「サイドバー(3カラム)」はデフォルトのまま、何も手を加える必要はありません。

テンプレートモジュール「サイドバー」の作成

メインページのテンプレート編集画面右の「インクルードモジュール」の一覧にある「サイドバー(新規作成)」の 新規作成 のリンク（赤枠部分）をクリックします。

「インクルードモジュール」の一覧

クリックすると、「サイドバー」の新規作成画面に遷移します（下）。

「サイドバー」の編集画面

表示された作成画面の「テンプレート名」のフィールド（「テンプレートを作成」という表示の下のフィールド）には「サイドバー」というテンプレート名が自動的に入ってますので、あとはテキストエリアにテンプレートの内容（sidebar.mtml）をペーストして（下）、「保存」をクリックしてください。

「サイドバー」の編集画面

これでテンプレートモジュール「サイドバー」が作成されました。

テンプレートモジュール「サイドバー2」の作成

上記と同じ要領で、メインページのテンプレート編集画面右の「インクルードモジュール」の一覧にある「サイドバー2(新規作成)」の 新規作成 のリンク（赤枠部分）をクリックします。

「インクルードモジュール」の一覧

クリックすると、「サイドバー2」の新規作成画面に遷移します（下）。

「サイドバー2」の編集画面

表示された作成画面の「テンプレート名」のフィールド（「テンプレートを作成」という表示の下のフィールド）には「サイドバー2」というテンプレート名が自動的に入ってますので、あとはテキストエリアにテンプレートの内容（sidebar2.mtml）をペーストして（下）、「保存」をクリックしてください。

「サイドバー」の編集画面

これでテンプレートモジュール「サイドバー2」が作成されました。

以上です。これでメインページを再構築をしてもエラーが発生しなくなります。

なお、テンプレートモジュールへの一覧には以下のように「サイドバー」「サイドバー2」が追加されます。

テンプレートモジュールの一覧

Permalink | Category : サポートブログ

2007年12月 5日

テンプレート不具合のお知らせ

現在配布中の小粋空間テンプレートに一部不具合がありましたのでお知らせ致します。

１．問題点

投稿者情報を保存しても、クッキーに保存されず、次回投稿時に投稿者情報が反映されない。

２．原因

コメント投稿フォームの form 要素の name 属性もれ。

３．対処方法

2007年12月5日以前にテンプレートをダウンロードされた方は、下記のいずれかの方法で修正を行ってください。

３．１ テンプレートを直接修正する

ブログ管理画面より、「デザイン」→「テンプレート」→「テンプレートモジュール」→「コメント入力フォーム」を開き、下記の青色部分（name 属性）を追加してください。

修正前

　　　　：
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
　　　　：

修正後

　　　　：
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
　　　　：

修正後、「ブログ記事」を再構築してください。

３．２ テンプレートを入れ替える

ブログ管理画面より、「デザイン」→「テンプレート」→「テンプレートモジュール」→「コメント入力フォーム」を開き、本サポートブログの「小粋空間テンプレート」の [Modules]comment_form.mtml の内容と入れ替えてください。

または、「Movable Type テンプレート」より template_4_0_utf8_1_7.zip（または template_4_0_utf8_1_7.lzh）またはそれ以降のバージョンのアーカイブをダウンロードし、解凍した中にある、comment_form.mtml のみ入れ替えてください。

テンプレートをカスタマイズしている場合は、３．１の方法で修正されることをお勧めします。

以上です。
ご利用の皆様にはご迷惑おかけして申し訳ございませんが、よろしくお願い致します。

Permalink | Category : サポートブログ

2007年11月27日

「3-6：テンプレート・タグのカスタマイズ」の考慮もれについて

P114～P115 の「3-6：テンプレート・タグのカスタマイズ」を行うと、カテゴリーアーカイブでブログ記事が1件しか表示されなくなるという不具合がみつかりました。

理由は、ブログ記事表示件数（ブログ管理画面の「設定」→「ブログの設定」→「ブログ記事」→「ブログ記事表示数」）の設定が、カテゴリーアーカイブにも適用される設定になっているためです。

カテゴリーアーカイブで全てのブログ記事を表示するには、「デザイン」→「テンプレート」→「アーカイブテンプレート」→「ブログ記事リスト」を開き、中ほどにある、

<MTEntries limit="auto">

にある limit 属性を削除し、

<MTEntries>

とするか、lastn 属性を付与し、

<MTEntries lastn="5">

としてください。テンプレート変更後、再構築を行えば完了です。

解説ですが、limit 属性の "auto" という値は、ブログ設定画面の「ブログ記事表示数」を適用することを意味します。
lastn 属性は「最新のn件を表示する」という意味です（上記の例では最新5件を表示）。
属性がない場合は、該当するブログ記事をすべて表示します。

Permalink | Category : サポートブログ

2007年11月19日

ヘッダの画像にリンクを設定する

3-10「背景画像を利用する」の手順2で、ヘッダにロゴつきの背景画像を与えています。この画像にトップページへのリンクを設定する方法を紹介します。

書籍に掲載している方法では画像にリンクを設定できないため、img 要素をテンプレートモジュール「ヘッダー」に設定します。またそれにあわせて、スタイルシートも設定します。
手順2を行わず、その代わりに以下の2つのタイプのうち、いずれかの設定を行ってください。

１．シンプルタイプ

ヘッダー（抜粋）
スタイルシート（メイン）

この方法は簡単ですが、h1 要素が存在しないので、SEO的には不利かもしれません。

２．SEOを考慮したタイプ

こちらは h1 属性も含んでいます。ただし、画像サイズがヘッダ表示領域と一致している必要があります。
サンプルサイトのヘッダー表示領域（800px × 120px）に合わせた画像ファイル（logo_800x120.png）を用意しましたので、ダウンロードしてお使いください（ファイル名は ダウンロード後、logo.png に修正してください）。

logo_800x120.png
ヘッダー（抜粋）
スタイルシート（メイン）

３．注意事項

  • img 要素の alt 属性（画像が表示されない場合の代替テキスト）は必須です。
  • img 要素の title 属性を記述しておけばヘッダにマウスをポイントした時にツールチップが表示されます。

それではよろしくお願い致します。

Permalink | Category : サポートブログ

2007年11月12日

P130 の「ウェブページ」のデータ不足について

P130 の手順11で説明している中の「ウェブページ（div.page）」のデータがテンプレートからもれておりました。
ご利用の皆様にはご迷惑おかけして大変申し訳ございません。

修正につきましては、本サポートブログで配布している「小粋空間テンプレート」より

  • [Indexes]styles.mtml
  • [Modules]page_detail.mtml

の2ファイルを差し替えるか、下記のいずれかのリンクよりテンプレートをダウンロードし、

その中にある

  • styles.mtml
  • page_detail.mtml（ウェブページの詳細）

の2ファイルを差し替え願えます。

なお、テンプレートの変更点は下記の2箇所です。すでにカスタマイズが進んでいる場合は、テンプレート編集画面上で該当部分のみを書き加えて頂いた方が、手戻りが少なくなります。

●スタイルシート（メイン）

以下の内容を任意の位置（ファイルの末尾等）に追加してください。

/* ウェブページ */
div.page {
    margin-top: -5px;
}

●ウェブページの詳細

1行目について下の変更を行ってください。

変更前

<div class="entry" id="entry-<$MTPageID$>">

変更後（class 属性値に "page" を追加）

<div class="entry page" id="entry-<$MTPageID$>">

ご不明な点がありましたら「フィードバック」よりご連絡ください。

Permalink | Category : サポートブログ

2007年11月 8日

「小粋空間テンプレート」をサンプルデータに追加しました

Chapter3-4「テンプレートを入れ替えてデザインを変更する」の作業で、ダウンロードしたテンプレートが文字化けする等の原因で作業がうまくできない場合、サンプルデータに「小粋空間テンプレート」を追加しましたので、こちらをご利用ください。

それではよろしくお願い致します。

Permalink | Category : サポートブログ

2007年11月 5日

サンプルデータ不足のお詫び

「5-9：メールフォームを設置する」の手順4・手順7に記載されている「メールフォーム用サンプルデータ」の掲載が不足しておりました。この場をお借りしてお詫び申しあげます。
11月5日、不足分のサンプルデータは追加致しましたのでご利用ください。

Permalink | Category : サポートブログ

2007年11月 1日

ブログの購読に livedoor reader のご利用をお勧めします

ブログ「小粋空間」ではMovable Typeに関する情報をお届けしています。

上記ブログを効率的に購読するには、6-5「管理系フィードを利用する」で解説している「livedoor reader（RSSリーダー）」のご利用をお勧めします。

以下、「小粋空間」のRSSリーダーへの登録方法です。

まず、livedoor reader の登録方法は、本書の6-5「管理系フィードを利用する」の手順1から手順5までを、そのまま進めてください。

次に、手順6、手順7はスキップし、下記のURL（小粋空間のRSSフィードURL）をマウスコピーして、手順8のテキストフィールドに入力し、あとは手順10まで解説にしたがって進めてください。

http://www.koikikukan.com/atom.xml

手順11で、ブログの情報が表示されればOKです。

また、本サポートサイトのRSS（下記）も併せて登録しておくと、より便利でしょう。

http://www.koikikukan.com/syoeisya/book/mt/rss.xml

Permalink | Category : サポートブログ