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

今回は、前回に引き続きhead要素の中身を作成していき、仕上げましょう。次にすべてのページで共通して使うグローバルナビゲーションの部分に着手します。

前回記事の訂正

くれま先輩：読者の皆さま、いきなりすみません。前回の記事の内容で、ひとつ訂正があります！

ほげ山くん：わゎ！どの部分でしょうか？先輩！

くれま先輩：前回の説明で、テンプレートごとに条件分岐をさせるために、以下のような変数を準備してくださいとお話しました。

<mt:Include module="head要素" />の直前の行に追加する変数名

インデックステンプレート
サイトマップ	<mt:SetVar name="sitemap" value="1" />
メインページ	<mt:SetVar name="main_index" value="1" />
システムテンプレート
検索結果	<mt:SetVar name="search_results" value="1" />

くれま先輩：しかし読者の方から、「Movable Type4.2xでは、『メインページ』と『検索結果』のテンプレートには、あらかじめ変数が設定されているのでは？」というご指摘をいただきました。

そこで確認したところ、「メインページ」テンプレートには「main_index」という変数が、「検索結果」テンプレートには「search_results」という変数が、あらかじめ設定されていました。

【参考URL】: Archive Template Variables | MovableType.org（英語）
http://movabletype.org/documentation/designer/
archive-template-variables.html

くれま先輩：上記ページには、検索結果テンプレートに「search_template」という変数が設定されていると記述されていますが、実際には「search_results」という変数が設定されているようです。そのことは、Movable Type4.2xの「検索結果」テンプレートに、

<mt:getvar name="search_results" />

と入れると値「1」が返り、

<mt:getvar name="search_template" />

と入れると値が返らないことから判断しています。

ほげ山くん：なるほど。

くれま先輩：以上、私の手元の環境[1]では、「メインページ」の

<mt:SetVar name="main_index" value="1" />

と「検索結果」テンプレートの

<mt:SetVar name="search_results" value="1" />

を新たに指定しなくても、すでにシステム内で指定されているため、期待する条件分岐の結果が得られていますので、Movable Type4.2xをお使いの方は、ぜひお試しください。

くれま先輩：なお、前回ご説明した「メインページ」の

<mt:SetVar name="main_index" value="1" />

と「検索結果」テンプレートの

<mt:SetVar name="search_results" value="1" />

を指定してあっても、とくに動作に問題なく、期待する条件分岐の結果を得ることができます。以上、お詫びして訂正させていただきます。

基本キーワードのテンプレートモジュールを作る

くれま先輩：えーっと、では気を取り直して、作業を進めましょう！前回作成したhead要素の中身には、meta要素のkeywordsを出力させる部分があったよね。

ほげ山くん：

<meta name="keywords" content="<mt:Include module="基本キーワード" />" />

のところを、テンプレートごとに出力内容を変える部分ですね。

くれま先輩：そうそう。どのテンプレートでも共通に入れるキーワードの管理を楽にしたいから、「基本キーワード」というモジュールを作って、すべてのテンプレートに読み込ませてみたの。今日は、このテンプレートモジュールから作ろうね。

ほげ山くん：また新規のテンプレートモジュールを作ればいいんですよね。「ブログ・モード」になっている画面で、上部メニューの［デザイン→テンプレート］を選んで…。4.21だと一画面にテンプレートがまとまっているから、「テンプレートモジュール」の下の「テンプレートモジュールを作成」をクリック……。

くれま先輩：次に出てきた画面で、名前を「基本キーワード」にしてね。

ほげ山くん：中に入れるキーワードは、何にするんですか？

くれま先輩：どのページでも入れたい基本的なキーワードなんだけど、次のリストの通りいれてみてくれる？

基本キーワードにするもの: 絵本,えほん,幼児,小学生,中学生,こども,教育,出版,

ほげ山くん：この部分は、サイトの運用過程で色々変更することもあるんですよね。

くれま先輩：この部分だけじゃなくて、head要素の中身全般的に運用過程での見直しや修正が必要でしょ？だからなるべくテンプレートに直で記述するのを避けて、テンプレートモジュール、ブログの説明（mt:BlogDescription）、ブログ記事の概要（mt:EntryExcerpt）などを使って作るようにすれば、お客様にも運用していただきやすいと考えて作成しているんだよね。それから、サイトによってはブログ記事やウェブページにつけるタグ（mt:Tags）を利用するなど、さまざまな工夫ができると思うよ。

ほげ山くん：なるほど。他のWebマスターの皆さんがどのようにしているかというのも、気になりますねー。

カテゴリ用キーワードのカスタムフィールドを作る

くれま先輩：じゃ、次の作業に移ろう。次は、同じhead要素の中で使うために、カテゴリにカスタムフィールドを追加する必要があったのを覚えてる？

ほげ山くん：「mt:CategoryKeywords」というタグを自作しようとしていた部分ですよね？

くれま先輩：それそれ。今までカテゴリにカスタムフィールドを追加するのはやってなかったから、説明してみるね。まずは、上部メニューの［設定→カスタムフィールド］を選んで。その後「フィールドを作成」をクリック。

ほげ山くん：「システムオブジェクト」のプルダウンメニューで「カテゴリ」を選ぶんですね。

くれま先輩：で、それ以外の設定は、次の通りにしてね。

新規カスタムフィールドの設定項目一覧

システムオブジェクト	カテゴリ
名前	カテゴリのキーワード
説明	ブログ記事リストが出力するWebページ内のmeta要素（keywords）に出力させる文字列です。「⁠,（半角カンマ⁠）⁠」で区切って入力してください。例：「日本,にほん,Japan,」
種類	テキスト
必須	チェックする
既定値	空欄のまま
ベースネーム	自動でつく値を利用するので、空欄のまま
テンプレートタグ	CategoryKeywords

ほげ山くん：全部入力したので、一番下の「保存」をクリックしまーす。

くれま先輩：はい、では次に、実際にカテゴリにキーワードをつけていこう。今度は、上部メニューの［一覧→カテゴリ］を選んでみて。

ほげ山くん：カテゴリの一覧ページですね。

くれま先輩：そこに、第3回で作成してもらった4種類のカテゴリが表示されているでしょ？

ほげ山くん：それぞれのカテゴリ名をクリックすると、編集できるんですよね。

くれま先輩：まずは「国内作家の絵本」をクリックして、以下のように入力してね。

「国内作家の絵本」カテゴリの設定項目一覧

システムオブジェクト	カテゴリ
名前	国内作家の絵本（第3回で作成済み）
国内作家の絵本	japan（第3回で作成済み）
説明	絵本の出版社リブリートが出版している、日本国内の絵本作家の作品リストです。やまだよよこさん、東海はなみさんをはじめ、多様な作家の作品をご紹介しています。
カテゴリのキーワード	日本,にほん,ニッポン,絵本作家,
トラックバック受信	チェックしない
トラックバック送信	空欄のまま

ほげ山くん：入力して、下部の「保存」をクリックしましたー。

くれま先輩：同じ要領で、残りのカテゴリにも説明文とキーワードを入力してね！

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

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

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

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

くれま先輩：再構築できたかな？では、試しに、/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>

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

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

ほげ山くん：了解です！

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