読者です 読者をやめる 読者になる 読者になる

タケルンバ卿ブログ

世界の片隅でだらだら生きる貴族の徒然帳

スポンサー リンク

デザイン変更(CSSなど)

ブログ

 統一感を持たせるために、CSSをさらにいじる。

1.日付の文字色

 せっかくなので、ブログ名に使っている文字色と合わせる。

.date a, .date a:visited {
color: #800000;
}

変更前

f:id:takerunba:20150519132503p:plain

 変更後

f:id:takerunba:20150519132654p:plain

 2.カテゴリーの背景色

 同じくカテゴリーも。タイトル部分に表示されているカテゴリーのフォントは白であり、色がついているのはあくまで背景色なので、背景色を変更する。

.categories a, .categories a:visited {
background-color: #800000;
}

変更後

f:id:takerunba:20150519132903p:plain

3.サイドバーのリンク文字色

 サイドバーも一気に色を変える。

 .hatena-module-body a,.hatena-module-body a:visited {
color: #800000;
}

変更前

f:id:takerunba:20150519133228p:plain

変更後

f:id:takerunba:20150519133349p:plain

  これ、結構苦労した。というのも、リンクがあるところの文字色を変えようとすると、黒色のままにしておきたい「最新記事」とか「月別アーカイブ」とかまで変わってしまう。

失敗例

f:id:takerunba:20150519133722p:plain

 こんな感じに。

 こうしたところを黒色のままにしつつ、他を変えるには「.hatena-module-body」を指定すればいいんだ、と気付くのに時間がかかった。わかってしまえば大したことないんだけどね。

4.記事本文のリンク文字色

 あとは記事本文も。色を揃える。

.entry-content a,.entry-content a:visited {
color: #800000;
}

5.はてなキーワードのリンク停止

 リンク文字色を指定したことで、はてなキーワードに引っかかる言葉も全部文字色が変わってしまう。

失敗例

f:id:takerunba:20150519134236p:plain

 あまり美しくないので、詳細設定からはてなキーワード自体を外してしまうことにする。

変更後

f:id:takerunba:20150519134509p:plain

 これで色みが好みに統一された。うむ。

関連記事