[1番おすすめスキン編] カレンダーを装飾する | アメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開!

アメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開!

カスタマイズ,アクセスアップ,カスタム,スキン,依頼,料金,スキン作成,スキンのデザイン,オリジナル,CSSの編集,HTML,JavaScript,ヘッダー,ヘッダーデザイン,広告,非表示,フリープラグイン,フリースペース,メッセージボード,改造,オリジナルデザイン

6[1番おすすめスキン編] サイドバータイトル色と下線色を変更する の続きです。
------------------------------------------------------------------------------------------

【「スィート」スキンのカレンダーの装飾を変更する方法】

「スィート」スキンのカレンダーの装飾を変更する方法



カレンダーカスタマイズ【ノーマルバージョン】
CSSコードの各 # から始まる 0099ff の部分の色を変更してください。

※色の進数が分からない方はやじるしカラーコード表
※CSS編集が分からない方は やじるしCSS編集方法の手順

/*■カレンダー■*/
#calendar {
border:none;
}
#calendar .menu_frame { /*カレンダー全体*/
border:1px solid #0099FF; /*カレンダー枠色*/
background-color:#FFFFFF; /*カレンダー背景*/
padding:1px;
}
#calendar table { /*カレンダー全体*/
width:166px; /*カレンダー内側の横幅*/
}
#calendar caption { /*月*/
background-color:#0099FF; /*月の背景色*/
color:#FFFFFF; /*月の文字色*/
font-weight:bold; /*月の文字太字*/
padding:5px;
}
#calendar caption a { /*月の前後リンク*/
color:#FFFFFF; /*月の前後リンク文字色*/
}
#calendar th { /*曜日*/
background-color:#66CCFF; /*曜日の背景色*/
color:#FFFFFF; /*曜日の文字色*/
font-weight:normal; /*曜日の文字太字を消す*/
padding:2px 0 0 2px;
}
#calendar .sun,
#calendar .sat {
color:#FFFFFF; /*土日の文字色*/
}
#calendar table td { /*日*/
color:#999999; /*日の文字色*/
background-color:#F5F5F5; /*日の背景色*/
padding:1px;
}
#calendar table td a { /*記事投稿のある日*/
color:#FFFFFF; /*記事投稿のある日の文字色*/
background-color:#0099FF; /*記事投稿のある日の背景色*/
text-decoration:none; /*記事投稿のある日の下線を消す*/
display:block;
}
#calendar table td a:hover {/*マウスオーバー*/
background-color:#0066CC; /*背景色*/
}




ブログのカレンダーカスタマイズ【3Dバージョン】
【ノーマルバージョン】のタグに下記タグを追加してください。
各背景色より少し濃い目の色を指定してください。

※色の進数が分からない方はやじるしカラーコード表
※CSS編集が分からない方は やじるしCSS編集方法の手順

【ノーマルバージョン】タグ +

#calendar caption { /*月の背景の影*/
border-right:1px solid #0066CC;
border-bottom:1px solid #0066CC;
}
#calendar th { /*曜日の背景の影*/
border-right:1px solid #0099FF;
border-bottom:1px solid #0099FF;
}
#calendar table td { /*曜日の背景の影*/
border-right:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
}




カスタマイズカレンダー【シンプルバージョン】
# から始まる 0099ff の部分の色を変更してください。

※色の進数が分からない方はやじるしカラーコード表
※CSS編集が分からない方は やじるしCSS編集方法の手順

/*■カレンダー■*/
#calendar {
border:none;
}
#calendar table { /*カレンダー全体*/
background-color:#FFFFFF; /*カレンダーの背景色*/
border-collapse:collapse;
}
#calendar caption { /*月*/
color:#0099FF; /*月の文字色*/
padding:5px;
}
#calendar caption a { /*月の前後リンク*/
color:#0099FF; /*月の前後リンク文字色*/
}
#calendar th { /*曜日*/
color:#0099FF; /*曜日の文字色*/
font-weight:normal; /*曜日の文字太字を消す*/
padding:2px 0 0 2px;
border-top:1px solid #0099FF; /*曜日の上ボーダー*/
border-bottom:1px solid #0099FF; /*曜日の下ボーダー*/
}
#calendar .sun,
#calendar .sat {
color:#0099FF; /*土日の文字色*/
}

#calendar table td { /*日*/
color:#CCCCCC; /*日の文字色*/
border-bottom:1px solid #66CCFF; /*日の下ボーダー*/
padding:2px 0 0 2px;
}
#calendar table td a { /*記事投稿のある日*/
color:#0066CC; /*記事投稿のある日の文字色*/
text-decoration:none; /*記事投稿のある日の下線を消す*/
display:block;
}
#calendar table td a:hover {/*マウスオーバー*/
color:#FFFFFF; /*文字色*/
background-color:#66CCFF; /*背景色*/
}



------------------------------------------------------------------------------------------
8[1番おすすめスキン編] プロフィール枠をカスタマイズする へ続く。


by ブログデザイナー@あめまり