CSS カレンダーをかわいく 7
サンプルの下にＣＳＳをつけました
好きなカレンダー下にあるＣＳＳを自分のＣＳＳの最後にコピペするだけで
サンプルと同じになるはずです
マウスを当てたときの変化も確認できます・・・・
カレンダー№ が同じ物は違いは色だけです
慣れてきたら好きな色に変更下さい
設置できましたらコメントをいただけると助かります
皆様の実際どうなるのか参考になりますし
どのタイプが人気があるのか知りたいんで・・・・ m(_ _)m
カレンダー19
/*■■ カレンダー１９ ■■*/
#calendar table {/*全体*/
color: #666666;/*文字色*/
background-color: #c0c0c0; /* セルの背景色 */
border-left: 1px #c0c0c0 solid;/*線の太さ 色 線種*/
padding:0px;
}
#calendar table caption{/*月*/
color: #ffffff;/*文字色*/
border-top: 1px #c0c0c0 solid;/*線の太さ 色 線種*/
border-left: 1px #c0c0c0 solid;/*線の太さ 色 線種*/
border-right: 1px #c0c0c0 solid;/*線の太さ 色 線種*/
padding: 3px 0 0 0;
}
#calendar table caption a{/*<< と >>*/
color: #ffffff;/*文字色*/
}
#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; /* セルの背景色 */
}
カレンダー20
/*■■ カレンダー２０ ■■*/
#calendar table {/*全体*/
color: #333333;/*文字色*/
background-color: #c0c0c0; /* セルの背景色 */
border-bottom: 7px #c0c0c0 solid;/*線の太さ 色 線種*/
}
#calendar table caption{/*月*/
color: #666666;/*文字色*/
font-size: 1.3em;/*文字サイズ*/
background-color: #c0c0c0; /* セルの背景色 */
border-top: 1px #c0c0c0 solid;/*線の太さ 色 線種*/
border-left: 1px #c0c0c0 solid;/*線の太さ 色 線種*/
border-right: 1px #c0c0c0 solid;/*線の太さ 色 線種*/
padding: 10px 0 8px;
}
#calendar table caption a{/*<< と >>*/
color: #666666;/*文字色*/
}
#calendar table th{/*曜日*/
background-color: #808080; /* セルの背景色 */
border: 1px #999999 solid;/*線の太さ 色 線種*/
padding:2px 0 0 2px;
}
#calendar table td{/*日*/
background-color: #808080; /* セルの背景色 */
border: 1px #999999 solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color: #999999;/*文字色*/
background-color: #000000; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #333333;/*文字色*/
background-color: #ffffff; /* セルの背景色 */
}
カレンダー21
/*■■ カレンダー２１ ■■*/
#calendar table {/*全体*/
color: #333333;/*文字色*/
background-color: #c0c0c0; /* セルの背景色 */
border: 3px #c0c0c0 solid;/*線の太さ 色 線種*/
border-bottom: 10px #c0c0c0 solid;/*線の太さ 色 線種*/
border-collapse: collapse;
}
#calendar table caption{/*月*/
color: #333333;/*文字色*/
font-size: 1.3em;/*文字サイズ*/
background-color: #c0c0c0; /* セルの背景色 */
padding: 10px 0 8px;
}
#calendar table caption a{/*<< と >>*/
color: #333333;/*文字色*/
}
#calendar table th{/*曜日*/
background-color: #808080; /* セルの背景色 */
padding:5px 0 2px 2px;
}
#calendar table td{/*日*/
color: #999999;/*文字色*/
font-style: italic;/*斜体*/
background-color: #ffffff; /* セルの背景色 */
padding:5px 0 ;
}
#calendar table td a{/*記事のある日*/
color: #333333;/*文字色*/
font-weight:bold;/*太文字*/
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #666666; /* セルの背景色 */
}