こんにちは、もちみです。
ブログのカスタマイズはちょこちょこしているのですが、いつの間にか何をどういじったのか…になってしまっていました。
カスタマイズで参考にした記事はほぼブクマしていたので、今回大幅にいじったのをきっかけに、それらをきちんと整理しました。
履歴を残すためにもこの記事にまとめていきます。（随時追加予定）
使用したテーマ
説明不要の大人気テーマ、Brooklynを使用させていただいています。
他のテーマに変更したこともあったのですが、やはり使いやすくてこのテーマに戻ってきました。スマホはレスポンシブデザインに対応。
ヘッダー
画像
変更前）
変更後）
変更前のやっつけ感よ…
本当はココナラとかで注文した方がいいのでしょうが、普段の自分のイラストとクオリティの差が出て悲しくなりそうだったので自作しました。
絵日記の配色もパステル系が多いので、同じようにパステル系の色味にしてみました。
レスポンシブ対応
はてなブログのヘッダー画像を挿入している方のための適切なCSSスタイリング - ゴトーのブログ
画像ははてな推奨の横1000px×縦200pxで作成していますが、スマホやタブレットで見ると画像が切れるため、こちらの記事を参考にサイズを可変にしました。このサイズの場合、変更する比率箇所の値は20%です。
また、テーマのでデフォルトCSSで余白が40pxに設定されていたので、上のみ30px、それ以外は0pxに修正しました。上だけ30pxなのは、レスポンシブモードだとグローバルナビが上に表示されるのでヘッダ画像に被るのを避けるためです。
#blog-title {
padding: 30px 0px 0px 0px;
}
グローバルナビ
サブメニューの表示
Brooklynのグローバルナビをドロップダウンにする方法 - NO TITLE
本家の方で解説があったので、そのまま流用。
サブメニューがドロップダウンで表示されるのオサレすぎる。
色の変更
はてなブログテンプレート【Brooklyn】のカスタマイズ集 - Style 21世紀×Deaf×INFP
テーマ配布元のコメント欄でQ&Aみたいなのをやっていて、その内容をまとめてある記事です（多分）。ありがたや～。
元々ナビの色は黒で、シックで男前な雰囲気だったのですが、ヘッダ画像を変えたことで合わなくなってしまったので色味を変更しました。
変更前）
変更後）
一気にブログ全体の雰囲気が変わりました。これはやってよかったです。
同じ記事に書いてあるのですが、brooklynのcssはここにあるので、
http://hatenablog.com/theme/6653586347155924442.css
見出しや、日付欄の色、サイドバーメニューの色など細々変更してます。
昔々（学生時代）cssをちょびっとかじっていたのでこういうのハマります・・・！
メニューにアイコン表示
上の画像には反映されてませんが、各メニューにアイコンをつけました。
【Font Awsomeを読み込んでる場合】
【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
【Font Awsomeを読み込んでない場合】
はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ - しろかい！
なんとはてなのデフォルトのcssでwebアイコンを読み込んでいるらしいのです（知らなかった！）。これだとFont Awesomeを読み込まなくても使えます。
※Font AwesomeはWEB上で使えるアイコン集。様々なアイコンが使えて便利な反面、サイト表示が遅くなるデメリットもあるとかないとか。うちのブログはシェアボタンカスタマイズの為に読み込んでます。
記事タイトル
コピぺでOK！CSSのみで記事タイトルのデザインをおしゃれにする方法15【はてなブログカスタマイズ】 - North-Geek
二重線のものにしました。
サイドバー
フォローボタン
コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Life
洗練されたデザインのこちらを使用。カーソルあてると色が変わるのオシャレ。
カテゴリー
【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました - 小さな星がほらひとつ
階層化し、かつサイドバーでは折り畳み表示されるように。
メニューの追従
レスポンシブに対応したサイドバー固定Ver.2（はてなブログ向け） - NO TITLE
サイドバーの一番下の項目がスクロールしてもついてくるようにしました。
シェアボタン
はてなブログの超便利なデザインテーマ「Brooklyn」を作りました - NO TITLE
テーマ配布元で既に用意してあるのをそのままコピペしてます。
記事装飾
太文字をマーカー風に
コピぺでOK！CSSのみで強調太文字のデザインを蛍光ペン風にする方法10色【はてなブログカスタマイズ対応】 - North-Geek
太文字に自動的に色がつきます。こんな感じ。
背景に色を付ける
はてなブログ編集用のChrome拡張機能を作りました（使い方の説明） - NO TITLE
これの「背景をグレーにする」を使って、後で色だけ変更しています。他にも色々できるので、この拡張機能入れておくとものすごい便利。
リンクを目立たせる
おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ - NO TITLE
リンク箇所を囲って目立たせてくれます。色味は変更。
引用のスタイル変更
CSSで作る！魅力的な引用デザインのサンプル30（blockquote）
引用時の見た目を変えています。色味のみ変更。
広告関連
アドセンス
【コピペ一発】はてなブログで記事中アドセンス自動挿入とカテゴリ広告非表示を同時に実現する方法 - まるとANAの旅事情
google神から、「あなたのサイドバーとフッタの広告全然見られてないから改善しなさい」という指摘が来たので、適当に配置してた広告を見直しました。
自分はPC閲覧メインですが、アナリティクスによるとこのブログはスマホ閲覧がほとんど。スマホで見てみると、サイドバーやフッタって記事の下に来るので、そこの広告が見られないのは納得…
ということで記事内に入れました。自動挿入できるなんてすごすぎる便利すぎる。
ヨメレバ・カエレバ
ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ - Yukihy Life
ヨメレバ・カエレバで本や商品を紹介するときの見た目を変えました。
フッタ
はてなブログのフッター、フッターメニューまわりのカスタマイズ - Minimal Green
フッタの表示、色も変更。はてなのフッタは非表示にしてます（PRO機能）
フッタつくだけでなんか締まりが出る気がします！
TOPへ戻るボタン
はてなブログで自分だけの「TOPに戻る」ボタンを作るカスタマイズ - もう勝負ついてるから。
右下に「TOPへ戻る」ボタンをつけました。オリジナル画像でやると笑える…！
まとめ
あまりに細かいものは省いていますが、およそこのくらいだと思います。
テーマ配布元の「NO TITLE」さんのところには、たくさんネタがまとまっているので何か変えたいときはのぞいています。
必見！はてなブログのカスタマイズを一気に紹介する - NO TITLE
たくさんカスタマイズしてしまうと、コードが被っていたり、同じCSSを読み込んでいたりすることもあったりで、表示が無駄に重くなってしまう点は注意ですね。
そういうのはバックアップを取ったうえでこつこつ省いたりしました。
最後に、カスタマイズがコピペ一発でできるなんて、本当にありがたいです。
配布元の方々に敬意をこめて・・・ありがとうございます。
本日は以上です。
