スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

F2ブログでカテゴリ別もしくは月別に背景画像を指定する方法

前回のエントリで全てのコンテンツを同色でまとめるとどのようなテーマの一覧を閲覧しているのか直感的に理解し難いと書きました。そしてその一つの解決方法として背景画像を工夫するという方法を提示したのでその実践と説明です。

使用する変数は <%cno> と <%now_month> で、場合によっては <%now_year> や <%sub_title> でも代用可能です。これらをclass名に利用することによってコンテンツ別の背景画像を指定する事が可能になります。先ずはカテゴリ別に背景色を指定する場合です。

.cateback1 {background-image:url(photo1.jpg);}
.cateback2 {background-image:url(photo2.jpg);}
.cateback3 {background-image:url(photo3.jpg);}
<body class="cateback<%cno>">

前者がCSS、後者がHTMLの一例です(bodyでなくとも構いません)。<%cno> にそれぞれの カテゴリNo が代入される事によってclass名が変化するという仕掛けです。この時に気をつけるべき箇所は、<%cno> がどのような数字に変わるかという事です。これはカテゴリの順番によって異なりますので各自で確認してください。そのカテゴリ一覧ページのアドレス(blog-category-??.html)を見れば直ぐにわかります。さて、続いては月別一覧です。

.monthback1 {background-image:url(photo4.jpg);}
.monthback2 {background-image:url(photo5.jpg);}
.monthback3 {background-image:url(photo6.jpg);}
<body class="monthback<%now_month>">

これも原理はカテゴリの場合と同じで今度は <%now_month> を用います。これは01~12の数字に変わりますので直感的に理解し易いと思います。各月毎に合った背景画像を指定してみてはいかがでしょうか。また、更に細かく年度別に指定したい場合は <%now_year> を加えると2006などの数字が付加されて年度別の区別が可能です。面倒ならば <%sub_title> にすれば一つで200601のような数字が代入されます。

両方に言える事で、使用するときに注意すべき事はclass名を数字のみ(もしくは先頭を数字)にしない事です。必ず変数の前に何らかの文字を加えて置く必要があります。画像の場所や繰り返し、固定などは自由に設定してみて下さい。

使用例は当サイトの一覧ページをご覧下さい。未だテーマに合った画像が見つからないので 1月、2月、10月、12月、Firefox、時事、音楽、本、にしか指定されていません…と思ったのですがIEだと現状では最初に指定したものしか表示されないようです。CSSの書き方に問題があるのだとは思うのですが原因は不明です。Firefox や Opera では意図した通りの表示になっています。IEで上手く行かない原因が解る方は教えて頂ける助かります。それからオススメの(写真)素材配布サイトの情報などもご紹介して頂ければ嬉しく思います。

スポンサーサイト

コメント一覧

コメントの投稿欄

Copyright © 2005 rara All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。