今回でトップページに必要な要素は、ほぼ全て仕上がります。1冊の情報につき1つのdiv要素で囲まれた「リブリートの新刊」部分をCSSで横並びにし、バナー表示部分を必要に応じて更新しやすいウィジェットにし、検索用タグクラウドを作成します。

div要素をCSSで横並びにする

ほげ山くん：今日は、トップページの「リブリートの新刊」部分を、CSSを使って横並びにするんですよね…？

くれま先輩：うん。図1の赤枠で囲まれた部分ね。

ほげ山くん：僕、こういうブロックレベル要素の横並びについて、すごく疑問があったんです。float:leftを使ってdiv要素を横並びにしていくと、高さの違う要素があったときに次の行が引っかかってしまって、レイアウトが崩れることがあるんですよね。

くれま先輩：そうそう！だからこんな風に一行ごとにdiv要素を追加して、包むようにして対処したりしたよね。

ほげ山くん：ですよね。今回も、これをやるんですか？

くれま先輩：まぁ、やってもいいんだけど、この間ヨモツネットの小山田さんの講演を伺って、CSSでこの問題を解決する方法を知ったから、そっちを使ってみない？

ほげ山くん：へぇ、そんなのがあるんですか？

くれま先輩：詳しくは以下のリンク先を読んでほしいんだけれど、div要素にfloat:leftを指定するのではなく、display:inline-blockを指定することによって、横並びにする方法なの。

【参考URL】

ヨモツネット：書籍などに紹介されていない display : inline-block について
http://yomotsu.net/works/081016cssnite/

ほげ山くん：display:inline-blockですかぁ！僕、使ったことが無かったですよ！

くれま先輩：私も小山田さんのお話を伺うまで使ったことがなかったんだけれど、この間別の案件で早速使わせていただいたら、いい感じだったよ！というわけで、CSS内での必要な記述については、上記の小山田さんのドキュメントを見ていただくこととして…。実はこの方法を使うには、前回書いた「リブリートの新刊」部分に追加しなければならない要素があるので、そこだけ説明をするね。

ほげ山くん：前回書いたのって、これですよね。

<div id="newBooks">
<h2>リブリートの新刊</h2>
<mt:Entries category="国内作家の絵本 OR 海外作家の絵本 OR 赤ちゃん向け絵本" lastn="6">
<div class="newBooksDetail">
<h3><a href="<mt:EntryLink />"><mt:EntryTitle /></a></h3>
<dl>
<dt>著者名</dt>
<dd><mt:author_name /></dd>
<dt>発売日</dt>
<dd><mt:release_date /></dd>
<dt>対象年齢</dt>
<dd><mt:readers_age /></dd>
<dt>版型</dt>
<dd><mt:book_size /></dd>
<dt>説明</dt>
<dd><mt:EntryBody words="50" /></dd>
</dl>
<p><mt:coverAsset><a href="<mt:EntryLink />"><img src="<mt:AssetThumbnailURL width="100" />"alt="<mt:EntryTitle />" title="<mt:EntryTitle />" /></a></mt:coverAsset></p>
</div>
</mt:Entries>
</div>

くれま先輩：それだね。で、今回書き直したのは、次の通りだよ。強調した部分を、追加したの。

<div id="newBooks">
<h2>リブリートの新刊</h2>
<!--<mt:Entries category="国内作家の絵本 OR 海外作家の絵本 OR 赤ちゃん向け絵本" lastn="6">
--><div class="newBooksDetail"><div>
<h3><a href="<mt:EntryLink />"><mt:EntryTitle /></a></h3><dl>
<dt>著者名</dt>
<dd><mt:author_name /></dd>
<dt>発売日</dt>
<dd><mt:release_date /></dd>
<dt>対象年齢</dt>
<dd><mt:readers_age /></dd>
<dt>版型</dt>
<dd><mt:book_size /></dd>
<dt>説明</dt>
<dd><mt:EntryBody words="50" /></dd>
</dl>
<p><mt:coverAsset><a href="<mt:EntryLink />"><img src="<mt:AssetThumbnailURL width="100" />"alt="<mt:EntryTitle />" title="<mt:EntryTitle />" /></a></mt:coverAsset></p>
</div></div><!--</mt:Entries>
-->
</div>

ほげ山くん：コメントタグがちらほら入りましたね…。あと、新しいdiv要素が追加されたんですか？これを入れると、横並びになるんですか？

くれま先輩：詳しくは上記でご紹介した小山田さんのドキュメントを読んでほしいんだけど、現状普及している色々なブラウザに対応させるために必要な要素なのよ。

ほげ山くん：ふーん、なるほど。では、これからドキュメントを拝見してみます！

くれま先輩：これを再構築してCSS側に必要な記述を追加すると、一冊一冊のdiv要素が横並びになるよ。最終回でできあがったサイトをサンプルとして公開するので、見た目はそこで確認してみてくださいね！

バナー表示部分をウィジェット化する

くれま先輩：じゃあ次は、トップページのdiv id="secondry"部分を仕上げるね！

ほげ山くん：まずは、「⁠絵本フェア2008」バナーの部分をウィジェットにするんですね。ウィジェット機能って3.3xのときに使えていたので、なんとなーくイメージはわかっている気がするんですが、もう1回教えてもらえますか？

くれま先輩：はいはい。そもそも考えてみると、この「絵本フェア2008」バナーなんだけど、期間が終わったら掲載をやめるでしょ。サイトを運用していただくのをHTMLやMTにあまり詳しくない担当者様にお願いするとすると、直接この部分のテンプレートを書き変えていただくのは、かなり厳しいよね。

ほげ山くん：そうですねぇ。

くれま先輩：そこでこういった部分は、テンプレートを直接書き換えなくても管理画面から更新できる方が便利でしょ。で、ウィジェット機能を使うことにしたの。もちろん、新しいバナーを掲載する時にも便利だしね。まずはバナーだけを切り出したウィジェットを作成するので、上部のメニューバーから［デザイン→ウィジェット］を選択してね。

ほげ山くん：ウィジェットの一覧画面になりましたね。

くれま先輩：次に、ウィジェットテンプレートの見出しの下にある「ウィジェットテンプレートを作成」をクリック。

ほげ山くん：「ウィジェットを作成」画面になりました。

くれま先輩：テンプレートの名前を「バナー：絵本フェア2008」にして、本文欄に以下を入力してみて。

「ウィジェットを作成」画面本文に入力するソースコード

<p><a href="http://xxx.xxxxxx.xx"><img src="<mt:BlogUrl />img/bnr2008.gif" alt="絵本フェア2008" width="210" height="70" /></a></p>

ほげ山くん：入力したので「保存」をクリックしていいんですよね？

くれま先輩：うんOK。そうしたら次は、このウィジェットをセットにして、管理画面からの表示非表示の操作ができるようにするね。［⁠デザイン→ウィジェット］の一覧画面から「ウィジェットセットの作成」をクリックして。

ほげ山くん：「ウィジェットセットの作成 」画面ですね。

くれま先輩：「セット名」の入力欄に「バナー」って入力して、右側の「利用可能」エリアから左側の「インストール済み」のエリアに、「⁠バナー：絵本フェア2008」を、ドラッグアンドドロップしてね。で、最後に「変更を保存」ね。

ほげ山くん：はい。でも、これだけじゃ、まだテンプレートには読み込まれてないですよね？

くれま先輩：そうよ。だから、「⁠サイトマップ」「⁠メインページ」「⁠ウェブページ」「⁠ブログ記事」「⁠ブログ記事のリスト」「⁠検索結果」のテンプレート内にあるdiv id="secondry"の中に、<mt:WidgetManager name="バナー" />って書いて、保存して、再構築してね。こんなHTMLが出力されるはずだよ。

<div id="secondry">
<p><a href="http://xxx.xxxxxx.xx"><img src="http://localhost/mt421test/img/bnr2008.gif" alt="絵本フェア2008" width="210" height="70" /></a></p>
<!-- end div#secondry --></div>

ほげ山くん：これって、バナーの掲載をやめる時は、どうするんでしたっけ？

くれま先輩：上部メニューの［デザイン→ウィジェット］からウィジェットセットにリストアップされた「バナー」をクリックして。

ほげ山くん：「ウィジェットセットの編集」画面ですねぇ。これで、「⁠インストール済み」から「利用可能」に戻して、「⁠変更を保存」すればいいんですね。

くれま先輩：そうそう。これだったら、ご担当の方にも作業していただきやすいでしょ。納品前に、掲載する可能性のある色々なバナーのウィジェットを作っておけば、より便利だしね！

検索用タグクラウドを作成する

くれま先輩：じゃ、今日の最後に、検索用タグクラウドを設置するね。ブログ記事を投稿する時に投稿画面の「タグ」入力エリアに、著者名やテーマなんかを半角カンマ区切りで入力してもらったよね。あそこで入力したタグのリストを出力して、検索結果ページにリンクされるようにすると、ユーザがいろいろな角度から絵本を探しやすいでしょ？

ほげ山くん：確かに、あらかじめ色々なキーワードがタグとして表示されていると、ついクリックして、関連の本を探したくなりますね。

くれま先輩：そうだよね！それでは、「⁠メインページ」のdiv id="secondry"の続きに、以下のようなサブテンプレートを書こう。

<h2>タグ検索</h2>
<ul id="tag">
<mt:Tags><li><a href="<mt:TagSearchLink />"><mt:TagName /></a> </li></mt:Tags>
</ul>

くれま先輩：ちょっと説明すると、mt:Tagsがタグ一覧を表示するためのブロックタグで、mt:TagSearchLinkが、特定のタグのついたブログ記事を検索するための検索ページへのリンクを生成するでしょ。それで、mt:TagNameがタグそのものを生成するMTタグ、って感じ。

ほげ山くん：ふむふむ。これを書いて、「⁠保存と再構築」しましたー！で、HTMLを見ると、こんな風に出てますね。

<h2>タグ検索</h2>
<ul id="tag">
<li><a href="http://xxx.xxxxx.xx/mt-search.cgi?blog_id=1&tag=%E3%82%84%E3%81%BE%E3%81%A0%E3%82%86%E3%81%BF%E3%81%93&limit=20">やまだゆみこ</a> </li>
<li><a href="http://xxx.xxxxx.xx/mt-search.cgi?blog_id=1&tag=%E9%A3%9F%E8%82%B2&limit=20">食育</a></li>
（以下、存在するタグの数だけ繰り返し）
</ul>

くれま先輩：a要素のリンク先の中身を見てみると、mt-search.cgiに対して、色々設定するための文字列を渡しているのが、なんとなくわかるよね。検索結果テンプレートをカスタマイズした後に、実際の動作を確かめてみようね！

ほげ山くん：楽しみですね。これでトップページに出力する内容が、全部揃ったってことですよね！

くれま先輩：うん、良かったー！じゃ、キリのいいところで、今回はこの辺で！

次回予告