CSS カレンダーをかわいく 2 | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

CSS カレンダーをかわいく 2

あっ・・・ タイトルかわいくなんてつけてしまいましたが

・・・前の記事の続きなんで


見ればわかるから・・・まっいいか


コレのやり方を皆さんにわかるように説明するのは大変なんで・・・・(文才のない私にとって)


サンプルの下にCSSをつけました

好きなカレンダー下にあるCSSを自分のCSSの最後にコピペするだけで

サンプルと同じになるはずです


カレンダー№ が同じ物は違いは色だけです

慣れてきたら好きな色に変更下さい


設置できましたらコメントをいただけると助かります

皆様の実際どうなるのか参考になりますし

どのタイプが人気があるのか知りたいんで・・・・ m(_ _)m


カレンダー01



/*■■ カレンダー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; /* セルの背景色 */
}



カレンダー02


/*■■ カレンダー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


/*■■ カレンダー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;/*文字色*/
}


カレンダー01


/*■■ カレンダー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-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; /* セルの背景色 */
}




カレンダー02


/*■■ カレンダー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;/* セルの背景色 */
}



カレンダー03


/*■■ カレンダー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


/*■■ カレンダー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; /* セルの背景色 */
}


カレンダー02


/*■■ カレンダー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


/*■■ カレンダー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


/*■■ カレンダー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


/*■■ カレンダー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


/*■■ カレンダー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 カレンダーに画像をつけてカレンダーらしく?

CSS カレンダーをかわいく

CSS カレンダーをかわいく 2

CSS カレンダーをかわいく 3

CSS カレンダーをかわいく 4

CSS カレンダーをかわいく 5

CSS カレンダーをかわいく 6

CSS カレンダーをかわいく 7

CSS カレンダーをかわいく 8

CSS カレンダーをかわいく 緑組応援団