CSS カレンダーをかわいく
カレンダーをかわいく・・・・・
すでに画像を使ってかわいくしてますよ～・・・・・・って方
背景画像はすでに使っているからムリって思っていませんか・・・・・
もちのロン、まださわっていない方も
”もっと” かわいくしてみませんか～
下は実際に使っていただいている例です
ラビリンス さまの カレンダー
 |
#calendar table caption{
background: no-repeat url(画像のURL);
padding-bottom: 10px;
background-position:bottom;
}
#calendar table td{
background: no-repeat url(画像のURL);
padding-bottom: 4px;
background-position:left bottom;
}
※使用している画像は１つです 
(157×7)
non さまの カレンダー
|
#calendar table caption{
background: no-repeat url(画像のURL);
padding-bottom: 15px;
background-position:bottom;
}
#calendar table td{
background: no-repeat url(画像のURL);
padding-bottom: 6px;
background-position: bottom;
}
※使用している画像は2つです 
(139×13) 
(20×7)
☆しまにゃんこ☆ さまの カレンダー
 |
#calendar table th,
#calendar table td{
background: url(画像のURL) no-repeat;
padding-bottom: 4px;
background-position:bottom;
}
※使用している画像は１つです 
(160×3)
まず、画像を用意します
高さが3px～10pxくらいで 長さは適当でかまいません
長くても画像の表示位置で指定した部分しか表示されませんし
短ければ繰り返して表示されます（background-repeatを設定）
月の下に画像を表示させるには
#calendar table caption{/*月の下*/
background: no-repeat url(画像のURL);
padding-bottom: 10px;/*数字と画像のスキマ*/
background-position: bottom;
}
曜日の下に画像を表示させるには
#calendar table th{/*曜日の下*/
background: no-repeat url(画像のURL);
padding-bottom: 4px;/*曜日と画像のスキマ*/
background-position: bottom;
}
日付の下に画像を表示させるには
#calendar table td{/*日付の下*/
background: no-repeat url(画像のURL);
padding-bottom: 4px;/*数字と画像のスキマ*/
background-position: bottom;
}
・・・画像の表示位置・・・
background-position:left bottom;
・・・・画像の左から表示
日付の下でしたら画像の左から20pxが表示されます
background-position: bottom; ( background-position: center bottom; )
・・・・画像の中央を表示
日付の下でしたら画像の中央部分20pxが表示されます
background-position:right bottom;
・・・・画像の右から表示
日付の下でしたら画像の右から20pxが表示されます
※20px・・カレンダーのCSSで設定したサイズになりますので違う場合もあります
※曜日、日付の下はつながっていません・・・約20pxの画像が7つ配置されています
tableの構造上、つなげて1つの画像にすることは出来ません
ですので・・・
月の下に表示する画像1つあれば曜日の下、日付の下も表示できます
もちろん、月の下と曜日の下と日付の下と全部違う画像を使うことも可能です
＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋
おさらいです・・・カレンダーのCSS設定
カレンダー全体の設定
下で設定しない部分の色など・・・記事のない日付など
#calendar table {/*全体*/
color: #666666;/*文字色*/
}
月の設定
#calendar caption {/*月*/
color:#333333;/*文字色*/
}
前月・翌月 << と >> の設定
#calendar caption a{/* << と >> */
color:#333333;/*文字色*/
}
日曜の設定
#calendar .sun {/*日曜*/
color:#FF0000;/*文字色*/
}
土曜の設定
#calendar .sat{/*土曜*/
color:#0066FF;/*文字色*/
}
※月～金もそれぞれ設定できます
全部色を変えて虹色にしてみます？
記事のある日付
#calendar td a {/*記事のある日付*/
color:#333333;/*文字色*/
background: url(画像のURL);
background-repeat: no-repeat;
background-position: center;
display: block;
}
記事のある日付にマウスがのったとき
#calendar td a:hover {/*マウスオーバー*/
color:#666666;/*文字色*/
background: url(画像のURL);
background-repeat: no-repeat;
background-position: center;
display: block;
}
・・・他にも好みで組み合わせてください
※ font-weight:bold;/*太文字*/
※ font-style: italic;/*斜体*/
※ text-decoration: none; /* リンクの下線消す */
※ text-decoration: underline;/* リンクの下線 */