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

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

この記事を読むのに必要な時間:およそ 2 分

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

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

くれま先輩:ほげ山くん,やっと個別のブログ記事まで辿りついたね!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>

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

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

次回予告

  • 個別のブログ記事テンプレートを完成させよう。
  • ウェブページテンプレートを完成させよう。

著者プロフィール

黒野明子(くろのあきこ)

1973年生まれ。1995年 武蔵野美術大学短期大学部専攻科グラフィックデザインコース修了。

ファッションカメラマン事務所、広告系デザイン事務所、Web制作会社勤務を経て、2003年よりフリー。Webデザイン・企画を中心に、DTPデザインなども行う。

現在、武蔵野美術大学共通デザイン研究室非常勤講師及び株式会社デジタルスケープ・PreJOBトレーニング講師も兼務。2005年秋頃から業務としてMTサイトの構築を始め、現在の業務のほとんどでMovable Typeを使用している。

著書:

『CMSとして使うMovable Typeガイドブック』 (翔泳社、共著)

『Movable Typeプロフェッショナル・スタイル』(毎日コミュニケーションズ、共著)

URL:http://cremadesign.jp/

コメント

コメントの記入