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を変えてイメージをガラっと変えたりなど他にも応用ができます。
2007.07.22 (Sun) 17:38 |
全ての日記タイトル一覧を見る
