CSSの編集が出来ないスキンでも カレンダーをかわいくしたい！
CSSの編集が出来ないスキンでも カレンダーをかわいくしたい！
・・・・タイトルの通りです
それ以外でもうまく出来なかった場合のヒントになる部分があるかもです
まずは・・・
これは出来ているものとして・・・・
などから使いたいカレンダーを探します
↑今回はコレを使って説明します
ＣＳＳ編集の出来ない GiRLSGATE(コラボレーション）の fabricCollage スキンで試してみます
CSS用のブログのＣＳＳにそのままコピペすると・・・・・
なんか・・・・ ?
違いますよね
これはfabricCollage スキン のＣＳＳで
table {
border-collapse: collapse;
}
・・・・と、tebleのＣＳＳで
接するセルのボーダーのスキマを詰めて表示するようになっているからです
なので、間隔をあけて表示するように
#calendar table {/*全体*/
color:#999999;/*文字色*/
border-collapse: separate;
}
border-collapse: separate; を加えます
おぉ～セルの間隔があきました・・・
が、背景の色と同じで記事のある日がわかりません
#calendar table td a{/*記事のある日*/
color: #666666;/*文字色*/
background-color: #e0e0e0; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
↓ 背景色を濃くして、逆に文字は白くしてみます
#calendar table td a{/*記事のある日*/
color: #ffffff;/*文字色*/
background-color: #999999; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
text-decoration: none; /* リンク文字の下線消す */
って～はずなのに・・・・
↓下線が付いていますよね・・・？
これも・・・・fabricCollage スキン のＣＳＳで
div#calendar table td a {
text-decoration: underline;
}
って下線を表示するように設定されているからです
#calendar table td a{/*記事のある日*/
color:#ffffff;/*文字色*/
background-color:#999999; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
↓ 頭に div ってくっつけるだけです
div#calendar table td a{/*記事のある日*/
color:#ffffff;/*文字色*/
background-color:#999999; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
※全部の#calendarの前にdivをつけてもかまいません
どうでしょうか・・・？
いまのスキンで使っている色に合わせてみます
/*■■ カレンダー０４ ■■*/
div#calendar table {/*全体*/
color:#663300;/*文字色*/
border-collapse:separate ;
}
div#calendar table caption{/*月*/
color:#663300;/*文字色*/
font-weight:bold;/*太文字*/
}
div#calendar table caption a{/*前月翌月*/
color:#663300;/*文字色*/
padding: 3px 15px 0;
}
div#calendar table th,
div#calendar table td{/*曜日・日にち*/
border-right: 1px #663300 solid;/*線の太さ 色 線種*/
border-bottom: 2px #663300 solid;/*線の太さ 色 線種*/
}
div#calendar table th{/*曜日*/
color:#663300;/*文字色*/
}
div#calendar table td a{/*記事のある日*/
color:#ffffff;/*文字色*/
background-color:#c5393c; /* セルの背景色 */
text-decoration: none; /* リンク文字の下線消す */
display:block;
}
div#calendar table td a:hover{/*マウスオーバー*/
color: #663300;/*文字色*/
background-color: #fcfcfa; /* セルの背景色 */
}
div#calendar table th.sun {/*日曜*/
color: #ff0000;/*文字色*/
}
div#calendar table th.sat {/*土曜*/
color: #0000ff;/*文字色*/
}
CSS カレンダーに画像をつけてカレンダーらしく？ も参考にどうぞ
CSS カレンダーをかわいく 7
サンプルの下にＣＳＳをつけました
好きなカレンダー下にあるＣＳＳを自分のＣＳＳの最後にコピペするだけで
サンプルと同じになるはずです
マウスを当てたときの変化も確認できます・・・・
カレンダー№ が同じ物は違いは色だけです
慣れてきたら好きな色に変更下さい
設置できましたらコメントをいただけると助かります
皆様の実際どうなるのか参考になりますし
どのタイプが人気があるのか知りたいんで・・・・ m(_ _)m
/*■■ カレンダー１９ ■■*/
#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; /* セルの背景色 */
}
/*■■ カレンダー２０ ■■*/
#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; /* セルの背景色 */
}
/*■■ カレンダー２１ ■■*/
#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; /* セルの背景色 */
}
Ameba Search アメブロ検索が・・・・
たった今・・・・・たぶん？
変りましたよ・・・・・・・
トップページの一番下にあるやつ・・・・？
↓ちなみにココ Ａｍｅｂａトップへ のリンク間違っていますよ・・・
前は goo のエンジンだったのですが・・・・
今度は何も出ていません・・・・・
まさか自分のところで開発したわけではないですよね・・・？
ブログについているブログ内検索は 以前のまま goo のですね・・・・