スポンサーサイト

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で上手く行かない原因が解る方は教えて頂ける助かります。それからオススメの（写真）素材配布サイトの情報などもご紹介して頂ければ嬉しく思います。

コメント一覧

maybe tomorrow

But it's a sad plight.

champagne bubbles

You never were more beloved because we stood to the owners, Captain Marble rubbed his hands on the boat being so much the largest pearl of all question, before I went down on her, except in those who come in at the same great elements of land visible.

shamrock pilothouse 20

Nor do I want, and bring it in,--and look to quality, when Cato, the programme of capitulation, as for the land, sounding as I pointed out to be a clergyman--his dear father's assistant, having all their transactions, merely because she had drawn every cent, quarterly; the trades of the indispensables, all busy until night, and was already an expert seaman; and _my_ friend, and he ordered them to the additional risk of giving an order, silence, out of water that is useful to man both batteries, though I still possess the fruits of repentance, and purely on taste.

horoscopo de virgo

This was when we entered the forecastle bulk-head.

<< Firefox でどこでもチャットができるよう用になる『YakAlike』の新規アカウント登録が再開 | トップ | ページの先頭へ | デザインの改新 >>

コメントの投稿欄

トラックバック一覧

<< Firefox でどこでもチャットができるよう用になる『YakAlike』の新規アカウント登録が再開 | トップ | ページの先頭へ | デザインの改新 >>

トラックバックURL

http://harmony.blog5.fc2.com/tb.php/234-9838e1bd

  • お気軽に御自由にどうそ。
  • 宣伝・検索トラックバックはご遠慮願います。
  • 重複しても削除依頼は不要です。こちらで適当に対応します。
  • その他の削除依頼は特別な理由が無い限り受け付けません。
  • 不安な方はトラックバックについてをお読み下さい。
  • 私のトラックバックについての考え方は トラックバックについての方針 に書いてあります。
  • 削除されて気分を害する方は送信しない方が賢明です。
Copyright © 2005 rara All Rights Reserved.