CSS カレンダーをかわいく 緑組応援団
このブログ・・・
緑の応援団の方々に多くご利用いただいていますので・・・・
緑組応援団用にコピペだけでできるようにしてみました
あっ、緑組の応援団ではない方でもどうぞ
色が緑系ってだけですけど・・・・
この色じゃない！ってこだわりのある方は自由に色を変えてください
サンプルの下にＣＳＳをつけました
好きなカレンダー下にあるＣＳＳを自分のＣＳＳの最後にコピペするだけで
サンプルと同じになるはずです
マウスを当てたときの変化も確認できます・・・・
カレンダー№ が同じ物は違いは色だけです
慣れてきたら好きな色に変更下さい
設置できましたらコメントをいただけると助かります
皆様の実際どうなるのか参考になりますし
どのタイプが人気があるのか知りたいんで・・・・ m(_ _)m
カレンダー01
/*■■ カレンダー０１ ■■*/
#calendar table {/*全体*/
color: #005d3d;/*文字色*/
border-left: 1px #005d3d solid;/*線の太さ 色 線種*/
border-right: 1px #005d3d solid;/*線の太さ 色 線種*/
border-bottom: 1px #005d3d solid;/*線の太さ 色 線種*/
padding:0px;
}
#calendar table caption{/*月*/
color: #005d3d;/*文字色*/
border-top: 1px #005d3d solid;/*線の太さ 色 線種*/
border-left: 1px #005d3d solid;/*線の太さ 色 線種*/
border-right: 1px #005d3d solid;/*線の太さ 色 線種*/
padding: 3px 0 0 0;
}
#calendar table caption a{/*<< と >>*/
color: #005d3d;/*文字色*/
}
#calendar table th{/*曜日*/
border: 1px #005d3d solid;/*線の太さ 色 線種*/
padding:2px 0 0 2px;
}
#calendar table td{/*日*/
border: 1px #005d3d solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color: #ffffff;/*文字色*/
background-color: #2baa2b; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #005336;/*文字色*/
background-color: #00ff00; /* セルの背景色 */
}
カレンダー02
/*■■ カレンダー０２ ■■*/
#calendar table {/*全体*/
color:#009933;/*文字色*/
border: 1px #009933 solid;/*線の太さ 色 線種*/
}
#calendar table caption{/*月*/
color:#ffffff;/*文字色*/
background-color:#009933;/* セルの背景色 */
font-size: 1.2em;/*文字サイズ*/
border-collapse: collapse;
padding: 3px 15px 0;
}
#calendar table caption a{/*<< と >>*/
color:#ffffff;/*文字色*/
background-color:#009933;/* セルの背景色 */
font-size: 1.0em;/*文字サイズ*/
padding: 3px 15px 0;
}
#calendar table th{/*曜日*/
padding:2px 0 0 2px;
}
#calendar table td a{/*記事のある日*/
color:#ffffff;/*文字色*/
border: 1px #009933 solid;/*線の太さ 色 線種*/
background-color: #009933; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color:#009933;/*文字色*/
background-color: #00ff33; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ffffff;/*文字色*/
background-color:#ff4080;/* セルの背景色 */
}
#calendar table .sat{/*土曜*/
color:#009933;/*文字色*/
background-color:#c0ffff;/* セルの背景色 */
}
カレンダー04
/*■■ カレンダー０４ ■■*/
#calendar table {/*全体*/
color: #005d3d;/*全体の文字色*/
}
#calendar table caption a,
#calendar table caption{/*月*/
color: #666666;/*文字色*/
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border-right: 1px #55d42a solid;/*線の太さ 色 線種*/
border-bottom: 1px #00744b solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color: #ffffff;/*文字色*/
background-color: #009933; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
padding:3px 0px;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #00ff00; /* セルの背景色 */
}
#calendar table th.sun {/*日曜*/
color: #ff1493;/*文字色*/
}
#calendar table th.sat {/*土曜*/
color: #0000ff;/*文字色*/
}
カレンダー07
/*■■ カレンダー０７ ■■*/
#calendar table {/*全体*/
color: #005d3d;/*全体の文字色*/
border-collapse: collapse;
}
#calendar table caption a,
#calendar table caption{/*月*/
color: #005d3d;/*全体の文字色*/
}
#calendar table th,
#calendar table td{/*曜日・日にち*/
border-top: 1px #009933 solid;/*線の太さ 色 線種*/
border-bottom: 1px #009933 solid;/*線の太さ 色 線種*/
padding:2px 0;
}
#calendar table td a{/*記事のある日*/
color: #ffffff;/*文字色*/
background-color: #009933; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #00ff00; /* セルの背景色 */
}
カレンダー13
/*■■ カレンダー１３ ■■*/
#calendar table {/*全体*/
color:#009933;/*文字色*/
background-color:#005336;/* セルの背景色 */
border-left:3px #666666 solid;/*線の太さ 色 線種*/
border-right:3px #333333 solid;/*線の太さ 色 線種*/
border-bottom: 3px #333333 solid;/*線の太さ 色 線種*/
}
#calendar table caption a{/* << と >> */
color:#ffffff;/*文字色*/
text-decoration:none;
},
#calendar table caption{/*月*/
color:#ffffff;/*文字色*/
background-color:#005336;/* セルの背景色 */
border-top:3px #666666 solid;/*線の太さ 色 線種*/
border-left:3px #666666 solid;/*線の太さ 色 線種*/
border-right:3px #333333 solid;/*線の太さ 色 線種*/
}
#calendar table th{/*曜日*/
color: #005336;/*文字色*/
background-color:#ffffff;/* セルの背景色 */
padding:2px 0 0 2px;
}
#calendar table td a {
color:#ffffff;/*文字色*/
font-weight:bold;/*太文字*/
text-decoration:underline;
display:block;
}
#calendar table td a:hover {/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color:#00ff33;/* セルの背景色 */
text-decoration:underline;
}
カレンダー14
/*■■ カレンダー１４ ■■*/
#calendar table {
color:#ffffff;/*文字色*/
background-color:#005336;/* セルの背景色 */
border-left:3px #666666 solid;/*線の太さ 色 線種*/
border-right:3px #333333 solid;/*線の太さ 色 線種*/
border-bottom: 3px #333333 solid;/*線の太さ 色 線種*/
}
#calendar table caption a{/* << と >> */
color:#ffffff;/*文字色*/
text-decoration:none;
},
#calendar table caption{/*月*/
color:#ffffff;/*文字色*/
background-color:#005336;/* セルの背景色 */
border-top:3px #666666 solid;/*線の太さ 色 線種*/
border-left:3px #666666 solid;/*線の太さ 色 線種*/
border-right:3px #333333 solid;/*線の太さ 色 線種*/
}
#calendar table th{/*曜日*/
color: #ffffff;/*文字色*/
background-color:#005336;/* セルの背景色 */
padding:2px 0 0 2px;
}
#calendar table td a {
color:#55d42a;/*文字色*/
border:1px #55d42a solid;/*線の太さ 色 線種*/
text-decoration:none;
display:block;
}
#calendar table td a:hover {/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color:#2baa2b;/* セルの背景色 */
}
カレンダー15
/*■■ カレンダー１５ ■■*/
#calendar table {
color:#ffffff;/*文字色*/
background-color:#005336;/* セルの背景色 */
border-left:3px #666666 solid;/*線の太さ 色 線種*/
border-right:3px #333333 solid;/*線の太さ 色 線種*/
border-bottom: 3px #333333 solid;/*線の太さ 色 線種*/
}
#calendar table caption a{/* << と >> */
color:#ffffff;/*文字色*/
text-decoration:none;
},
#calendar table caption{/*月*/
color:#ffffff;/*文字色*/
background-color:#005336;/* セルの背景色 */
border-top:3px #666666 solid;/*線の太さ 色 線種*/
border-left:3px #666666 solid;/*線の太さ 色 線種*/
border-right:3px #333333 solid;/*線の太さ 色 線種*/
}
#calendar table th{/*曜日*/
color: #55d42a;/*文字色*/
background-color:#005336;/* セルの背景色 */
padding:2px 0 0 2px;
}
#calendar table td {
font-style: italic;/*斜体*/
}
#calendar table td a {
color:#55d42a;/*文字色*/
font-weight:bold;/*太文字*/
text-decoration:underline;
}
#calendar table td a:hover {/*マウスオーバー*/
color:#ffffff;/*文字色*/
background-color:#00ff33;/* セルの背景色 */
text-decoration:none;
display:block;
}
カレンダー20
/*■■ カレンダー２０ ■■*/
#calendar table {/*全体*/
color: #333333;/*文字色*/
background-color: #00ff00; /* セルの背景色 */
border-bottom: 7px #00ff00 solid;/*線の太さ 色 線種*/
}
#calendar table caption{/*月*/
color: #666666;/*文字色*/
background-color: #00ff00; /* セルの背景色 */
border-top: 1px #00ff00 solid;/*線の太さ 色 線種*/
border-left: 1px #00ff00 solid;/*線の太さ 色 線種*/
border-right: 1px #00ff00 solid;/*線の太さ 色 線種*/
font-size: 1.3em;/*文字サイズ*/
padding: 10px 0 8px;
}
#calendar table caption a{/*<< と >>*/
color: #666666;/*文字色*/
}
#calendar table th{/*曜日*/
background-color: #808080; /* セルの背景色 */
border: 1px #009933 solid;/*線の太さ 色 線種*/
padding:2px 0 0 2px;
}
#calendar table td{/*日*/
background-color: #808080; /* セルの背景色 */
border: 1px #009933 solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color: #009933;/*文字色*/
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: #00cc00; /* セルの背景色 */
border: 3px #00cc00 solid;/*線の太さ 色 線種*/
border-bottom: 10px #00cc00 solid;/*線の太さ 色 線種*/
border-collapse: collapse;
}
#calendar table caption{/*月*/
color: #333333;/*文字色*/
background-color: #00cc00; /* セルの背景色 */
font-size: 1.3em;/*文字サイズ*/
padding: 10px 0 8px;
}
#calendar table caption a{/*<< と >>*/
color: #333333;/*文字色*/
}
#calendar table th{/*曜日*/
color: #ffffff;/*文字色*/
background-color: #006633; /* セルの背景色 */
padding:5px 0 2px 2px;
}
#calendar table td{/*日*/
color: #009933;/*文字色*/
background-color: #ffffff; /* セルの背景色 */
padding:5px 0 ;
}
#calendar table td a{/*記事のある日*/
color: #006633;/*文字色*/
text-decoration: none; /* リンク文字の下線消す */
font-weight:bold;/*太文字*/
font-style: italic;/*斜体*/
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #006633; /* セルの背景色 */
}
カレンダー22
/*■■ カレンダー２２ ■■*/
#calendar table {/*全体*/
color: #009900;/*全体の文字色*/
border: 1px #ffffff solid;/*背景の色に合わせる*/
border-collapse: collapse;
}
#calendar table caption a,
#calendar table caption{/*月*/
color: #ffffff;/*文字色*/
background-color: #009900; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
padding:2px 0 0 0;
}
#calendar table th{/*曜日*/
color: #009900;/*文字色*/
border-bottom: 1px #ffffff solid;/*背景の色に合わせる*/
padding:3px 0 2px 0;
}
#calendar table td{/*日にち*/
border: 1px #009933 solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color: #ffffff;/*文字色*/
background-color: #009900; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #33ff33; /* セルの背景色 */
}
Youtubeの貼り付け
Youtubeの貼り付けテストです
現在Youtubeを記事に貼り付ける際に禁止タグのエラーが発生し、
貼り付けができない状態となっております。
・・・アメブロのメッセージだとダメなようです
でもでも・・・そんなの関係ない！！！（古）
↑クリックしてくださいYoutubeが立ち上がります
Youtubeが変わったんですか？
なにが変わったんだろ・・・？
使ってないからわかりません
でも・・・このブログの読者様は貼り付けることが出来ると思いますよ
・・・たぶん
Thickbox すっぴんバージョン
http://ameblo.jp/exlink/entry-10085317756.html
または
自分のコメントを ”もっと” わかりやすく
http://ameblo.jp/exlink/entry-10088497068.html
の、どちらかが入れてあって
ThickBox ＋ YouTube
http://ameblo.jp/exlink/entry-10085507019.html
を参考にすれば大丈夫です
CSS カレンダーをかわいく 8
サンプルの下にＣＳＳをつけました
好きなカレンダー下にあるＣＳＳを自分のＣＳＳの最後にコピペするだけで
サンプルと同じになるはずです
マウスを当てたときの変化も確認できます・・・・
カレンダー№ が同じ物は違いは色だけです
慣れてきたら好きな色に変更下さい
設置できましたらコメントをいただけると助かります
皆様の実際どうなるのか参考になりますし
どのタイプが人気があるのか知りたいんで・・・・ m(_ _)m
カレンダー22
/*■■ カレンダー２２ ■■*/
#calendar table {/*全体*/
color: #666666;/*文字色*/
}
#calendar table caption a,
#calendar table caption{/*月*/
color: #ffffff;/*文字色*/
padding: 0 3px 3px;
}
#calendar table th{/*曜日*/
color: #ffffff;/*文字色*/
background-color: #333333; /* セルの背景色 */
border: 1px #999999 solid;/*線の太さ 色 線種*/
padding:2px 0 0 2px;
}
#calendar table td{/*日*/
color: #999999;/*文字色*/
background-color: #ffffff; /* セルの背景色 */
border: 1px #ffffff solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
color: #333333;/*文字色*/
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
color: #ffffff;/*文字色*/
background-color: #999999; /* セルの背景色 */
}
カレンダー23
/*■■ カレンダー２３ ■■*/
#calendar table{
color: #666666;
border: 1px solid #cccccc;
border-collapse: separate;
}
#calendar table caption a,
#calendar table caption{/*月*/
color: #ffffff;/*文字色*/
padding: 0 3px 3px;
}
#calendar table th {
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
background-color: #E1E2E6;/* 背景の色 */
padding:2px 0 0 2px;
}
#calendar table td {
color: #d3d3d3; /* 文字の色 */
border-top: 1px solid #333333;
border-left: 1px solid #333333;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
background-color: #808080;/* 背景の色 */
}
#calendar table td a {
color: #333333; /* 文字の色 */
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
background-color: #c0c0c0;/* 背景の色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{
color: #ffffff; /* 文字の色 */
border-right: 1px solid #fbfbfb;
border-bottom: 1px solid #949494;
background-color: #cfcfcf;
}
カレンダー24
/*■■ カレンダー２４ ■■*/
#calendar table {
background-color: #aaaadd; /* 背景の色 */
border-style: solid; /* 枠の種類 */
border-color: #7777aa #ddddff #ddddff #7777aa; /* 枠の色 上・右・下・左*/
border-width: 2px; /* 枠の幅 */
}
#calendar table td {
color: #ffffff; /* 文字の色 */
background-color: #9999cc; /* 背景の色 */
border-style: solid; /* 枠の種類 */
border-color: #666699 #ccccff #ccccff #666699; /* 枠の色 上・右・下・左*/
border-width: 2px; /* 枠の幅 */
}
カレンダー25
/*■■ カレンダー２５ ■■*/
#calendar table{/*全体*/
background-color: #bababa; /* セルの背景色 */
border-collapse: collapse;
}
#calendar table caption a,
#calendar table caption{/*月*/
color:#ffffff;/*文字色*/
background-color: #5b5b5b; /* セルの背景色 */
}
#calendar table th{/*曜日*/
background-color: #6b6b6b;/* セルの背景色 */
}
#calendar table td{/*日にち*/
border: 1px #999999 solid;/*線の太さ 色 線種*/
}
#calendar table td a{/*記事のある日*/
background-color: #f2f20f; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
#calendar table td a:hover{/*マウスオーバー*/
background-color: #ff0000; /* セルの背景色 */
}
#calendar table .sun {/*日曜*/
color:#ffffff;/*文字色*/
background-color:#ff4080;/* セルの背景色 */
}
#calendar table .sat{/*土曜*/
color:#00ffff;/*文字色*/
background-color:#c0ffff;/* セルの背景色 */
}