このblogは更新を停止しており、アーカイブとして残してあるものです。新しいサイトはhttp://heikinritsu.comよりお入り下さい。
08/02/18 在原晃士
Movable Type：カテゴリ別のギャラリーページを作る
05/05/10追記：
テンプレート変更に伴って、記事内のリンクが一部切れています。ひとまず、このまま文章だけ公開しておきます。
先日、いわゆるギャラリーページを作り替えました。「黒」「白」「灰」「青」というように、絵をなんとなくの種類ごとに分けて背景色を変え、サムネイルを介さずに絵だけを見せていくページを作っています。この方法は、Movable Typeを導入するより前のサイトでしていたことと、ほとんど同じです。
今回は本当、自分のためだけに考えたようなものなので、あまり書く意味がないかも……ただ、少なくとも、こういう使い方もできるよ、というテストケースにはなるかもしれないしで、概要を書いておきます。
順を追って。
まず「サムネイルから個別記事にリンクする」で決めた、絵のカテゴリの記事の作り方、
- エントリーの内容（body）にはフルサイズの画像のみを入れる
- 追記（extended）に、文章を入れる
- 概要（excerpt）にサムネイル画像のみを入れる
これを守っていることが前提となります。（別に守っていなくてもできなくはないですが、いろいろ挙動が変わってくるかと思います）
また、今回は、以前にも紹介したSupplemental Category Tagsプラグインと、MTRegexというプラグインの2つを使います。後者は無くても工夫次第でなんとかなりますが、これから説明する例ではこのプラグインが使えることが前提になっています。
まず、僕は絵のカテゴリとして「Illustration」を作っていますが、そのほかにも「Gallery_Black」「Gallery_White」「Gallery_Blue」「Gallery_Gray」という4つのカテゴリも設定しています。このGallery〜というカテゴリは、絵の入った記事に対して、副カテゴリとしてのみ使います。たとえば、「きこえる？」の絵は、主カテゴリとして「Illustration」を、副カテゴリとして「Gallery_Blue」を設定しています。
次に、Category Archiveのテンプレートを書き換えます。僕が使っているものを、そのまま見せると、こんな感じです。全部は長すぎるので要点の部分だけ。
<MTIfCategory pattern="/Gallery.*/">…………………………(1)
<div id="container_gallery">
<MTEntries>
<div class="illustration_alone">
<a name="<$MTEntryID pad="1"$>"></a>
<$MTEntryBody$>
<p><$MTEntryTitle$></p>
<div class="posted">
［<a href="<$MTEntryPermalink$>">固定リンク</a>］
<MTEntryIfAllowComments>
<a href="<$MTEntryPermalink$>#comments">コメント (<$MTEntryCommentCount$>)</a>
</MTEntryIfAllowComments>
<MTEntryIfAllowPings>
/ <a href="<$MTEntryPermalink$>#trackback">トラックバック (<$MTEntryTrackbackCount$>)</a>
</MTEntryIfAllowPings>
</div>
</div>
</MTEntries>
</div>
</MTIfCategory> ………………………………………………………(2)
<MTIfNotCategory pattern="/Gallery.*/">………………………(3)
<div id="container">
<div class="blog">
<MTEntries>
・
・
・
</MTEntries>
</div>
</div>
</MTIfNotCategory>……………………………………………………(4)
(3)と(4)に挟まれた部分が、自分が今まで使っていたテンプレートをそのまま入れる場所です。デフォルトのテンプレートだと、<div id="container">と、そのタグが閉じる場所までの間です。(1)から(2)までが今回書き加える場所。
適用されるテンプレートを、カテゴリの種類によって、まるきり書き換えているようなものです。MTRegexの機能である正規表現を用いて、「Gallery」で始まるカテゴリ名だったときのみ、(1)から(2)までを適用、それ以外のカテゴリ名だったときは、(3)から(4)までを適用する、という状態になっています。
ギャラリー用のテンプレート（(1)から(2)までの部分）について、簡単に。
繰り返しになりますが、僕は前述したルールを守って絵の記事を作っているので、たとえば<$MTEntryBody$>は絵の画像のみが入っています。その下に、絵の説明代わり？として<$MTEntryTitle$>を入れています（ここで<$MTEntryMore$>を入れれば、絵と一緒に書いた文章も表示させられますが、邪魔に思えたので入れていません）。固定リンク、コメントとトラックバックは残しておきました。
また、DIVタグに対し、「container_gallery」「illustration_alone」という2つのクラスを新たに設定しています。それぞれ「container」クラスと「blog」クラスの代わりとして使われるものです。この2つのクラスに対してのスタイルシートの設定を、Stylesheetテンプレートに書き加えます。絵の見せ方にもよりますが、僕の場合はこんな感じ。
#container_gallery {
margin:0;
padding:0;
width:100%;
}
.illustration_alone {
text-align:center;
margin:0 10px 0 10px;
padding:40px 0 40px 0;
}
絵は真ん中揃えで見せたいってことですね。
ひとまず、ここまでで、ギャラリーのページそのものは生成されるようになったはずです。
もうひとつ、本当にちょっとしたことながら、ここからが元々したかったことの本質なんですが、上の操作に加え、カテゴリーごとにページの背景色を変えます。特に「黒」のギャラリーは、背景が黒い方がぜったいに絵が映えるんですよねー。
Category Archiveテンプレートの、<head>から</head>までの間に、次の部分を加えます。
<style type="text/css">
<!--
<MTIfCategory pattern="m/Gallery.*/">
.posted {text-align:center}
</MTIfCategory>
<MTIfCategory name="Gallery_Blue">
#container_gallery {background-color:#C8EAFD;}
</MTIfCategory>
<MTIfCategory name="Gallery_White">
#container_gallery {background-color:#f4f4f4;}
</MTIfCategory>
<MTIfCategory name="Gallery_Gray">
#container_gallery {background-color:#666666;}
</MTIfCategory>
<MTIfCategory name="Gallery_Black">
#container_gallery {background-color:#000000;}
</MTIfCategory>
-->
</style>
（※説明にいらない部分は取り除いてあります）
それぞれのカテゴリ名ごとに、先ほど作った「container_gallery」クラスのDIVタグに対し、スタイルシートで別々の背景色を割り当てています。たとえば、Gallery_Blackカテゴリのときは、背景色が黒に、Gallery_Grayカテゴリのときは、灰色になります。しかしこんな簡単そうなことでも、けっこう回りくどいことをしないといけないんですね……。
これで設定はすべて終了。
ちなみに、なんでGallery〜というカテゴリを必ず副カテゴリにしているかというと、単純に、気が変わってギャラリー分けをしたくなくなったりしたときに楽だから、というだけのことです。カテゴリ分けしないで絵を全部見せるページも勝手に生成されています。
上で説明した、うちの使い方にこだわらず、適度にカスタマイズして使ってくださいませ。色で分けるよりも、パロディ絵だったら元ネタだとか、テーマだとか、健全絵と18禁絵……とかで分けるほうが汎用性がありそう。テンプレートを書く考え方がわかれば、巧く見せ方を変えてほかのサイトとの差異化も図れるのではないかしら。
前々から思っていた、Movable Typeの駄目なところ……というか改善して欲しいところとして、カテゴリーごとに適用するテンプレートが変えられないことがありました。このSupplemental Category Tagsプラグインを用いれば、（正確にはひとつのテンプレート内で条件分岐させているだけですが）カテゴリごとに適用するテンプレートを自由に変えることができます。MTRegexプラグインの機能である正規表現による振り分けと、副カテゴリの分け方を考えれば、かなり複雑なことも実現できるかと思います。
Supplemental Category Tagsの日本語環境での適用例を紹介した場所、意外と見つからないのですが、
絵文録ことのは: MT:前／次のカテゴリーへリンク
こちらでドキュメントの簡単な和訳が書かれており、使う際の参考にさせて頂きました。感謝。
04/05/11 6:54
-絶対作れる！萌えアニメ- 銀の月 動画計画05/02/08 4:24
イラストサイトをblog化しようとする場合、画像の埋め込みはふつうにエントリーの...