はてなブログカスタマイズ（ヘッダー画像編）

こんにちは！yaikeです。
今日はせっかくブログを始めたので、快適にブログライフを送るため、ちょっとカスタマイズをしてみました。
開発ツールを使いながら自分のブログのidやclassを解析しつつぽちぽちと。
カスタマイズする間に調べたことなど、メモしておこうと思います！
ヘッダー画像設定編です。

ヘッダー画像作成

まずPhotoshopを使ってヘッダーの画像を作成しました。
かわいらしい感じにしたかったのと、さくっと作成したかったので、下記のサイトからアイコンをお借りしてきました。
Endless Icons | Free Icon Library
虫眼鏡アイコンやホームアイコンなど実用的なものから、
ピザなどの食べ物アイコンやひげアイコンなど変わったものもあって面白いです。
png形式とsvg形式でダウンロードできるフリーアイコンになります。

ヘッダー画像設定

ダッシュボード＜デザイン＜カスタマイズ＜ヘッダ
と進んだところにある、タイトル画像でヘッダー画像は設定できます。
表示設定は「画像だけ表示」にしておきます。

これで完成！とおもいきや……

思いっきりヘッダー画像の下に空白が！！！

レスポンシブデザインのテーマを選んでいるのですが、
ウィンドウサイズを狭めれば狭めるほど、ヘッダー画像の下に空白ができてしまうのです……
しかも画像の両端が見切れてしまう……

画像両端の見切り解消方法

両端の見切りはデザインCSSですぐに解消できます！
参考にさせていただいたのはこちら↓

ダッシュボード＜デザイン＜カスタマイズ＜デザインCSS
この中に、

 #blog-title-inner { 
　　　background-size: contain; 
} 

これを記述するだけ！簡単に見切りが解消できました！

画像下の空白解消方法

空白解消についても同じサイトを参考にさせていただきました。
はてなブログにヘッダ画像を設定しよう - だいありぃ
ただ、わたしの使用しているデザインテーマ「Journal-Pink」では、
書かれているscriptではうまくいきませんでした……。
idの部分を変更して、

<script>
document.getElementById('blog-title').innerHTML = '<a href="/"><img src="画像URL" alt="ブログ名" width="100%"></a>';
</script>

とすればできたので、もしうまくいかなければ開発ツールでidを見てみた方がいいかもしれません。

完成！！

これでウィンドウを狭めてもおかしな空白がでることも、画像が見切れることもなくなりました！
ひとまずレスポンシブデザインにして一番気になっていたところを解決できたのでよかったです♪