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

いつもマイナーチェンジ!

普段の生活をほんの少しだけ便利で楽しくする情報を

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

ブログ関連 ブログ関連-小技 ブログ関連-カスタマイズ

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

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

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

 

f:id:mayoi_inu:20141110223520j:plain

 

8.プロフィール画像の作成と変更

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

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

f:id:mayoi_inu:20141109162616p:plain

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

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

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

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

 

9.タイトル画像の作成と変更

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

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

コチラが変更前。

f:id:mayoi_inu:20141110214144j:plain

 

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

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

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

 

f:id:mayoi_inu:20141110215211j:plain

 

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

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

#blog-title {
    height: 60px;
}

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

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

 

f:id:mayoi_inu:20141110215808j:plain

 

10.ブログアイコンの変更

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

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

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

f:id:mayoi_inu:20141110221220j:plain

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

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

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

f:id:mayoi_inu:20141110221946p:plain

 

あとがき

“まよい犬

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

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

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

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