『CSSの編集が出来ないスキンでも カレンダーをかわいくしたい！』

・・・・タイトルの通りです

それ以外でもうまく出来なかった場合のヒントになる部分があるかもです

まずは・・・

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でカスタマイズ、オリジナルなスキンに挑戦！

CSSの編集が出来ないスキンでも カレンダーをかわいくしたい！

CSSの編集が出来ないスキンでも　カレンダーをかわいくしたい！