TopSeesaaブログカスタマイズ>記事タイトルを色分け
2005年04月23日

記事タイトルを色分け

 SeesaaHTML編集の小技です。

 記事タイトルをカテゴリーごとに色分け。
Prog 〜 プログラミングブログ : Seesaaで自作HTMLカスタムしてみたので、もうすでにやっていますが、ちょっとおもしろそうですね。

 でもこちらの場合はカテゴリー名が英字だからできること。
 カテゴリー名に日本語を使っている場合には、うまくいきません。

 代表的な変数一覧(オブジェクト型)にはでていませんが category.id や article.id はなかなか便利な変数です。

 これを使えばカテゴリー名に日本語を使っていても、記事タイトルをカテゴリーごとに色分けできます。
 と思って、
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h2>
を<div class="<% category.id %>">で囲んでもうまくいきません。
 <% category.id %>はLoop内では使えなかったのです。

 ここでちょっと考えました。
 article.category だったら Loop内でも使えるんだから・・・
 そこで article.category.id と入れた見たら・・・ビンゴ!!
 Loop内でカテゴリーidが取り出すことができました。

と言うことで
<div class="<% article.category.id %>">
<h2 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h2>
</div>
 赤字部分を追加。

 それからスタイルシートに各カテゴリーidの頭に”.”をつけてスタイルを指定してやります。
.197086{
background:#ccccff;
}
こんな感じでカテゴリーの数だけ指定してやります。

その前に.titlでbackgroundを指定してある場合は削除しておきましょう。

 個別スタイルシートあったかな?と組み合わせれば、Seesaaブログでスタイルシートをフル活用!きむっちのBlog::五線譜に思いを乗せて・・・(各ページで左の画像が違います)のようなことが、カテゴリーごとにできますね。

*追記
サイドバーのカテゴリーもHTML編集で
<a href="<% category.page_url %>" class="<% category.id %>">
赤字部分を追加すると、カテゴリーごとの色がわかりやすいかな、と思ったのですが、あまりに派手なのでやめておきます。

この記事へのコメント
おお〜、なるほど!

確かに、idとか使ってclass指定を変えてあげれば切り替え自由ですね!
CSS設定にid埋め込みで切り替える方法は色々出来るかも知れませんね^^
Posted by きむ at 2005年04月23日 13:58
おぉぉ。category.id は知りませんでした。参考になりました。
カテゴリー名を英語にするのは、苦肉の策だったのですが、この方法はいいですね。
Posted by 77483 at 2005年04月23日 14:55
>きむさん
>77483さん
でしょ、けっこうこの.id使えそうでしょ。

Movable Typeもちょっといじっているのですが、Movable TypeでできるんだからSeesaaでもできるかな、といろいろやってみた成果です。

まだまだ、隠された変数があるかもしれませんね。
Posted by 深田 at 2005年04月23日 15:33
はじめまして。深田様。

こちらの記事を参考に、タイトルにカテゴリ別の画像をつけることができました。
ずっと前からいじりたい箇所だったのですが、やり方が分からなくて...。

カテゴリ名がもともと英字だったのでidは使用しなかったのですが、
<div class=・・・>を追加したら、カテゴリ別に背景を変えることが出来るとわかり、
大変参考になりました。

どうもありがとうございました。
Posted by shige at 2005年04月29日 18:56
返事が遅れてすみませんでした。
shige さん、コメントありがとうございます。

ブログは意見させていただきました。
良いですね、タイトル前のアイコンが、カテゴリーごとって言うのは。
色分けするよりよっぽどおしゃれです。

今後ともよろしくお願いします。
Posted by 深田 at 2005年05月06日 13:58
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/3111354
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック

カテゴリに説明を付けましょう。
Excerpt: API攻略第7回です。 第4回の解決法と言う事で、JavaScriptを使って強引にって感じですが解決しましたのでご報告します。個人的にJavaScript多用は好きではないのですがこれ位は出来ないと..
Weblog: きむっちのBlog::五線譜に思いを乗せて・・・
Tracked: 2005-06-28 02:39

ブログカスタマイズ16【カテゴリごとに画像を付ける】
Excerpt: &amp;#63870;カテゴリごとに画像を付ける …せっかく画面さっぱりさせたのに…なんだか寂しくなってしまったのです… 一目見て、「このカテゴリ」だと分かるようなものが欲しかったのよおぅ。 はじめ..
Weblog: □LOVE BEST□
Tracked: 2005-06-29 13:49
>>関連書籍
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。