統一感を持たせるために、CSSをさらにいじる。
1.日付の文字色
せっかくなので、ブログ名に使っている文字色と合わせる。
.date a, .date a:visited {
color: #800000;
}
変更前
変更後
2.カテゴリーの背景色
同じくカテゴリーも。タイトル部分に表示されているカテゴリーのフォントは白であり、色がついているのはあくまで背景色なので、背景色を変更する。
.categories a, .categories a:visited {
background-color: #800000;
}
変更後
3.サイドバーのリンク文字色
サイドバーも一気に色を変える。
.hatena-module-body a,.hatena-module-body a:visited {
color: #800000;
}
変更前
変更後
これ、結構苦労した。というのも、リンクがあるところの文字色を変えようとすると、黒色のままにしておきたい「最新記事」とか「月別アーカイブ」とかまで変わってしまう。
失敗例
こんな感じに。
こうしたところを黒色のままにしつつ、他を変えるには「.hatena-module-body」を指定すればいいんだ、と気付くのに時間がかかった。わかってしまえば大したことないんだけどね。
4.記事本文のリンク文字色
あとは記事本文も。色を揃える。
.entry-content a,.entry-content a:visited {
color: #800000;
}
5.はてなキーワードのリンク停止
リンク文字色を指定したことで、はてなキーワードに引っかかる言葉も全部文字色が変わってしまう。
失敗例
あまり美しくないので、詳細設定からはてなキーワード自体を外してしまうことにする。
変更後
これで色みが好みに統一された。うむ。