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

第5回　head要素の中身を作る／グローバルナビゲーションを作る

Movable Type, CMS

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

再構築してhead要素の中身を確認してみる

ほげ山くん：すべてのカテゴリに，入力して保存し終わりました。

くれま先輩：ここまでできたら，試しに全部のページを再構築してみよう。上部メニューの右から2番目に，矢印が2つ輪になっているアイコンがあるよね？それをクリックして。

図4　上部メニュー内の再構築アイコン

図4　上部メニュー内の再構築アイコン

ほげ山くん：次に開いた画面で，「⁠すべてのファイル」になってますから，「⁠再構築」をクリックすればいいんですよね。

図5　再構築画面

図5　再構築画面

くれま先輩：再構築できたかな？では，試しに，/japan/index.htmlを表示して，ブラウザの操作でHTMLソースを見てみてくれる？

ほげ山くん：はい。あ，さっき入力したテキストがちゃんと反映されてますね。

出力された「/japan/index.html」のhead要素（改行は除いてあります）

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- ▼title要素ここから▼ -->
<title>国内作家の絵本｜絵本出版のリブリート</title>
<!-- ▲title要素ここまで▲ -->
<!-- ▼meta要素 descriptionここから▼ -->
<meta name="description" content="絵本の出版社リブリートが出版している，日本国内の絵本作家の作品リストです。やまだよよこさん，東海はなこさんをはじめ，多様な作家の作品をご紹介しています。" />
<!-- ▲meta要素 descriptionここまで▲ -->
<!-- ▼meta要素 keywordsここから▼ -->
<meta name="keywords" content="日本,にほん,ニッポン,絵本作家,絵本,えほん,幼児,小学生,中学生,こども,教育,出版," />
<!-- ▲meta要素 keywordsここまで▲ -->
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="http://xxxxxxx.xxxxx/atom.xml" />
<link rel="stylesheet" type="text/css" href="http://xxxxxxx.xxxxx/styles.css " media="screen,print" title="default" />
</head>

くれま先輩：他のページもhead要素の中身がきちんと出力されているかどうか，確認してみてね。

グローバルナビゲーションのテンプレートモジュールを作る

くれま先輩：今日最後の作業は，グローバルナビゲーションの部分の作成だね。

ほげ山くん：この部分って順番なしリスト（ul,li）にすると思うんですけど，カテゴリ数が増えるということも無いだろうし，中身は直接テンプレートに書いちゃいますか？

くれま先輩：まぁ，それでも悪くないけど，将来的にもしかしたらカテゴリを増やすかもしれないし，新しいテンプレートモジュールを作成して，こんなソースを書いておくのがいいんじゃないかな？

新規テンプレートモジュール「グローバルナビゲーション」の中身

<ul>
<mt:TopLevelCategories>
<li><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel remove_html="1" /></a></li>
</mt:TopLevelCategories>
<mt:TopLevelFolders>
<li><a href="<mt:BlogUrl /><mt:FolderPath />/"><mt:FolderLabel remove_html="1" /></a></li>
</mt:TopLevelFolders>
</ul>

ほげ山くん：テンプレートモジュールにしておくことで，何かあったときにも，このファイルひとつだけを修正すればいいってことですね。

くれま先輩：うん。それからこのソースの意図を説明すると，まずは「mt:TopLevelCategories」を使ってサイト内に存在するすべての最上位のカテゴリをリストアップして，それが終わったら「mt:TopLevelFolders」でサイト内に存在するすべての最上位のフォルダをリストアップしているの。

ほげ山くん：なるほど。で，新規テンプレートモジュール「グローバルナビゲーション」ができましたー。

くれま先輩：そうしたら，各テンプレートの

<div id="nav">
<!-- end div#nav --></div>

の部分を

<div id="nav">
	<mt:Include module="グローバルナビゲーション" />
<!-- end div#nav --></div>

に変えてみてー。で，再構築して，出力されたソースを確認ね！

ほげ山くん：お！順番なしリストがちゃんと表示されましたね！

出力された順番なしリスト

<ul>
<li><a href="http://xxxxxxx.xxxxx/japan/">国内作家の絵本</a></li>
<li><a href="http://xxxxxxx.xxxxx/news/">最新情報</a></li>
<li><a href="http://xxxxxxx.xxxxx/world/">海外作家の絵本</a></li>
<li><a href="http://xxxxxxx.xxxxx/baby/">赤ちゃん向け絵本</a></li>
<li><a href="http://xxxxxxx.xxxxx/company/">会社概要</a></li>
<li><a href="http://xxxxxxx.xxxxx/policy/">絵本出版のポリシー</a></li>
</ul>

ほげ山くん：でも先輩，このカテゴリの並び順って，希望通りのものじゃないですよね？

くれま先輩：そうなんだよね。本当は，「⁠最新情報⁠」⁠→「⁠国内作家の絵本⁠」⁠→「⁠海外作家の絵本⁠」⁠→「⁠赤ちゃん向け絵本⁠」⁠→「⁠会社概要⁠」⁠→「⁠絵本出版のポリシー」って並べたいの。この並べ替えの方法は色々あるんだけど，今回の案件ではスマートにプラグインを使って並べ替えをする予定。それについては，また次回説明するね！

ほげ山くん：了解です！

次回予告

  • プラグインを使ってグローバルナビゲーションの並び替えをしよう。
  • トップページに最新ブログ記事一覧を表示させよう。
  • Multiblog機能を使って，トップページに別ブログの最新ブログ記事一覧を表示させよう。

Movable Type, CMS

著者プロフィール

黒野明子（くろのあきこ）

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

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

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

著書：

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

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

URL：http://cremadesign.jp/