CSS カレンダーをかわいく 3
サンプルの下にＣＳＳをつけました
好きなカレンダー下にあるＣＳＳを自分のＣＳＳの最後にコピペするだけで
サンプルと同じになるはずです
マウスを当てたときの変化も確認できます・・・・
カレンダー№ が同じ物は違いは色だけです
慣れてきたら好きな色に変更下さい
設置できましたらコメントをいただけると助かります
皆様の実際どうなるのか参考になりますし
どのタイプが人気があるのか知りたいんで・・・・ m(_ _)m
カレンダー04
/*■■ カレンダー０４ ■■*/
#calendar table {/*全体*/
color:#999999;/*文字色*/
}
#calendar table caption{/*月*/
color:#666666;/*文字色*/
font-weight:bold;/*太文字*/
}
#calendar table caption a{/*前月翌月*/
color:#666666;/*文字色*/
padding: 3px 15px 0;
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border-right: 1px #666666 solid;/*線の太さ 色 線種*/
border-bottom: 2px #666666 solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color:#666666;/*文字色*/
background-color:#e0e0e0; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #666666; /* セルの背景色 */
}
#calendar table th.sun {/*日曜*/
color: #ff0000;/*文字色*/
}
#calendar table th.sat {/*土曜*/
color: #0000ff;/*文字色*/
}
カレンダー05
/*■■ カレンダー０５ ■■*/
#calendar table {/*全体*/
color:#999999 ;/*文字色*/
}
#calendar table caption a{/* <<と>> */
color:#666666;/*文字色*/
text-decoration: none; /* リンク文字の下線消す */
}
#calendar table caption{/*月*/
color:#666666;/*文字色*/
border-bottom: 1px #666666 dotted;/*線の太さ 色 線種*/
padding: 3px 15px 5px;
}
#calendar table th{/*曜日*/
color:#666666;/*文字色*/
}
#calendar table td{/*日にち*/
border-right: 1px #666666 solid;/*線の太さ 色 線種*/
border-bottom: 1px #666666 solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color:#666666;/*文字色*/
background-color:#e0e0e0; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #666666; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ff0000;/*文字色*/
}
#calendar table .sat{/*土曜*/
color:#0000ff;/*文字色*/
}
カレンダー06
/*■■ カレンダー０６ ■■*/
#calendar table {/*全体*/
color: #999999;/*全体の文字色*/
border-collapse: collapse;
}
#calendar table caption a,
#calendar table caption{/*月*/
color: #ffffff;/*文字色*/
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border: 1px #ffffff solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color: #000000;/*文字色*/
background-color: #ffffff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
font-weight: normal;
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #999999; /* セルの背景色 */
}
カレンダー04
/*■■ カレンダー０４ ■■*/
#calendar table {/*全体*/
color:#ff33ff;/*文字色*/
}
#calendar table caption{/*月*/
color:#ff33ff;/*文字色*/
font-weight:bold;/*太文字*/
}
#calendar table caption a{/*前月翌月*/
color:#ff33ff;/*文字色*/
padding: 3px 15px 0;
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border-right: 1px #ff33ff solid;/*線の太さ 色 線種*/
border-bottom: 2px #ff33ff solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color:#ff00ff;/*文字色*/
background-color: #ffccff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #ff00ff; /* セルの背景色 */
}
#calendar table th.sun {/*日曜*/
color: #ff0000;/*文字色*/
}
#calendar table th.sat {/*土曜*/
color: #0000ff;/*文字色*/
}
カレンダー05
/*■■ カレンダー０５ ■■*/
#calendar table {/*全体*/
color:#ff33ff ;/*文字色*/
}
#calendar table caption a{/* <<と>> */
color:#ff33ff;/*文字色*/
text-decoration: none; /* リンク文字の下線消す */
}
#calendar table caption{/*月*/
color:#ff33ff;/*文字色*/
border-bottom: 1px #ff33ff dotted;/*線の太さ 色 線種*/
padding: 3px 15px 5px;
}
#calendar table th{/*曜日*/
color:#ff33ff;/*文字色*/
}
#calendar table td{/*日にち*/
border-right: 1px #ff33ff solid;/*線の太さ 色 線種*/
border-bottom: 1px #ff33ff solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color:#ffffff;/*文字色*/
background-color: #ff00cc; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ff00cc;/*文字色*/
background-color: #ffff66; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ff0000;/*文字色*/
}
#calendar table .sat{/*土曜*/
color:#0000ff;/*文字色*/
}
カレンダー06
/*■■ カレンダー０６ ■■*/
#calendar table {/*全体*/
color: #ff33ff;/*全体の文字色*/
border-collapse: collapse;
}
#calendar table caption a{/* <<と>> */
color: #ff33ff;
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border: 1px #ff33ff solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color:#ff00ff;/*文字色*/
background-color: #ffccff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #ff00ff; /* セルの背景色 */
}
カレンダー04
/*■■ カレンダー０４ ■■*/
#calendar table {/*全体*/
color:#ffffcc;/*文字色*/
}
#calendar table caption{/*月*/
color:#ff33ff;/*文字色*/
font-weight:bold;/*太文字*/
}
#calendar table caption a{/*前月翌月*/
color:#ff33ff;/*文字色*/
padding: 3px 15px 0;
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border-right: 1px #ff33ff solid;/*線の太さ 色 線種*/
border-bottom: 2px #ff33ff solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color:#ff00ff;/*文字色*/
background-color: #ffccff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #ff00ff; /* セルの背景色 */
}
#calendar table th.sun {/*日曜*/
color: #ff1493;/*文字色*/
}
#calendar table th.sat {/*土曜*/
color: #0000ff;/*文字色*/
}
カレンダー05
/*■■ カレンダー０５ ■■*/
#calendar table {/*全体*/
color:#ffffff ;/*文字色*/
}
#calendar table caption a{/* <<と>> */
color:#ffffff;/*文字色*/
text-decoration: none; /* リンク文字の下線消す */
}
#calendar table caption{/*月*/
color:#ffffff;/*文字色*/
border-bottom: 1px #ff33ff dotted;/*線の太さ 色 線種*/
padding: 3px 15px 5px;
}
#calendar table th{/*曜日*/
color:#ffffff;/*文字色*/
}
#calendar table td{/*日にち*/
border-right: 1px #ff33ff solid;/*線の太さ 色 線種*/
border-bottom: 1px #ff33ff solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color:#ff99ff;/*文字色*/
background-color: #ff00cc; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ff00cc;/*文字色*/
background-color: #ffff66; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ff0000;/*文字色*/
}
#calendar table .sat{/*土曜*/
color:#0000ff;/*文字色*/
}
カレンダー06
/*■■ カレンダー０６ ■■*/
#calendar table {/*全体*/
color: #ffffcc;/*全体の文字色*/
border-collapse: collapse;
}
#calendar table caption a{/* <<と>> */
color: #ffffcc;
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border: 1px #ff33ff solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color:#ff00ff;/*文字色*/
background-color: #ffccff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #ff00ff; /* セルの背景色 */
}
カレンダー04
/*■■ カレンダー０４ ■■*/
#calendar table {/*全体*/
color: #666666;/*全体の文字色*/
}
#calendar table caption a,
#calendar table caption{/*月*/
color: #666666;/*文字色*/
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border-right: 1px #999999 solid;/*線の太さ 色 線種*/
border-bottom: 1px #999999 solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color: #999999;/*文字色*/
background-color: #333333; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
padding:3px 0px;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #999999; /* セルの背景色 */
}
#calendar table th.sun {/*日曜*/
color: #ff1493;/*文字色*/
}
#calendar table th.sat {/*土曜*/
color: #0000ff;/*文字色*/
}
カレンダー05
/*■■ カレンダー０５ ■■*/
#calendar table {/*全体*/
color:#add8e6 ;/*文字色*/
}
#calendar table caption a{/*<< と >>*/
color:#add8e6;/*文字色*/
text-decoration: none; /* リンク文字の下線消す */
}
#calendar table caption{/*月*/
color:#add8e6;/*文字色*/
border-bottom: 1px #b0e0e6 dotted;/*線の太さ 色 線種*/
padding: 3px 15px 5px;
}
#calendar table th{/*曜日*/
color:#add8e6;/*文字色*/
}
#calendar table td{/*日にち*/
border-right: 1px #4169e1 solid;/*線の太さ 色 線種*/
border-bottom: 1px #4169e1 solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color:#0000cd;/*文字色*/
background-color: #b0e0e6; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #9999cc; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ff0000;/*文字色*/
}
#calendar table .sat{/*土曜*/
color:#0000ff;/*文字色*/
}
カレンダー06
/*■■ カレンダー０６ ■■*/
#calendar table {/*全体*/
color: #999999;/*全体の文字色*/
border-collapse: collapse;
}
#calendar table caption a,
#calendar table caption{/*月*/
color: #ffffff;/*文字色*/
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border: 1px #ffffff solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color: #000000;/*文字色*/
background-color: #ffffff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
font-weight: normal;
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #999999; /* セルの背景色 */
}
CSS カレンダーをかわいく 2
あっ・・・ タイトルかわいくなんてつけてしまいましたが
・・・前の記事の続きなんで
見ればわかるから・・・まっいいか
コレのやり方を皆さんにわかるように説明するのは大変なんで・・・・（文才のない私にとって）
サンプルの下にＣＳＳをつけました
好きなカレンダー下にあるＣＳＳを自分のＣＳＳの最後にコピペするだけで
サンプルと同じになるはずです
カレンダー№ が同じ物は違いは色だけです
慣れてきたら好きな色に変更下さい
設置できましたらコメントをいただけると助かります
皆様の実際どうなるのか参考になりますし
どのタイプが人気があるのか知りたいんで・・・・ m(_ _)m
カレンダー01
/*■■ カレンダー０１ ■■*/
#calendar table {/*全体*/
color: #666666;/*文字色*/
border-left: 1px #e0e0e0 solid;/*線の太さ 色 線種*/
border-right: 1px #e0e0e0 solid;
border-bottom: 1px #e0e0e0 solid;
}
#calendar table caption{/*月*/
border-top: 1px #e0e0e0 solid;/*線の太さ 色 線種*/
border-left: 1px #e0e0e0 solid;
border-right: 1px #e0e0e0 solid;
padding: 3px 0 0 0;
}
.calendar table.w01p caption a{/* << と >> */
color: #666666;/*文字色*/
}
#calendar table th{/*曜日*/
border: 1px #e0e0e0 solid;/*線の太さ 色 線種*/
padding:2px 0 0 2px;
}
#calendar table td{/*日*/
border: 1px #e0e0e0 solid;/*線の太さ 色 線種*/
color:#999999;/*文字色*/
}
#calendar table td a{/*記事のある日*/
color:#666666;/*文字色*/
background-color:#e0e0e0; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #666666; /* セルの背景色 */
}
color: #666666;/*文字色*/
}
#calendar table th{/*曜日*/
border: 1px #e0e0e0 solid;/*線の太さ 色 線種*/
padding:2px 0 0 2px;
}
#calendar table td{/*日*/
border: 1px #e0e0e0 solid;/*線の太さ 色 線種*/
color:#999999;/*文字色*/
}
#calendar table td a{/*記事のある日*/
color:#666666;/*文字色*/
background-color:#e0e0e0; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #666666; /* セルの背景色 */
}
カレンダー02
/*■■ カレンダー０２ ■■*/
#calendar table {/*全体*/
color:#666666;/*文字色*/
border: 1px #666666 solid;/*線の太さ 色 線種*/
}
#calendar table caption{/*月*/
color:#ffffff;/*文字色*/
background-color:#666666;/* セルの背景色 */
font-size: 1.2em;/*文字サイズ*/
border: 1px #666666 solid;/*線の太さ 色 線種*/
border-collapse: collapse;
padding: 3px 15px 0;
}
#calendar table caption a{/* <<と>> */
color:#ffffff;/*文字色*/
font-size: 1.0em;/*文字サイズ*/
padding: 3px 15px 0;
}
#calendar table th{/*曜日*/
border: 1px #666666 dotted;/*線の太さ 色 線種*/
padding:2px 0 0 2px;
}
#calendar table td a{/*記事のある日*/
color:#666666;/*文字色*/
border: 1px #e0e0e0 solid;/*線の太さ 色 線種*/
background-color: #e0e0e0; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #666666; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ffffff;/*文字色*/
background-color:#ff4080;/* セルの背景色 */
}
#calendar table .sat{/*土曜*/
color:#00ffff;/*文字色*/
background-color:#c0ffff;/* セルの背景色 */
}
カレンダー03
/*■■ カレンダー０３ ■■*/
#calendar table {/*全体*/
color:#e0e0e0 ;/*文字色*/
border: 2px #bfbfbf solid;/*線の太さ 色 線種*/
font-weight:bold;/*太文字*/
font-size: 1.3em;/*文字サイズ*/
}
#calendar table caption a{/* <<と>> */
color:#ffffff;/*文字色*/
}
#calendar table caption{/*月*/
color:#ffffff;/*文字色*/
background-color:#bfbfbf;/* セルの背景色 */
padding: 3px 15px 0;
}
#calendar table th{/*曜日*/
color:#bfbfbf;/*文字色*/
border: 1px #bfbfbf solid;/*線の太さ 色 線種*/
padding:3px 0px;
}
#calendar table td{/*日にち*/
border: 1px #bfbfbf solid;/*線の太さ 色 線種*/
padding:3px 0px;
}
#calendar table td a{/*記事のある日*/
color:#ffffff;/*文字色*/
background-color: #bfbfbf; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #666666; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ff4080;/*文字色*/
}
#calendar table .sat{/*土曜*/
color:#80ffff;/*文字色*/
}
#calendar table {/*全体*/
color:#e0e0e0 ;/*文字色*/
border: 2px #bfbfbf solid;/*線の太さ 色 線種*/
font-weight:bold;/*太文字*/
font-size: 1.3em;/*文字サイズ*/
}
#calendar table caption a{/* <<と>> */
color:#ffffff;/*文字色*/
}
#calendar table caption{/*月*/
color:#ffffff;/*文字色*/
background-color:#bfbfbf;/* セルの背景色 */
padding: 3px 15px 0;
}
#calendar table th{/*曜日*/
color:#bfbfbf;/*文字色*/
border: 1px #bfbfbf solid;/*線の太さ 色 線種*/
padding:3px 0px;
}
#calendar table td{/*日にち*/
border: 1px #bfbfbf solid;/*線の太さ 色 線種*/
padding:3px 0px;
}
#calendar table td a{/*記事のある日*/
color:#ffffff;/*文字色*/
background-color: #bfbfbf; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #666666; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ff4080;/*文字色*/
}
#calendar table .sat{/*土曜*/
color:#80ffff;/*文字色*/
}
カレンダー01
/*■■ カレンダー０１ ■■*/
#calendar table {/*全体*/
color: #ffc0ff;/*文字色*/
border-left: 1px #ff80ff solid;/*線の太さ 色 線種*/
border-right: 1px #ff80ff solid;
border-bottom: 1px #ff80ff solid;
}
#calendar table caption{/*月*/
border-top: 1px #ff80ff solid;/*線の太さ 色 線種*/
border-bottom: 1px #ff80ff solid;
}
#calendar table caption{/*月*/
border-top: 1px #ff80ff solid;/*線の太さ 色 線種*/
border-left: 1px #ff80ff solid;
border-right: 1px #ff80ff solid;
padding: 3px 0 0 0;
}
#calendar table caption a{/* << と >> */
color: #ffc0ff;/*文字色*/
}
#calendar table th{/*曜日*/
border: 1px #ff80ff solid;/*線の太さ 色 線種*/
padding:2px 0 0 2px;
}
#calendar table td{/*日*/
border: 1px #ff80ff solid;/*線の太さ 色 線種*/
color:#ffc0ff;/*文字色*/
}
#calendar table td a{/*記事のある日*/
color:#ff80ff;/*文字色*/
background-color:#ffccff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #ff00ff; /* セルの背景色 */
}
border-right: 1px #ff80ff solid;
padding: 3px 0 0 0;
}
#calendar table caption a{/* << と >> */
color: #ffc0ff;/*文字色*/
}
#calendar table th{/*曜日*/
border: 1px #ff80ff solid;/*線の太さ 色 線種*/
padding:2px 0 0 2px;
}
#calendar table td{/*日*/
border: 1px #ff80ff solid;/*線の太さ 色 線種*/
color:#ffc0ff;/*文字色*/
}
#calendar table td a{/*記事のある日*/
color:#ff80ff;/*文字色*/
background-color:#ffccff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #ff00ff; /* セルの背景色 */
}
カレンダー02
/*■■ カレンダー０２ ■■*/
#calendar table {/*全体*/
color:#ffc0ff;/*文字色*/
border: 1px #ff80ff solid;/*線の太さ 色 線種*/
}
#calendar table caption{/*月*/
color:#ffffff;/*文字色*/
background-color:#ff80ff;/* セルの背景色 */
font-size: 1.2em;/*文字サイズ*/
border-collapse: collapse;
padding: 3px 15px 0;
}
#calendar table caption a{/* <<と>> */
color:#ffffff;/*文字色*/
background-color:#ff80ff;/* セルの背景色 */
font-size: 1.0em;/*文字サイズ*/
padding: 3px 15px 0;
}
#calendar table th{/*曜日*/
border: 1px #ff80ff dotted;/*線の太さ 色 線種*/
padding:2px 0 0 2px;
}
#calendar table td a{/*記事のある日*/
color:#ff00ff;/*文字色*/
border: 1px #ff80ff solid;/*線の太さ 色 線種*/
background-color: #ffccff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #ff00ff; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ffffff;/*文字色*/
background-color:#ff4080;/* セルの背景色 */
}
#calendar table .sat{/*土曜*/
color:#00ffff;/*文字色*/
background-color:#c0ffff;/* セルの背景色 */
}
background-color:#ff80ff;/* セルの背景色 */
font-size: 1.0em;/*文字サイズ*/
padding: 3px 15px 0;
}
#calendar table th{/*曜日*/
border: 1px #ff80ff dotted;/*線の太さ 色 線種*/
padding:2px 0 0 2px;
}
#calendar table td a{/*記事のある日*/
color:#ff00ff;/*文字色*/
border: 1px #ff80ff solid;/*線の太さ 色 線種*/
background-color: #ffccff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #ff00ff; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ffffff;/*文字色*/
background-color:#ff4080;/* セルの背景色 */
}
#calendar table .sat{/*土曜*/
color:#00ffff;/*文字色*/
background-color:#c0ffff;/* セルの背景色 */
}
カレンダー03
/*■■ カレンダー０３ ■■*/
#calendar table {/*全体*/
color:#ffc0ff ;/*文字色*/
border: 2px #ff80ff solid;/*線の太さ 色 線種*/
font-weight:bold;/*太文字*/
font-size: 1.3em;/*文字サイズ*/
}
#calendar table caption a{/* <<と>> */
color:#ffffff;/*文字色*/
background-color:#ff80ff;/* セルの背景色 */
padding: 3px 15px 0;
}
#calendar table caption{/*月*/
color:#ffffff;/*文字色*/
background-color:#ff80ff;/* セルの背景色 */
padding: 3px 15px 0;
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border: 1px #ff80ff solid;/*線の太さ 色 線種*/
padding:3px 0px;
}
#calendar table td a{/*記事のある日*/
color:#ff00ff;/*文字色*/
background-color: #ffccff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #ff00ff; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ff4080;/*文字色*/
}
#calendar table .sat{/*土曜*/
color:#80ffff;/*文字色*/
}
カレンダー01
/*■■ カレンダー０１ ■■*/
#calendar table {/*全体*/
color: #ffffff;/*文字色*/
border-left: 1px #ff33ff solid;/*線の太さ 色 線種*/
border-right: 1px #ff33ff solid;
border-bottom: 1px #ff33ff solid;
padding:0px;
}
#calendar table caption{/*月*/
border-top: 1px #ff33ff solid;/*線の太さ 色 線種*/
border-left: 1px #ff33ff solid;
border-right: 1px #ff33ff solid;
padding: 3px 0 0 0;
}
#calendar table caption a{
color: #ffffff;/*文字色*/
}
#calendar table th{/*曜日*/
border: 1px #ff33ff solid;/*線の太さ 色 線種*/
padding:2px 0 0 2px;
}
#calendar table td{/*日*/
border: 1px #ff33ff solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color: #ff33ff;/*文字色*/
background-color: #ffccff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #ff0000; /* セルの背景色 */
}
padding:0px;
}
#calendar table caption{/*月*/
border-top: 1px #ff33ff solid;/*線の太さ 色 線種*/
border-left: 1px #ff33ff solid;
border-right: 1px #ff33ff solid;
padding: 3px 0 0 0;
}
#calendar table caption a{
color: #ffffff;/*文字色*/
}
#calendar table th{/*曜日*/
border: 1px #ff33ff solid;/*線の太さ 色 線種*/
padding:2px 0 0 2px;
}
#calendar table td{/*日*/
border: 1px #ff33ff solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color: #ff33ff;/*文字色*/
background-color: #ffccff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #ff0000; /* セルの背景色 */
}
カレンダー02
/*■■ カレンダー０２ ■■*/
#calendar table {/*全体*/
color:#ffffcc;/*文字色*/
border: 1px #ff33ff solid;/*線の太さ 色 線種*/
}
#calendar table caption{/*月*/
color:#ffffff;/*文字色*/
background-color:#ff80ff;/* セルの背景色 */
border-top: 1px #ff33ff solid;/*線の太さ 色 線種*/
border-left: 1px #ff33ff solid;
border-right: 1px #ff33ff solid;
font-size: 1.2em;/*文字サイズ*/
}
#calendar table caption a{/*前月翌月*/
color:#ffffff;/*文字色*/
font-size: 1.0em;/*文字サイズ*/
padding: 0 25px;
}
#calendar table th{/*曜日*/
padding:2px 0 0 2px;
}
#calendar table td a{/*記事のある日*/
color:#ff00ff;/*文字色*/
border: 1px #ff80ff solid;/*線の太さ 色 線種*/
background-color: #ffccff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #ff00ff; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ffffff;/*文字色*/
background-color:#ff4080;/* セルの背景色 */
}
#calendar table .sat{/*土曜*/
color:#00ffff;/*文字色*/
background-color:#c0ffff;/* セルの背景色 */
}
カレンダー03
/*■■ カレンダー０３ ■■*/
#calendar table {/*全体*/
color:#ffffcc;/*文字色*/
border: 2px #ff33ff solid;/*線の太さ 色 線種*/
font-size: 1.2em;/*文字サイズ*/
}
#calendar table caption a{/* <<と>> */
color:#ffffff;/*文字色*/
padding: 3px 15px 0;
}
#calendar table caption{/*月*/
color:#ffffff;/*文字色*/
background-color:#ff33ff;/* セルの背景色 */
padding: 3px 15px 0;
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border: 1px #ff33ff solid;/*線の太さ 色 線種*/
padding:3px 0px;
}
#calendar table td a{/*記事のある日*/
color:#ffffff;/*文字色*/
background-color: #ff33ff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ff00ff;/*文字色*/
background-color: #ffccff; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ff4080;/*文字色*/
}
#calendar table .sat{/*土曜*/
color:#80ffff;/*文字色*/
}
カレンダー01
/*■■ カレンダー０１ ■■*/
#calendar table {/*全体*/
color: #666666;/*文字色*/
border-left: 1px #999999 solid;/*線の太さ 色 線種*/
border-right: 1px #999999 solid;
border-bottom: 1px #999999 solid;
padding:0px;
}
#calendar table caption{/*月*/
color: #999999;/*文字色*/
border-top: 1px #999999 solid;/*線の太さ 色 線種*/
border-left: 1px #999999 solid;
border-right: 1px #999999 solid;
padding: 3px 0 0 0;
}
#calendar table caption a{/*<< と >>*/
color: #999999;/*文字色*/
}
#calendar table th{/*曜日*/
border: 1px #999999 solid;/*線の太さ 色 線種*/
padding:2px 0 0 2px;
}
#calendar table td{/*日*/
border: 1px #999999 solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color: #999999;/*文字色*/
background-color: #555555; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #999999; /* セルの背景色 */
}
カレンダー02
/*■■ カレンダー０２ ■■*/
#calendar table {/*全体*/
color:#FFFFFF;/*文字色*/
border: 1px #999999 solid;/*線の太さ 色 線種*/
}
#calendar table caption{/*月*/
color:#ffffff;/*文字色*/
background-color:#999999;/* セルの背景色 */
font-size: 1.2em;/*文字サイズ*/
border-collapse: collapse;
padding: 3px 15px 0;
}
#calendar table caption a{/*<< と >>*/
color:#ffffff;/*文字色*/
background-color:#999999;/* セルの背景色 */
font-size: 1.0em;/*文字サイズ*/
padding: 3px 15px 0;
}
#calendar table th{/*曜日*/
padding:2px 0 0 2px;
}
#calendar table td a{/*記事のある日*/
color:#ffffff;/*文字色*/
border: 1px #666666 solid;/*線の太さ 色 線種*/
background-color: #999999; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #333333; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ffffff;/*文字色*/
background-color:#ff4080;/* セルの背景色 */
}
#calendar table .sat{/*土曜*/
color:#999999;/*文字色*/
background-color:#c0ffff;/* セルの背景色 */
}
カレンダー03
/*■■ カレンダー０３ ■■*/
#calendar table {/*全体*/
color:#999999 ;/*文字色*/
border: 2px #ffffff solid;/*線の太さ 色 線種*/
font-weight:bold;/*太文字*/
font-size: 1.3em;/*文字サイズ*/
}
#calendar table caption{/*月*/
color:#666666;/*文字色*/
background-color:#ffffff;/* セルの背景色 */
}
#calendar table caption a{/*<< と >>*/
color:#666666;/*文字色*/
background-color:#ffffff;/* セルの背景色 */
padding: 3px 15px 0;
}
#calendar table th{/*曜日*/
color:#ffffff;/*文字色*/
border: 1px #ffffff solid;/*線の太さ 色 線種*/
padding:3px 0px;
}
#calendar table td{/*日にち*/
border: 1px #ffffff solid;/*線の太さ 色 線種*/
padding:3px 0px;
}
#calendar table td a{/*記事のある日*/
color:#333333;/*文字色*/
background-color: #ffffff; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color: #999999; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ff4080;/*文字色*/
}
#calendar table .sat{/*土曜*/
color:#80ffff;/*文字色*/
}
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;/* リンクの下線 */