濃い緑ばっかりのせいで文字が読みにくかったデザインを変えてみた．これで左のメニューも見やすくなった．困ったのは，カレンダーの配色として非リンク，リンク，マウスオーバーの三色が必要だったこと．マウスオーバーを黒にしてみたら読みやすくはあるし，こんなもんでいいかなー．あと，記事のタイトルの周りみたいに無駄なスペースが多いのが気になるけど，どうも色と違って配置はうまくいかないことが多いから面倒だしこれでいいや．ちゃんと直してみた．いい感じ！
以下，参考にした資料など．
- デフォルトのスタイルシート
- 他のサイト
このページの現在のCSSを張っておきます．これは随時更新します．
/* 全体 */
body {
padding: 0 1%;
}
/* サイドバー */
div.hatena-module {
color: #575;
background-color: #eeeeff;
}
div.hatena-moduletitle {
color: white;
background-color: #575;
}
div.hatena-moduletitle a:link,
div.hatena-moduletitle a:visited {
color: white;
}
div.hatena-moduletitle a:hover {
color: orange;
}
div.hatena-modulebody {
background-color: #eed;
color: #242;
}
td.calendar-day {
color: gray;
}
table.calendar a:link,
table.calendar a:visited {
background-color: #cca;
color: black;
}
table.calendar a:hover {
background-color: black;
color: white;
}
div.section,
div.footnote,
div.comment,
div.refererlist {
border-color : #686 ;
background-color : #eed ;
color : #333 ;
}
/* 本文 */
div.day h2 {
padding : 0 0 0 0;//1em 1em 1em 1.5em ;
border-width : 0 0 1px 0 ;
}
span.date {
margin-bottom : 0;
margin-left : 0;
padding-left : 1em ;
padding-right : 50% ;
display : inline;//block ;
width : 90% ;
font-size : 1.5em ;
font-weight : 700 ;
border-style : solid ;
border-width : 1px 1px 1px 0.5em ;
}
div.section h3 {
background-color : #cca ;
}
a:link span.date,
a:visited span.date {
background-color : #575 ;
color : white ;
}
a:hover span.date {
background-color : black ;
color : orange ;
}
ul {
margin: 0.5em 1em 0.5em 3em;
}
ul li ul,
ul li ul li ul {
margin: 0.5em 1em 0.5em 2em;
}
blockquote, pre {
margin: 1em 1em 1em 3em;
padding: 0.5em 0.5em 0.5em 0.5em ;
}
div.section h3 {
margin : 0 0 1em 0 ;
padding : 1.5em 0.5em 1.5em 1em ;
border-bottom-style : solid ;
border-width : 1px ;
}
/* オリジナル */
span.highlight {
color: black;
background-color: yellow;
}
img.photo {
float: right;
margin: 10px;
border: 0;
}
a.keyword {
text-decoration: none;
border-bottom: 1px solid #d0d0d0;
}
