はてなブログのテーマ「Brooklyn」をインストールしてcssをカスタマイズしたので覚書き

何度かこのブログを見てくださっている方（いるかな？）はお気づきかもしれませんが、ブログのデザインを変えました。

はてなブログのテーマストアからテーマ「Brooklyn」をインストールして、色などをちょっとだけ変更してみました。人気のテーマなので使っている人がたくさんいますし。

せっかくなので変更した箇所と変更方法をメモしておきます。

（備忘録っぽい使い方！）

はてなブログではcssをどこに書けばいいか

はてなブログでは、「デザイン」の設定画面 ＞ 「カスタマイズ」の中にある「デザインcss」のところにcssを記述することで、自分のオリジナルcssをブログのデザインに反映させることができます。

ここです。

テーマにはそのテーマ用のcssが用意されていますが、それと同じクラス名でここに書けば上書きされるというわけです。

見出しのカスタマイズ

見出しって要は↑これです。Brooklynのデフォルトではモノトーンですが、目に優しい緑色にしてみました。

私はほとんどh3見出ししか使っていないのでとりあえずh3見出しだけ変更しましたが、他の見出しも変更したい場合はテーマのcssから該当箇所をコピーしてきて変更したいところだけ変更してください。

＜＜見出しカスタマイズcss＞＞

.entry-content h3 {
background-color: #effef1;
border-left: 12px solid #265f2d;
}
.entry-content h3:before{
border-top-color: #effef1;}

見出しの色を変えたい場合はこのcssを「デザインcss」のところに書けばOKです。

赤字の部分が背景色、青地の部分が左側の太線のところの色なので、別の色にしたい人はここを書き換えてください。

はてなモジュールタイトルのカスタマイズ

PCで見ている人は右側のカラム、スマートフォンで見ている人は記事の下に「筆者プロフィール」や「ブログ内検索」「人気の記事」などのブログパーツが出ていると思うのですが、せっかくなのでここも緑色にしました。

＜＜はてなモジュールタイトルのカスタマイズcss＞＞

.hatena-module-title {
border: 2px solid #265f2d;
}
.hatena-module-title:before{
border-top-color: #265f2d;}

これも赤字部分が線の色なので、他の色がいい人はここを変えてください。

今回は線の色だけ変えましたが、文字色も変えたい人はそれ用のcssも追加してください。

日付表示のカスタマイズ

記事タイトルの上にある日付表示部分もモノトーンから緑色にしました。

＜＜日付表示のカスタマイズcss＞＞

.date a {
background-color: #265f2d;}

赤字の部分が背景色です。

文字が白っぽいので背景が濃い色でないと見づらそうですね。どうしても薄い背景色にしたい場合は文字色も変更したほうがよさそうです。

「続きを読む」ボタンのカスタマイズ

「続きを読む」ボタンは見出しとかではないのでモノトーンのままにしたのですが、そのままだと埋もれてしまいそうだと思ったので二重線をつけて少しだけサイズを大きくしました。

（私自身がブログ形式のサイトを見るときに「続きを読む」ボタンを見失いがちだというのもあるのですが）

＜＜「続きを読む」ボタンのカスタマイズcss＞＞

.entry-see-more {
padding: 8px 12px;
border: 6px double #fff;
}
.entry-see-more:visited {
padding: 8px 12px;
border: 6px double #fff;
}
.entry-see-more:hover {
padding: 8px 12px;
border: 6px double #111;}

スマートフォンだと分かりませんが、PCではマウスカーソルを合わせると色が反転するようになっているのでその分のcssが「.entry-see-more:hover」です。

色々変更するとマウスオーバーで派手な色になったりサイズが大きくなったりもできますがほどほどに…

「読者になる」ボタンのカスタマイズ

Brooklynではhtmlコードを記述するだけでモノトーンや赤色の「読者になる」ボタンを表示できるようcssを用意してくれているのですが、今回色々な箇所を緑色にしたのでこの赤色ボタンも緑色に統一してみました。

＜＜「読者になる」ボタン（カラー）のカスタマイズcss＞＞

.reader-button.color a {
border-color: #265f2d;
background-color: #265f2d;
}
.reader-button.color a:hover {
color: #265f2d;}

このボタンもマウスオーバーで反転するようになっています。

通常時は背景と枠線が同じ色で文字色が白、マウスオーバー時は枠線はそのままで背景色が白、文字色が枠線と同じ色に反転します。

赤字の部分は同じ色にしておくと自然な動きです。

---

とりあえず今回変更したのはこのくらいです。

せっかくのシンプルなテーマなのであまりいじくりまわすのもなと思うのでしばらくはこれでいくつもりですが、また地味に変更するかも？