記事タイトルをカテゴリーごとに色分け。
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ブログでスタイルシートをフル活用！やきむっちのＢｌｏｇ：：五線譜に思いを乗せて・・・(各ページで左の画像が違います）のようなことが、カテゴリーごとにできますね。
＊追記
サイドバーのカテゴリーもHTML編集で
<a href="<% category.page_url %>" class="<% category.id %>">
赤字部分を追加すると、カテゴリーごとの色がわかりやすいかな、と思ったのですが、あまりに派手なのでやめておきます。
確かに、idとか使ってclass指定を変えてあげれば切り替え自由ですね！
CSS設定にid埋め込みで切り替える方法は色々出来るかも知れませんね^^
カテゴリー名を英語にするのは、苦肉の策だったのですが、この方法はいいですね。
>77483さん
でしょ、けっこうこの.id使えそうでしょ。
Movable Typeもちょっといじっているのですが、Movable TypeでできるんだからSeesaaでもできるかな、といろいろやってみた成果です。
まだまだ、隠された変数があるかもしれませんね。
こちらの記事を参考に、タイトルにカテゴリ別の画像をつけることができました。
ずっと前からいじりたい箇所だったのですが、やり方が分からなくて...。
カテゴリ名がもともと英字だったのでidは使用しなかったのですが、
＜div class=･･･＞を追加したら、カテゴリ別に背景を変えることが出来るとわかり、
大変参考になりました。
どうもありがとうございました。
shige さん、コメントありがとうございます。
ブログは意見させていただきました。
良いですね、タイトル前のアイコンが、カテゴリーごとって言うのは。
色分けするよりよっぽどおしゃれです。
今後ともよろしくお願いします。