ブログカレンダーに画像を挿入する方法

知識の乏しい中、色々とスタイルシートを頑張って弄ってきましたが、その中でも一番のお気に入りが、このブログカレンダーだったりします(^^ゞ

まずはカレンダーの背景の画像の入れ方です。

サイドメニュー
ブログカレンダー（table#Calendar）
の
width:100%;
text-align:center;
の下に
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:center top;
padding-top:5px;
background-color:transparent;
margin:top 0px;
font-size:14px;
を追加します。

自分はフォントサイズを変更してますが、font-size:14px;は、なくても可。

画像サイズですが、自分は背景透過のGIFなので160×120で問題なしですが、普通の画像をの場合、270×160くらいのサイズが丁度くらいですね。

月のカレンダーの配列によって高さは変わるのでその辺は微調整してください。

次は、当日の所にアイコン的画像を挿入します。

同じく、サイドメニュー
ブログカレンダー当日（table#Calendar td.today）
の
background:#〇〇〇〇〇〇;
を削除して
background-image:url(アイコン的な画像URL);
background-position:center top;
background-repeat:no-repeat;
color:rgba(0,0,0,0);
を追加

画像サイズは、20×20までくらいが収まりが良さそうです。

その下にある
ブログカレンダー当日リンク
ブログカレンダー当日リンク(訪問済み)
を
color:rgba(0,0,0,0);
に変更で一応完成です。

自分は、ここにも以前に載せてるランダム君（http://minkara.carview.co.jp/userid/585601/car/2334972/4116009/note.aspx）を導入してるので背景、当日ともリロードの度に画像が変わります。

ブログカレンダー当日関係の所に貼り付けてる
color:rgba(0,0,0,0);
ですが、これがないと写真の様に、当日の日付の所の画像に数字がかぶります

これを追加する事により当日の数字が透明になって、アイコン画像にかぶる事なく表示されます。

ちなみに、この写真の背景画像の木星ですが、ランダム君の機能にあるレア画像（100分の１の確率）に設定してたのですが、この写真撮る時、たまたま出現しました。

自分でも滅多に見る事は少なく折角なので、この写真に使いました(笑)

最後になりますが、自分は当日にリンク（ブログアップのある日）がある日のみですが、マウスオーバー時に日付が表示される様にしてます。
（プリントスクリーンの関係で画像にカーゾルは写ってませんが、実際はカーソルが当日の真上にあります）

ブログカレンダー当日リンク(マウスオーバー)【table#Calendar td.today a:hover】
は
color:#ff0000;
にしてます。
初めの状態を覚えてないので何とも言えませんがもしかしたら最初からこうだったかも？しれません…

color:rgba(0,0,0,0);
にするとマウスオーバーでも数字は表示されません。

これまでの画像ですが、当日の日付がバラバラなのは、プリントスクリーン（スクショ）を撮った日付が違うだけで深い意味はありません。

関連情報はランダム君を作成された蠍座の車さんのブログです。
いつもながら作成された、蠍座の車さんには感謝です。