【ブログ小技】僕がやったブログの初歩的カスタマイズ（その３）ヘッダ画像下の空白除去など

はてなブログのカスタマイズ３日目です。

やり出したらいろいろ気になってくるものですね。

例のごとく、書き留めておきます。

８．プロフィール画像の作成と変更

プロフィール画像は、前はビーグルの写真を使っていたのですが、ハウスから飛び出してきた瞬間を撮った写真なので、若干ボケているたのと、いまいち個性がありませんでした。

ちなみに以前の写真はコチラ。

なので、Keynoteを使って作成してみました。

一応、背景にあるのは「iPhone」のつもりです。

◯ヌーピーっぽくも見えるのですが^^;

でも、以前の写真よりもずっとブログ内容に適したイメージになったので、結構気に入っています。

９．タイトル画像の作成と変更

これまではテンプレートのものをそのまま使用していたのですが、これでは同じレイアウトの人もいますので個性がありません。

なので、Keynoteで作成してみました。

コチラが変更前。

テンプレートなので、他に同じレイアウトの方もいますし、味気ないですね。

そして、やっぱり自分で作ったものは愛着が全然違います。

ただ、画像を作成して貼り付けたら、なんでか謎の空白ができてしまいました。

いろいろ調べてると、はてなブログ特有の現象（？）だそうで、勝手に余白を入れられてしまうようです。

なので、ヘッダ画像部分の高さ設定を変えてやる必要があります。

#blog-title {
    height: 60px;
}

こちらを、管理画面の「デザイン→カスタマイズ→デザインCSS」に記述してあげれば解決です。

（下の画像では上記以外にもいろいろ記載していますが、今回のものを修正するだけなら上の３行だけでOKです。）

１０．ブログアイコンの変更

せっかくプロフィール画像を作成したので、それをそのままブログアイコンに設定しました。

設定は管理画面から「設定→詳細設定→ブログアイコン」で変更できます。

そうすると、ブラウザのタブにこんな感じで表示されます。

今まではすぐ隣りにある、はてなブログのアイコンだったので、こちらも個性が出てきました。

元画像を知らないと、なんのことやら分からないのはご愛嬌です。

また、スマートフォン版の表示もこのアイコンに変更されます。

あとがき

やり出すといろいろ変えたくなるもので、欲が出てきますね。

特にブログタイトル画像やプロフィール画像を変えると、ブログの雰囲気がガラッと変わります。

作成に土日をほぼ潰してしまった感じですが、それでもやって良かったと思える出来栄えにはなりました。

あとは、また更に細かな改良を少しずつやっていきたいですね！