blog Entry Archive

カテゴリー別に違う画像を表示させる

Movable Typeのシステムを利用して、このサイトで指定しているカテゴリー各ページそれぞれで違うタイトル画像を表示させる方法。 (私なりのやり方なのでご参考までに。)

bodyタグにカテゴリー名をidとして指定します。
テンプレートのカテゴリーアーカイブのbodyタグ部分を以下にします。
<body id="<$MTArchiveTitle$>">
構築してからページでソースを見ると以下になります。
<body id="blog">
次に、テンプレートのカテゴリーアーカイブのタイトル画像を表示させる部分(このサイトの場合はh2タグ部分)をdivタグで囲み、 任意の名前(私の場合は「blogttl」)でidを指定します。
<div id="blogttl">
<h2><MTCategoryLabel></h2>
</div>
テンプレートのカテゴリーアーカイブでの指定は以上でおしまいです。

次にCSSファイルで、カテゴリーそれぞれで違う画像を表示させる指定をします。

/* =タイトル画像指定部分
----------------------------------------------- */
#blog #blogttl {
background: url(../img/blog_ttl_blog.gif) no-repeat left bottom;
height: 50px;
width: 500px;
display: block;
}
#a_Diary #blogttl {
background: url(../img/blog_ttl_diary.gif) no-repeat left bottom;
height: 50px;
width: 500px;
display: block;
}
#b_Child #blogttl {
background: url(../img/blog_ttl_child.gif) no-repeat left bottom;
height: 50px;
width: 500px;
display: block;
}
#c_Webdesign #blogttl {
background: url(../img/blog_ttl_web.gif) no-repeat left bottom;
height: 50px;
width: 500px;
display: block;
}
/* =h2のテキストを非表示
----------------------------------------------- */
#blogttl h2 {
text-indent: -9999px;
}

ピンク字の部分が、1番最初にid指定をしたid名です。
つまり、カテゴリー名がそのままid名になります。
なのでカテゴリー名に日本語やスペース、記号などを使用している場合はNGです。
日本語のカテゴリー名にしたい場合は、カテゴリーの説明にidとする英語を入力しておき、最初のbodyのid指定を<$MTArchiveTitle$>ではなく<$MTCategoryDescription$>にすれば良いと思います。
(私の場合は、右ナビゲーションの「Category」でカテゴリー順序を、Diary→Child→Webdesignにしたい理由から頭にアルファベットを付けています。頭を数字にしたらFirefoxでidとして認識しませんでした。私は逆に右ナビゲーションの「Category」では<$MTCategoryDescription$>を使用しています。)

それぞれのカテゴリーで表示をさせる画像をbackgroundに指定します。

それだけではh2のテキストが画像にかぶってしまうため、私の場合はh2のテキストをtext-indent: -9999pxで非表示にしていますが、テキストを画像にがぶらせて表示させるデザインにする場合はこの指定はいりません。
(テキストの非表示指定は、昔はスパム扱いをされる可能性もあるとかないとかで賛否両論でしたが、現在では多くの大手サイトでも使用している技です。私も、画像に入っているテキストと同じ内容でしたら問題ないと考えています。)

もしかしたら、もっと良い方法があるかもしれません。
私は独学でこんな感じにしています。
bodyにカテゴリー名のidを付けるのは、
CSSの指定によってカテゴリー別にページ全体のcolorやbackgroundを変えてイメージをガラっと変えたりなど他にも応用ができます。


time 2006.08.01 (Tue) 22:17

Comments

お久しぶりです。
覚えてないかもしれませんが、コンシスで一緒だったジェニです。

凄い☆
さすがpas社長!!!

あまりの感動に書き込まずにはいれませんでした(≧▽≦)

MTってやっぱり難しいんですか??
スッキリ、クールなデザインといい、何事も完璧にこなすpas社長はやっぱり私の憧れです☆

time 2006.08. 2 (Wed) 19:38
pas

ジェニちゃん♪
お久しぶり~!
遊びに来てくれてありがとうっ!

MTは・・難しかったっす!
情報がまだあまりないので自分なりに色々やってみたり直したりしながらなんとかできたという感じ。
でもやり出してみるとMTタグやMTのシステムにも慣れてくるし、ジェニちゃんも私と一緒でオタク寄りなので(笑)HTMLコードを理解している基本があるから大丈夫です。
それに私よりも脳がピチピチギャルなのできっと余裕よ。そしてそのイラストレーションの実力があればすごいものができると思います。
ジェニちゃんもそうだと思うけど、システムから何から何までとことん自分で作りたいという欲望がかなり満たされるからオススメです♪

time 2006.08. 3 (Thu) 00:15

Please comment!

*必須

*必須 (公開はされません)

*必須

Track back