チャレンジ! Movable TypeをCMSとして使ってみよう!

第11回個別のブログ記事テンプレートに着手する

前回でブログ記事リストのテンプレートが完成しましたので、次は個別のブログ記事テンプレートを作成していきましょう。

個別のブログ記事で出力する情報を確認しよう。

くれま先輩:ほげ山くん、やっと個別のブログ記事まで辿りついたね!w

ほげ山くん:そうですね!感慨深いですw

くれま先輩:個別のブログ記事で、どんな内容を出力するか覚えてる?

ほげ山くん:第3回で見たデザインを引っ張り出してきて、思い出します!

図1 個別の絵本紹介ページのデザイン
図1 個別の絵本紹介ページのデザイン

ほげ山くん:個別の絵本の紹介ページでは、以下の要素が出力されていますね。

個別の絵本の紹介ページで出力される要素
  • 絵本のタイトル
  • 絵本の表紙画像
  • 絵本の著者名
  • 絵本の発売日
  • 絵本の版型
  • 絵本の解説文

くれま先輩:そうね。その通り。で、ブログ記事リストのテンプレートと同じように、個別のブログ記事のテンプレートでも、⁠最新情報」カテゴリだけは出力する内容を変えたいの。だから、こうしようね。

「最新情報」カテゴリの個別ページで出力される要素
  • 記事のタイトル
  • 本文

また、カテゴリ名で条件分岐をする

ほげ山くん:ということは、また条件分岐するんですね、カテゴリ名で。

くれま先輩:もう、ほげ山くんもだいぶ慣れてきたねw じゃあ、どこに何を書けばいいか、もうわかるかな?

ほげ山くん:書く場所は、上部メニューの[デザイン→テンプレート]で一覧の中に出てくる「アーカイブテンプレート」の中の「ブログ記事」をクリック、ですね。

くれま先輩:うんうん。

ほげ山くん:で、<div id="primary">の中にある、<mt:Include module="パンくずナビゲーション" />の下に、条件分岐のMTタグを入れればいいんですよね?また<mt:IfCategory name="最新情報">を使うのでいいんですか?

くれま先輩:いいよいいよ。じゃ、⁠最新情報」カテゴリ用の出力内容を出すサブテンプレートは、どう書く予定?

ほげ山くん:えーっと。記事のタイトルと本文だけですよね。だったら、こんな感じですかね?

「最新情報」カテゴリ用のサブテンプレート
<h1><mt:EntryTitle /></h1>
<mt:EntryBody />

くれま先輩:そうねそうね。もう私、何にもしなくて良い気がしてきたけど、ちょっとは働こうっと。じゃあ、⁠最新情報」カテゴリ以外の場合は、こう書いてね!

「最新情報」カテゴリ以外のサブテンプレート
<h1><mt:EntryTitle /></h1>
<dl>
<dt>著者</dt>
<dd><mt:author_name /></dd>
<dt>発売年月日</dt>
<dd><mt:release_date /></dd>
<dt>版型</dt>
<dd><mt:book_size /></dd>
<dt>内容解説</dt>
<dd><mt:EntryBody /></dd>
</dl>
<p><mt:coverAsset><img src="<mt:AssetURL />" width="<mt:AssetProperty property="image_width" />" height="<mt:AssetProperty property="image_height" />" alt="<mt:EntryTitle />" title="<mt:EntryTitle />" /></mt:coverAsset></p>
出力されるHTML
<h1>となかいさんの赤いおはな</h1>
<dl>
<dt>著者</dt>
<dd>やまだゆみこ</dd>
<dt>発売年月日</dt>
<dd>2008年11月13日</dd>
<dt>版型</dt>
<dd>B5判</dd>
<dt>内容解説</dt>
<dd>となかいさんのおはなは、なんで赤いんだろうね?サンタさんがひみつをしってるかもしれないよ!</dd>
</dl>
<p><img src="http://xxxxxx.xxx/img/fig001.jpg" width="250" height="200" alt="となかいさんの赤いおはな" title="となかいさんの赤いおはな" /></p>

ほげ山くん:トップページで書いたのと似てますね。表紙画像を原寸大で出すところだけが違いますかねぇ。

くれま先輩:そうだね。mt:AssetURLで、アイテムのオリジナルファイルへのURLを表示させているでしょ。で、mt:AssetPropertyを使って、画像のオリジナルの幅と高さを出力しているのよね。違いはそれぐらいかな。

ほげ山くん:この内容を、mt:Else以下に書けばいいんですね。

くれま先輩:うん。そうすれば、⁠最新情報」以外のカテゴリでmt:Else以下が実行されるからね。今回のサブテンプレートをまとめると、こんな感じになるね。

「ブログ記事」テンプレートの、<div id="primary">内<mt:Include module="パンくずナビゲーション" />の下に書くサブテンプレートまとめ
<mt:IfCategory name="最新情報">

<h1><mt:EntryTitle /></h1>
<mt:EntryBody />

<mt:Else>

<h1><mt:EntryTitle /></h1>
<dl>
<dt>著者</dt>
<dd><mt:author_name /></dd>
<dt>発売年月日</dt>
<dd><mt:release_date /></dd>
<dt>版型</dt>
<dd><mt:book_size /></dd>
<dt>内容解説</dt>
<dd><mt:EntryBody /></dd>
</dl>
<p><mt:coverAsset><img src="<mt:AssetURL />" width="<mt:AssetProperty property="image_width" />" height="<mt:AssetProperty property="image_height" />" alt="<mt:EntryTitle />" title="<mt:EntryTitle />" /></mt:coverAsset></p>

</mt:IfCategory>

ほげ山くん:今回は、かなりすんなりいきましたね!

くれま先輩:そうねー!次回もこの調子で、個別のブログ記事テンプレートを完成させましょ!ゴールが見えてきたよ!!

次回予告

おすすめ記事

記事・ニュース一覧