キアズマブログ

[MT4分科会課題説明] はじめに 

【MT4分科会第2回勉強会】テンプレートタグカスタマイズ（初級者対象）の課題を説明します。

20080608-08.gif

課題：「えむとす小学校(しょうがっこう)だより」をMTOSで構築すること。

http://kiasma.jp/20080621/

つまり、テンプレートの制作が課題です。

HTML、CSS、Javascript、画像ファイルは配布します。

http://kiasma.jp/20080621/20080621MTOS.zip

記事をインポートできますよう、テキストファイルも配布します。

http://kiasma.jp/20080621/20080621MTOS_txt.zip

ウェブページはおそれいりますが各自作成をお願いいたします。 こちらからタイトル・本文をコピペできます。

http://kiasma.jp/20080621/privacy.html

変数と分岐や、さまざまなMTタグを用いて、下記の実装にチャレンジしてください。

なお、「えむとす小学校(しょうがっこう)だより」で用いています写真は全て「2000ピクセル以上のフリー写真素材集」様からお借りしております。「2000ピクセル以上のフリー写真素材集について／ご利用上のご注意」にも目を通していただけますよう、よろしくお願いいたします。

ページの先頭へ

[MT4分科会課題説明] 準備編1：インポート 

1.インポート用テキストファイルの準備

インポート用テキストファイル（http://kiasma.jp/20080621/20080621MTOS_txt.zip）をダウンロードしてください。

2.ブログの作成

ブログを作成してください。

サイトURLを画像のとおりにしていただきますと、インポート用テキストファイルを、そのまま活用できます。

20080608-01.gif

3.テキストのインポート

ブログが作成されましたら、システムメニューのツールをクリックしてください。

20080608-02.gif

20080608-03.gif

  1. 「ブログを選択」をクリックし、モーダルダイアログから、「えむとす小学校（しょうがっこう）」を選択してください
  2. 「インポートしたブログ記事の所有者」は「ブログ記事の著者を変更しない」を選び、「新しいユーザーの初期パスワード」を入れてください
  3. 「インポートファイルをアップロード（オプション）」でインポート用テキストファイルを選択し、「ブログ記事のインポート」ボタンを押してください。
  4. インポートが開始されます。

20080608-04.gif

4.フォルダcss、img、jaを"\htdocs\今回のフォルダ"直下にアップ

配布のCSS、画像、Javascriptファイル（http://kiasma.jp/20080621/20080621MTOS.zip）を\htdocs\今回のフォルダ（20080621）直下にアップする必要があります。

20080608-05.gif

フォルダcss、img、jaは、"\htdocs\今回のフォルダ"直下にコピペでアップでオーケーですが、メンドウでなければ、MTから登録（cssとjsはインデックステンプレートとして／画像はアイテムとして）するのでもだいじょうぶです。

5.再構築してください

デフォルトのテンプレートでの「えむとす小学校（しょうがっこう）」が生成されます。

20080608-06.gif

ページの先頭へ

[MT4分科会課題説明] 準備編2：ユーザの仕様 

ユーザを6学年分用意してください。（ユーザはインポートで生成されます。「[MT4分科会課題説明] 準備編1：インポート」をご参照ください。）

20080608-09.gif

カテゴリーから各学年を用意しても良いのですが、小学生じしんが投稿することを想定しています。 小学生がMTの投稿をバリバリできる......とも限らないので、投稿者がカテゴリーを付け忘れても、学年のページにはきちんとソートさせられる仕組みを、今回は目指してください。

ページの先頭へ

[MT4分科会課題説明] 準備編3：パーマリンクの仕様 

ブログ記事のパーマリンクは、

  • %a/%y%m%d.html

すなわち 投稿者の表示名/年月日.html としてください。

20080608-10.gif

ページの先頭へ

[MT4分科会課題説明] 準備編4：アーカイブマッピングの仕様 

ブログ記事リストのアーカイブマッピングは、

  • ユーザ別：author-display-name/index.html（%-a/%f）
  • カテゴリー別：category/sub-category/index.html（%-c/%i）

にしてください。

20080608-07.gif

ユーザ別のアーカイブマッピングを行う理由も、「[MT4分科会課題説明] 準備編2：ユーザの仕様」で書いたことと同じです。

カテゴリーから各学年を用意しても良いのですが、小学生じしんが投稿することを想定しています。 小学生がMTの投稿をバリバリできる......とも限らないので、投稿者がカテゴリーを付け忘れても、学年のページにはきちんとソートさせられる仕組みを、今回は目指してください。

ページの先頭へ

[MT4分科会課題説明] 準備編5：インデックステンプレートの仕様 

20080608-11.gif

1.HTMLファイル：

"MTタグを使いたい"1枚もののページは、インデックステンプレートにします。ちなみに、"MTタグを使わなくてすむ"1枚もののページはウェブページにします。

  • index.html：トップページ
  • contact.html：おといあわせ（インデックステンプレにしたのはいずれフォームとかつけられるとヨイと考えたからです。ただし今回はテキストのみ。）
  • sitemap.html：サイトマップ

2.CSS、Javascriptファイル：

CSS、Javascriptファイルは、下記のようにインデックステンプレート化していただいても、htdocsに直接コピーするのでもかまいません。

  • css/fonts.css：フォントサイズ均一化用CSS（拝借元：http://developer.yahoo.com/yui/fonts/）
  • css/import.css：読み込み用
  • css/module.css：汎用性の高いCSS（clearfix等）
  • css/print.css：印刷用CSS
  • css/reset.css：ブラウザ設定無効化CSS（拝借元：http://developer.yahoo.com/yui/reset/）
  • css/structure.css：レイアウト等、このサイトのためのユニークな設定用のCSS
  • css/typography.css：フォントサイズ・色を指定するCSS（フォントサイズの仕様はこちらから確認できます）
  • css/version4.css：第4世代ブラウザ用
  • js/rollover.js：ロールオーバー用CSS（<img src="hoge.gif" class="btn" />とすれば自動的にロールオーバー時のhoge.gifをhoge_on.gifに差し替えてくれるJavascript）

ページの先頭へ

[MT4分科会課題説明] トップページの仕様 

20080608-12.gif

1.ヘッダナビ：

インデックステンプレートでつくるHTMLファイルを<li>タグで並べてください。コンテナタグは使えません。直書きになります。

2.写真：

今回は、ひんぱんに変更することを想定していないので、インデックステンプレート（index.html）に直書きでオーケーです。

3.最近(さいきん)のニュース：

ブログ記事を最大20件、降順でリスト表示させてください。書いた人の学年のアイコンがつくようにしてください。

＊ヒント：<li class="schoolyear01">のclass名を変更させることで、cssからアイコンが変更できます。MTタグを用いて、class名を変更させる方法を考えてみてください。

4.グローバルナビゲーションA：

各学年の扉ページへのリンクをリスト表示させてください。

＊ヒント：ユーザ別にブログ記事リストを並べる方法を考えてください。

5.グローバルナビゲーションB：

各行事の扉ページへのリンクをリスト表示させてください。

＊ヒント：カテゴリー別にブログ記事リストを並べる方法を考えてください。

6.グローバルナビゲーションC：

各ウェブページへのリンクをリスト表示させてください。

＊ヒント：ウェブページを並べる方法を考えてください。

ページの先頭へ

[MT4分科会課題説明] ウェブページの仕様 

20080608-13.gif

1.グローバルナビゲーションC：

現在"いる"ページをon表示させてください。<li class="here">になれば、下地がピンクになります。

＊ヒント：<li>にするか、<li class="here">にするかは、変数と分岐を用いることで可能になります。なお、IEの仕様ゆえ、<ul><li>部分の改行にヘンな隙間が入ります。ですので、改行を<!-- -->でコメントアウトしています。ややこしくなりそうでしたら、IE以外のブラウザで課題にチャレンジしていただけたらと存じます。

2.大見出し：

ウェブページのタイトルを表示させてください。

3.本文：

ウェブページの本文を表示させてください。

ページの先頭へ

[MT4分科会課題説明] ブログ記事リスト：カテゴリー別の仕様 

20080608-14.gif

カテゴリーに所属する記事を降順表示させてください。

1.グローバルナビゲーションB：

現在"いる"ページをon表示させてください。<li class="here">になれば、下地がピンクになります。

＊ヒント：<li>にするか、<li class="here">にするかは、変数と分岐を用いることで可能になります。なお、IEの仕様ゆえ、<ul><li>部分の改行にヘンな隙間が入ります。ですので、改行を<!-- -->でコメントアウトしています。ややこしくなりそうでしたら、IE以外のブラウザで課題にチャレンジしていただけたらと存じます。

2.大見出し：

カテゴリー名を表示させてください。

3.見出し：

ブログ記事タイトルと、学年アイコンを表示させてください。

＊ヒント：<span class="schoolyear01">のclass名を変更させることで、cssからアイコンが変更できます。MTタグを用いて、class名を変更させる方法を考えてみてください。

4.本文：

ブログ記事の本文を表示させてください。

5.ボタン：

パーマリンクを貼ってください。

6.本文の下：

日付、所属カテゴリーとそのブログ記事リストページへのリンク、学年と学年アイコンが表示されるようにしてください。

7.文字サイズ：

書いた人の学年によって、文字のサイズを違えてください。

  • 1・2年生が書いたら、大サイズの文字
  • 3・4年生が書いたら、中サイズの文字
  • 5・6年生が書いたら、小サイズの文字

にするということです。

<div class="文字サイズ">
  見出し
  本文
  ボタン
</div>

という構造になっています。CSSで、文字サイズを制御します。

  • 1・2年生は <div class="fontS">
  • 3・4年生は <div class="fontM">
  • 5・6年生は <div class="fontL">

になるよう、MTタグを用いて、class名を変更させる方法を考えてみてください。

フォントサイズ制御専用のCSSを用意しました。詳しくは http://kiasma.jp/20080621/css/typography.css をご覧ください。

ページの先頭へ

[MT4分科会課題説明] ブログ記事リスト：ユーザ別の仕様 

20080608-15.gif

各学年（各ユーザ）に所属する記事を降順表示させてください。

1.グローバルナビゲーションA：

現在"いる"ページをon表示させてください。<li class="here">になれば、下地がピンクになります。

＊ヒント：<li>にするか、<li class="here">にするかは、変数と分岐を用いることで可能になります。なお、IEの仕様ゆえ、<ul><li>部分の改行にヘンな隙間が入ります。ですので、改行を<!-- -->でコメントアウトしています。ややこしくなりそうでしたら、IE以外のブラウザで課題にチャレンジしていただけたらと存じます。

2.閲覧している学年に所属する記事のリスト：

閲覧している学年に所属する記事を降順で最大5件、リスト表示させてください。

<li class="here">
  <a href="＊＊＊"><span class="arrow">5年生</span></a>
  <ul class="child">
    <li><a href="＊＊＊"><span class="arrow">運動会に向けて</span></a></li>
    <li><a href="＊＊＊"><span class="arrow">演奏しました</span></a></li>
  </ul>
</li>

と、<li class="here">のなかに、<ul class="child">～</ul>を入れ子で作成してください。（改行コードをコメントアウトしないとIEではヘンな隙間ができますのでご注意ください。）

3.大見出し：

学年（ユーザ名）を表示させてください。

4.見出し：

ブログ記事タイトルを表示させてください。

5.本文：

ブログ記事の本文を表示させてください。

6.ボタン：

パーマリンクを貼ってください。

7.本文の下：

日付、所属カテゴリーとそのブログ記事リストページへのリンク、学年と学年アイコンが表示されるようにしてください。

8.文字サイズ：

書いた人の学年によって、文字のサイズを違えてください。

  • 1・2年生が書いたら、大サイズの文字
  • 3・4年生が書いたら、中サイズの文字
  • 5・6年生が書いたら、小サイズの文字

にするということです。

<div class="文字サイズ">
  見出し
  本文
  ボタン
</div>

という構造になっています。CSSで、文字サイズを制御します。

  • 1・2年生は <div class="fontS">
  • 3・4年生は <div class="fontM">
  • 5・6年生は <div class="fontL">

になるよう、MTタグを用いて、class名を変更させる方法を考えてみてください。

フォントサイズ制御専用のCSSを用意しました。詳しくは http://kiasma.jp/20080621/css/typography.css をご覧ください。

ページの先頭へ

[MT4分科会課題説明] ブログ記事の仕様 

20080608-16.gif

ブログ記事単体を表示させてください。

1.グローバルナビゲーションA：

現在"いる"ページをon表示させてください。<li class="here">になれば、下地がピンクになります。

＊ヒント：<li>にするか、<li class="here">にするかは、変数と分岐を用いることで可能になります。なお、IEの仕様ゆえ、<ul><li>部分の改行にヘンな隙間が入ります。ですので、改行を<!-- -->でコメントアウトしています。ややこしくなりそうでしたら、IE以外のブラウザで課題にチャレンジしていただけたらと存じます。

2.閲覧している学年に所属する記事のリストとon表示：

閲覧している学年に所属する記事を降順で最大5件、リスト表示させた上、現在"いる"ページをon表示させてください。<ul class="child">のなかの<li class="here">は濃い目の水色になります。

<li class="here">
  <a href="＊＊＊"><span class="arrow">5年生</span></a>
  <ul class="child">
    <li class="here"><a href="＊＊＊"><span class="arrow">運動会に向けて</span></a></li>
    <li><a href="＊＊＊"><span class="arrow">演奏しました</span></a></li>
  </ul>
</li>

と、<li class="here">のなかに、<ul class="child">～</ul>を入れ子で作成してください。さらに<ul class="child"><li class="here">～</ul>としてください。（改行コードをコメントアウトしないとIEではヘンな隙間ができますのでご注意ください。）

3.大見出し：

学年（ユーザ名）を表示させてください。

4.見出し：

ブログ記事タイトルを表示させてください。

5.本文：

ブログ記事の本文を表示させてください。

6.ボタン：

パーマリンクを貼ってください。

7.文字サイズ：

書いた人の学年によって、文字のサイズを違えてください。

  • 1・2年生が書いたら、大サイズの文字
  • 3・4年生が書いたら、中サイズの文字
  • 5・6年生が書いたら、小サイズの文字

にするということです。

<div class="文字サイズ">
  見出し
  本文
  ボタン
</div>

という構造になっています。CSSで、文字サイズを制御します。

  • 1・2年生は <div class="fontS">
  • 3・4年生は <div class="fontM">
  • 5・6年生は <div class="fontL">

になるよう、MTタグを用いて、class名を変更させる方法を考えてみてください。

フォントサイズ制御専用のCSSを用意しました。詳しくは http://kiasma.jp/20080621/css/typography.css をご覧ください。

ページの先頭へ

[MT4分科会課題説明] サイトマップの仕様 

20080608-17.gif

1.大見出し：

サイトマップ用のインデックステンプレートに、直書きでオーケーです。

2.見出し（学年(がくねん)ごとのニュース）：

各学年の扉ページへのリンクをリスト表示させてください。

3.見出し（行事(ぎょうじ)ごとのニュース）：

各行事の扉ページへのリンクをリスト表示させてください。

4.見出し（お知(し)らせ）：

各ウェブページへのリンクをリスト表示させてください。

5.インデックステンプレートで作ったHTMLファイルのリスト：

サイトマップ用のインデックステンプレートに、直書きでオーケーです。

ページの先頭へ

[MT4分科会課題説明] 追加課題01 

20080621-01.gif

追加課題01：画像を投稿した日記の、そのサムネイル画像とタイトルを、テーブル形式で並べてください

  • 70日以内に書かれたエントリー内に含まれる、画像アイテムとタイトルをすべて並べてください。
  • 一行に3つずつ、縦横208pxにしたアイテムのサムネイルを並べます。（画像の正方形のトリミングはCSSでおこなっています）
  • 各アイテムのサムネイルはエントリーにリンクを張って下さい。
  • 最後に3つ並べるのに足りなくなった場所は、colspanを使い空要素で埋めてください。（上記画像の場合としています）
  • タイトルには学年アイコンをつけてください。
  • このデザインのテーブルを実装するにあたり、structure.cssを既存と差し替えてください。
    structure.cssのダウンロード

＊ヒント：特定の繰り返し後に、異なる処理を行う方法の練習です。一行ごとにで開きで閉じるようにしてください。余った時の処理の分岐にも、工夫が必要です。<MTIf name="__Last__">を用いてください。

HTMLソース

<table class="thumbnail" summary="最近(さいきん)の写真">
<tr>
<td>
<p><a href="http://kiasma.jp/20080621/6/20080615.html"><img src="http://kiasma.jp/20080621/assets_c/2008/06/photo_06-thumb-autox208.jpg"alt="修学旅行の思い出" /></a></p>
<h3><span class="schoolyear06"><a href="http://kiasma.jp/20080621/6/20080615.html">修学旅行の思い出</a></span></h3>
</td>
<td>
<p><a href="http://kiasma.jp/20080621/3/20080605.html"><img src="http://kiasma.jp/20080621/assets_c/2008/06/photo_03-thumb-autox208.jpg"alt="つうがくろにいつもいるネコ" /></a></p>
<h3><span class="schoolyear03"><a href="http://kiasma.jp/20080621/3/20080605.html">つうがくろにいつもいるネコ</a></span></h3>
</td>
<td>
<p><a href="http://kiasma.jp/20080621/2/20080510.html"><img src="http://kiasma.jp/20080621/assets_c/2008/06/photo_02-thumb-autox208.jpg"alt="りかのじゅぎょう" /></a></p>
<h3><span class="schoolyear02"><a href="http://kiasma.jp/20080621/2/20080510.html">りかのじゅぎょう</a></span></h3>
</td>
</tr>
<tr>
<td>
<p><a href="http://kiasma.jp/20080621/4/20080420.html"><img src="http://kiasma.jp/20080621/assets_c/2008/06/photo_04-thumb-autox208.jpg"alt="春の遠足" /></a></p>
<h3><span class="schoolyear04"><a href="http://kiasma.jp/20080621/4/20080420.html">春の遠足</a></span></h3>
</td>
<td colspan="2"><p>&nbsp;</p></td>
</tr>
</table>

ページの先頭へ

[MT4分科会課題説明] 追加課題02 

20080621-02.gif

追加課題02：画像を投稿した日記の、そのサムネイル画像とタイトルを、テーブル形式で並べてください。奇数のアイテムはタイトルが上側、偶数のアイテムはタイトルが下側になるようにしてください

追加課題01の応用編です。

＊ヒント：奇数／偶数を分岐させる方法を考えてみてください。

実装済みのページ

http://kiasma.jp/20080621/index.html

HTMLソース

<h2>最近(さいきん)の写真（しゃしん）</h2>

<table class="thumbnail" summary="最近(さいきん)の写真">

<tr>

<td><h3><span class="schoolyear06">
<a href="http://kiasma.jp/20080621/6/20080615.html">
修学旅行の思い出</a></span></h3>
<p><a href="http://kiasma.jp/20080621/6/20080615.html"><img src="
http://kiasma.jp/20080621/assets_c/2008/06/photo_06-thumb-autox208.jpg"
 alt="修学旅行の思い出" /></a></p></td>

<td><p><a href="http://kiasma.jp/20080621/3/20080605.html"><img src="
http://kiasma.jp/20080621/assets_c/2008/06/photo_03-thumb-autox208.jpg"
 alt="つうがくろにいつもいるネコ" /></a></p>
<h3><span class="schoolyear03">
<a href="http://kiasma.jp/20080621/3/20080605.html">
つうがくろにいつもいるネコ</a></span></h3></td>

<td><h3><span class="schoolyear02">
<a href="http://kiasma.jp/20080621/2/20080510.html">
りかのじゅぎょう</a></span></h3>
<p><a href="http://kiasma.jp/20080621/2/20080510.html"><img src="
http://kiasma.jp/20080621/assets_c/2008/06/photo_02-thumb-autox208.jpg"
 alt="りかのじゅぎょう" /></a></p></td>

</tr>

<tr>

<td><p><a href="http://kiasma.jp/20080621/4/20080420.html"><img src="
http://kiasma.jp/20080621/assets_c/2008/06/photo_04-thumb-autox208.jpg"
 alt="春の遠足" /></a></p>
<h3><span class="schoolyear04">
<a href="http://kiasma.jp/20080621/4/20080420.html">
春の遠足</a></span></h3></td>

<td colspan="2"><p>&nbsp;</p></td>

</tr>

</table>

ページの先頭へ

[MT4分科会課題説明] 追加課題03 

小野崎さんが、さらなる課題を考えてくださいました。

追加課題03：画像を投稿した日記の、そのサムネイル画像とタイトルを、サンプル画像のとおりに交互に、テーブル形式で並べてください。

20080621-03.gif

  • 70日以内に書かれたエントリー内に含まれる、最新の画像アイテムを並べてください。
  • 一行に3つずつ、横200pxにしたアイテムのサムネイルを並べます。
  • 各アイテムのサムネイルはエントリーにリンクを張って下さい。
  • 1列目はサムネイルの下に、2列目はサムネイルの上にと、交互にエントリーのタイトルを並べます。
  • 1エントリーに3行分を使います。写真はrowspanを使い、2行分にしてください。
  • 最後に3つ並べるのに足りなくなった場所は、colspanとrowspanを使い空要素で埋めてください。

実装済みのページ

http://www.zelazny.mydns.jp/school/index2.html

＊ヒント：テーブルでの要素のHTML上への出現順序に合わせて、どうやって書き出すかに工夫が要ります。出力ブロックを変数として扱う事で、簡素化した記述が出来ます。変数のappendモディファイアを使います。

HTMLソース

<table>

<tr>
<td rowspan="2" class="nikki_thumb">
<a href="http://www.zelazny.mydns.jp/school/6/20080615.html"
 title="修学旅行の思い出"><img src="
http://www.zelazny.mydns.jp/school/assets_c/2008/06/
photo_06-thumb-200xauto.jpg"
 alt="修学旅行の思い出" title="修学旅行の思い出" /></a></td>
<td class="nikki_title">つうがくろにいつもいるネコ</td>
<td rowspan="2" class="nikki_thumb">
<a href="http://www.zelazny.mydns.jp/school/2/20080510.html"
 title="りかのじゅぎょう"><img src="
http://www.zelazny.mydns.jp/school/assets_c/2008/06/
photo_02-thumb-200xauto.jpg"
 alt="りかのじゅぎょう" title="りかのじゅぎょう" /></a></td>
</tr>

<tr>
<td rowspan="2" class="nikki_thumb">
<a href="http://www.zelazny.mydns.jp/school/3/20080605.html"
 title="つうがくろにいつもいるネコ"><img src="
http://www.zelazny.mydns.jp/school/assets_c/2008/06/
photo_03-thumb-200xauto.jpg"
 alt="つうがくろにいつもいるネコ" title="つうがくろにいつもいるネコ" /></a></td>
</tr>

<tr>
<td class="nikki_title">修学旅行の思い出</td>
<td class="nikki_title">りかのじゅぎょう</td>
</tr>

<tr>
<td rowspan="2" class="nikki_thumb">
<a href="http://www.zelazny.mydns.jp/school/4/20080420.html"
 title="春の遠足"><img src="
http://www.zelazny.mydns.jp/school/assets_c/2008/06/
photo_04-thumb-200xauto.jpg"
 alt="春の遠足" title="春の遠足" /></a></td>
<td class="nikki_title">にゅうがくしました</td>
<td rowspan="3" colspan="1"></td>
</tr>

<tr>
<td rowspan="2" class="nikki_thumb">
<a href="http://www.zelazny.mydns.jp/school/1/20080406.html"
 title="にゅうがくしました"><img src="
http://www.zelazny.mydns.jp/school/assets_c/2008/06/
photo_01-thumb-200xauto.jpg"
 alt="にゅうがくしました" title="にゅうがくしました" /></a></td>
</tr>

<tr>
<td class="nikki_title">春の遠足</td>
</tr>

</table>

ページの先頭へ

[MT4分科会課題解答] モジュール分けとテンプレートの種類と解答例テンプレートダウンロード 

6月21日@秋葉原でのWebSig24/7 MT4分科会は無事終了いたしました。ご参加くださいました皆様ありがとうございました。

ぼちぼち解答編をまとめてまいります。

モジュール分けについて

20080622.gif

モジュール化について、いろいろな方法があるのですが、今回のサンプルは下記のように設定しました。

  1. ヘッダ
    全てのテンプレートで同じデザイン・内容ですので、うむをいわさずモジュール化します。
  2. サイドバー
    各テンプレごとにユニークですが、<MTIfArchiveType>を使えば、ひとつのモジュールにまとめられます。
  3. 記事本体
    各テンプレートごとにぜんぜんユニークですので、記事本体については各テンプレートに記述します。
  4. フッタ
    全てのテンプレートで同じデザイン・内容ですので、うむをいわさずモジュール化します。

以上をふまえまして、テンプレートは下記のとおり用意しました。

テンプレートの種類

  • インデックステンプレート（.js、.cssを除く）
    • メインページ
    • おといあわせ
    • サイトマップ

  • アーカイブテンプレート

    • ウェブページ
    • ブログ記事
    • ブログ記事リスト

  • テンプレートモジュール

    • サイドバー
    • フッタ
    • ヘッダ

どのようにモジュール化するのか、が、MTテンプレート設計のキモであります。モジュール化しすぎてしまうと、かえって管理が大変になると考えられます。<MTSetVarBlock>等をうまく使って、モジュールを最小限にする方法もあるのですが、今回は、3つのモジュールで考えてみます。（必ずしもこの方法でなくてオーケーです）

解答例テンプレートのダウンロード

http://kiasma.jp/20080621/20080621MTOS_template.zip

ページの先頭へ