TMP カテゴリー別にCSSを適用する方法

IGU

2009年07月18日 01:44

 
 
 
 
工作大好きな僕は当初、独自ドメインで趣味の「工作」をテーマにしたホームページを作ろうと思っていた。でも、考え直して、管理が簡単そうなブログにした経緯がある。

だけども、工作の作業は、そうそう短時間でできるものではない。いろいろ考え、試行錯誤して、時には失敗したりもする。そうすると、いつまでたっても記事にならない。

工作ネタって、意外と、ブログと相性が悪いような気がしてきた。
それに、全て終わってから、まとめて記事にするより、ブログらしく現在進行形の方が書いてて楽しそう…。

というわけで、「工作中の独り言」という、ある意味テンポラリーなカテゴリーを作ってみた。
ついでに、他の記事と区別できるよう、ここだけ雰囲気を変えたイメージにできないだろーか? と、思ったら、ひらめいた。

このカテゴリーだけ、CSS(スタイルシート)を適用して、デザインを変えてしまったらどうだろう? そんな事ができるのか、他で見たこと無いけど、理屈ではできそうだ。

さっそく実験。まだ泡盛2杯目だから、頭は動く。(と、いいつつ、ここで3杯目に突入)

あえて「mu 工作中の独り言」と、最初に記号を入れてカテゴリーを追加。

そして、まずは背景画像を制作。

これを「tmp_b.gif」という名前で、管理画面の画像一覧へアップロード。


次にテンプレート→カスタマイズからHTMLを改造。

各テンプレートを書き換え、こんな感じにする。
<span class="<%EntryCategory%>">
~~ブログの本文が来る場所~~
</span>
(すると、実際のHTMLでは置換タグが働いて、<span class="mu 工作中の独り言">となる)

で、スタイルシートに次の一文を追加
.mu {
 background-image: url(http://img03.ti-da.net/usr/making/tmp_b.gif);
 display: block;
}

これで、特定のカテゴリーのみにスタイルシートが適用されて、背景画像が出るという仕組み。

今後は、もっと気軽に書けるようになるかな?

関連記事