こんにちは、もちみです。
ブログのカスタマイズはちょこちょこしているのですが、いつの間にか何をどういじったのか…になってしまっていました。
カスタマイズで参考にした記事はほぼブクマしていたので、今回大幅にいじったのをきっかけに、それらをきちんと整理しました。
履歴を残すためにもこの記事にまとめていきます。（随時追加予定）
スポンサーリンク
使用したテーマ
説明不要の大人気テーマ、Brooklynを使用させていただいています。
他のテーマに変更したこともあったのですが、やはり使いやすくてこのテーマに戻ってきました。スマホはレスポンシブデザインに対応。
ヘッダー画像
変更前）
変更後）
変更前のやっつけ感よ…
本当はココナラとかで注文した方がいいのでしょうが、普段の自分のイラストとクオリティの差が出そうだったので自作しました。
絵日記の配色もパステル系が多いので、同じようにパステル系の色味にしてみました。
グローバルナビ
サブメニューの表示
Brooklynのグローバルナビをドロップダウンにする方法 - NO TITLE
本家の方で解説があったので、そのまま流用。
サブメニューがドロップダウンで表示されるのオサレすぎる。
色の変更
はてなブログテンプレート【Brooklyn】のカスタマイズ集 - Style 21世紀×Deaf×INFP
ナビの色は元々黒だったのですが、ヘッダ画像を変えたことで合わなくなってしまったので変更しました。
変更前）
変更後）
一気にブログ全体の雰囲気が変わりました。これはやってよかったです。
同じ記事を参考に、サイドバーのタイトル吹出枠、記事上の日付の色を変更しました。
メニューにアイコン表示
上の画像には反映されてませんが、各メニューにアイコンをつけました。
【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
リンク箇所を囲って目立たせてくれます。色味は変更。
広告関連
アドセンス
【コピペ一発】はてなブログで記事中アドセンス自動挿入とカテゴリ広告非表示を同時に実現する方法 - まるとANAの旅事情
google神から、「あなたのサイドバーとフッタの広告全然見られてないから改善しなさい」という指摘が来たので、適当に配置してた広告を見直しました。
自分はPC閲覧メインですが、アナリティクスによるとこのブログはスマホ閲覧がほとんど。スマホで見てみると、サイドバーやフッタって記事の下に来るので、そこの広告が見られないのは納得…
ということで記事内に入れました。自動挿入できるなんてすごすぎる便利すぎる。
ヨメレバ・カエレバ
ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ - Yukihy Life
ヨメレバ・カエレバで本や商品を紹介するときのカスタマイズです。
フッタ
はてなブログのフッター、フッターメニューまわりのカスタマイズ - Minimal Green
フッタの表示、色も変更。はてなのフッタは非表示にしてます（PRO機能）
まとめ
あまりに細かいものは省いていますが、およそこのくらいだと思います。
テーマ配布元の「NO TITLE」さんのところには、たくさんネタがまとまっているので何か変えたいときはのぞいています。
必見！はてなブログのカスタマイズを一気に紹介する - NO TITLE
たくさんカスタマイズしてしまうと、コードが被っていたり、同じCSSを読み込んでいたりすることもあったりで、表示が無駄に重くなってしまう点は注意ですね。
そういうのはバックアップを取ったうえでこつこつ省いたりしました。
最後に、カスタマイズがコピペ一発でできるなんて、本当にありがたいです。
配布元の方々に敬意をこめて・・・ありがとうございます。
本日は以上です。