見れば分かると思うが、多少ブログのデザインを変更してみた。主な変更内容は

• 引用の囲みの境界線と背景色の変更
• ソースなどを載せる場合のpre記法についても境界線と背景色を変更
• 続きを読むを使用
• タイトルの文字を拡大
• 書籍の紹介の境界線を変更

参考にしたのは以下のページ群。

The Web KANZAKI : スタイルシート2 – CSSのプロパティ
スタイルシート全般についての話。完全に知識ゼロの僕だったが、おかげさまですんなりと理解できた。

The Web KANZAKI : The Quick Color Table
色の設定をするとき、どう指定すればどのような色になるのかを調べるために使った。

ガイドグループ世話人の日記 : 草稿「どんなセレクタにすればいいのかを調べ
はてなのページ。はてながセレクタにどんな名前を付けたのかなど、ここを見れば少し分かります。色々なページにリンクも貼られているので、そちらも参考にされたし。

ソースを表示させれば分かることですが、参考までに以下に僕のスタイルシートを載せておきます。今後も出来るだけ見栄えがよく、読み易いデザインを追及していきたいです。

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;
}
div.hatena-asin-detail {
margin: 10px;
padding: 10px;
border: 1 solid #BBBBBB;
}
div.hatena-asin-detail p {
text-indent: 0em ! important;
line-height: 150%;
}
div.hatena-asin-detail ul {
list-style-type: none;
margin: 0;
margin-top: 10px;
padding: 0;
}
img.hatena-asin-detail-image {
float: left;
}
div.hatena-asin-detail-info {
margin-left: 10px;
float: left;
word-break: break-all;
}
p.hatena-asin-detail-title {
font-weight: bold;
}
div.hatena-asin-detail-foot {
}
@media print {
div.banner, div.side_left, div.sideSet {display:none;}
.main, .entryBodybox {margin: 0 0 0 0;width:100%}
}
div.section blockquote {
background-color: #EEEEFF;
border: thin dotted #CCCCFF
}
pre {
background-color: #EEEEEE;
border: thin solid #CCCCCC
}
p.seemore {
font-weight: bold;
text-decoration: none;
}
p.seemore a{
color: #88BBB1;
border-bottom: 1px solid #88BBB1;
}
h3{
font-size: 1.2em;
}
img.asin {
margin-left: 10px;
margin-bottom: 10px;
}