CSS カレンダーに画像をつけてカレンダーらしく？
なんか・・・・・
むずかしく、むずかしくやっていると、いうか
よく考えないで思いつきでやっちゃってる・・・
フォローしておくとチャント完成はしているんですよ・・・・
タイトル文字→画像にとか・・・今回のカレンダーとか・・・・
ただ・・・・
もっとカンタンにできる方法があるって～だけですから・・・・
やり終わって、あとで気がつくだけですから・・・・・
今回は・・・・
backgroundに複数の画像を配置できないので
ペンギンのアニメーションGIFをバラして・・・・５０枚くらいになりました
１枚づつタイトル画像をくっつけて・・・それを５０枚加工して・・・
全部をあわせて・・・またアニメーションに戻して・・・・・
・・・・・なんて、面倒なことやっていました・・・
でも 、落ち着いて考えてみると・・・・・・・
？？少し前にも同じこと書いたような・・・・・
下がダメなら・・・上があるじゃん・・・・！！
ってふつーならすぐ気が付くのでしょうが・・・・・
ようは、
タイトルの下ではなくて
カレンダーの上ってことなんです
これならすでにタイトルに画像を使用している方でも導入可能ってことで紹介できます
例のごとく、青字部分をCSSの下にコピペしてください
#calendar .menu_frame{
margin:5px auto;
padding:130px 0 0 0;
background-image:url(画像のURL);
background-repeat : no-repeat;
background-position: center top;
}
カレンダー自体の背景に画像を使う場合
#calendar .menu_frame{
background-image:url(画像のURL);
background-repeat : no-repeat;
background-position: center bottom;
}
※画像を選ばないとカレンダーが見難くなります
か、数字を白くしちゃうとか・・・・
前もって画像のサイズをカレンダーに合わせておいてください
ちなみに・・・・
曜日の色変えは(日を赤に、土を青にする場合)
#calendar .sun{
color: #ff0000;
}
#calendar .sat{
color: #0000ff;
}
※スキンによっては変更できない場合があります
※画像はサイドの幅に収まるサイズに加工してから使用ください