ここのサーバがあまりにもあまりにも軽いんで（つかこれが普通？）サイトのところどころに画像を使っている。それでも、細かい絵しか出さないところが小市民さたる所以。
さて、FC2の単変数とCSSの属性セレクタを組み合わせると簡単にカテゴリ別アイコンをつけることができる。スクリプトでやる方法よりもとっつきやすいし、今後は主流になるでしょう。
ただし、CSS2を正しく解釈できるモダンブラウザ（Firefox、Netscape6up、 opera、Mac版IE、safari 他）が必要です。Win-IEは不可。（表示されないだけで実害は無いけどね）
さあ、今すぐあなたも Get Firefox !
〜<div class="entry"><h2><%topentry_year>/<%topentry_month>/<%topentry_day>(<%topentry_wayoubi>)</h2><h3 title="<%topentry_category>"><a href="<%topentry_link>" title="固定リンクを開く"><%topentry_minute></a></h3><div class="entry_body"><%topentry_body>〜重要なのはカテゴリアイコンを表示させるボックス（例ではh3）のtitle属性にFC2単変数の<%topentry_category>を埋め込む部分。今回はアイコンを背景に指定した例です。:before content / :after contentで要素そのものをHTMLに挿入する方法もあります。
〜h3[title] {padding-left: 45px; /* アイコンの幅＋α */background-repeat: no-repeat;background-position: 0 80%; /* アイコンの表示位置 */}h3[title="diary"] {background-image: url("カテゴリ「diary」に使用する画像のURL");}h3[title="blog"] {background-image: url("カテゴリ「blog」に使用する画像のURL");}h3[title="太田裕美"] {background-image: url("カテゴリ「太田裕美」に使用する画像のURL");}〜うちはアイコンの大きさがすべて同じなのでh3[title]で一括して余白を取っています。カテゴリ別にアイコンの大きさを変えたり特定のカテゴリにだけアイコンをつける場合、また、他のh3のtitle属性を含むものには適用したくない場合は、以下のように個々に指定します。
h3[title="カテゴリ1"]{padding: XXpx XXpx XXpx XXpx;background: url(URL1) no-repeat X Y;}タイトル属性値（＝カテゴリ名）は日本語でもOK。CSSファイルのトップに@charset "EUC-JP";を記述しておくこと。ちなみに日本語フォント名の文字化けなどもこの記述で回避できます。
Mac Safariでの文字化け回避の方法がこちらにあります。
< 現実と虚構 | 再びコメント欄のURL（らしきもの）にリンクを張る > | 表紙へ戻る |
ことわざでいうと、苦労は買ってでもしろ、です。-16日20時