趣味のブログ - d3blog のカスタマイズ「ブログカレンダー」
d3blog のブログカレンダーを標準設定のまま使うと、土日の色分けはできないし、曜日の表示枠も濃色バックに黒文字で読めません。このサイトのテーマだと、標準文字サイズの問題なのか年・月移動のナビゲーションバーも２行に分かれてしまいますし…。
てなわけで、ブログカレンダーをもうちょっと見やすくしてみました。土曜日は青、日曜日は赤に色分けし、コンテンツが無い日は淡色で、コンテンツがある日は濃色アンダーラインで表示するようにしています。
てなわけで、ブログカレンダーをもうちょっと見やすくしてみました。土曜日は青、日曜日は赤に色分けし、コンテンツが無い日は淡色で、コンテンツがある日は濃色アンダーラインで表示するようにしています。
いじるのは、d3blog のテンプレート管理で d3blog_block_style.css のみです。カレンダーブロックの
/* calendar block */
#<{$mydirname}>BlockCalendar {
empty-cells: show;
font-size: 100%;
:
#<{$mydirname}>BlockCalendar td.prevmonth,
#<{$mydirname}>BlockCalendar td.nextmonth {color: #dda;} /* hides if the same color used as background *//* calendar block */
#<{$mydirname}>BlockCalendar {
empty-cells: show;
font-size: 100%;
margin: 0 auto;
width: 146px; /* change if you like: pixels = column with * 7 + cellspacing */
/* sample 14*7+6=104 or 18*7+6=132 or 22*7+6=160 */
}
/*
#<{$mydirname}>BlockCalendar a { text-decoration: underline; }
#<{$mydirname}>BlockCalendar a:hover { color: white; background: #26499d; text-decoration: none; }
*/
#<{$mydirname}>BlockCalendar caption {
color: #000;
font: 100%;/* Font-size critical if you change box width */
margin: 0 auto;
padding: 0;
text-align: center;
}
#<{$mydirname}>BlockCalendar #to-this { padding: 0; }
#<{$mydirname}>BlockCalendar caption a { text-decoration: none; }
#<{$mydirname}>BlockCalendar caption a:hover { color: white; background: #26499d; }
#<{$mydirname}>BlockCalendar a#to-nextM { padding: 0 7px; }
#<{$mydirname}>BlockCalendar a#to-prevM { padding: 0 7px; }
#<{$mydirname}>BlockCalendar th {
color: black;
text-transform: none;
font-size: 90%; /* Font-size critical if you change box width */
font-weight: normal;
text-align: center;
vertical-align: middle;
width: 20px; /* Critical if you change box width */
height: 20px; /* Critical if you change box width */
background: #b3c9f0;
padding: 0;
}
#<{$mydirname}>BlockCalendar td {
color: #666666;
font: normal 100% Tahoma, Arial, Sans-serif; /* Font-size critical if you change box width */
text-align: center;
vertical-align: middle;
width: 20px; /* Critical if you change box width */
height: 20px; /* Critical if you change box width */
padding: 0;
}
#<{$mydirname}>BlockCalendar td a { color:black; text-decoration: underline; }
#<{$mydirname}>BlockCalendar td a:hover { color: white; background: #26499d; text-decoration: none; }
#<{$mydirname}>BlockCalendar .today { border: 1px solid #369; }
#<{$mydirname}>BlockCalendar .today a{ text-decoration: none !important; }
#<{$mydirname}>BlockCalendar th.sunday { color: red; }
#<{$mydirname}>BlockCalendar td.sunday { color: #ff6666; }
#<{$mydirname}>BlockCalendar td.sunday a { color: red; }
#<{$mydirname}>BlockCalendar td.sunday a:hover { color: white; background: #26499d; text-decoration: none; }
#<{$mydirname}>BlockCalendar th.saturday { color: blue; }
#<{$mydirname}>BlockCalendar td.saturday { color: #6666ff; }
#<{$mydirname}>BlockCalendar td.saturday a { color: blue; }
#<{$mydirname}>BlockCalendar td.saturday a:hover { color: white; background: #26499d; text-decoration: none; }
#<{$mydirname}>BlockCalendar td.prevmonth,
#<{$mydirname}>BlockCalendar td.nextmonth {color: #dda;} /* hides if the same color used as background */トラックバック
トラックバックpingアドレス http://www.o-ya.net/modules/d3blog/tb.php/23
コメント一覧
0件表示
(全0件)
すべてのコメント一覧へ