【はてなブログ】PC版ヘッダー画像が切れてしまう場合の対処法

　最近、当ブログのヘッダー画像を変更したのですが、画像の端が切れてしまったりと中々うまくいかずに悪戦苦闘しました（汗。

　試行錯誤した結果、なんとかうまくいったのでその方法を書いていこうと思います。

実験

　ヘッダーに上の様な画像を置くとします。サイズは900px×300pxと900px×200pxの2種類を用意。

　画像のどこが切れてしまうのかが分かりやすいように赤、青、黄色の枠を付けました。枠の幅は一色約10pxに設定。

900×300の画像を使用した場合

　「デザイン」→「ヘッダ」→「タイトル画像」→「ファイルを選択」に900×300の画像を選択してみると、

　↑このような結果に。色が暗くなっている部分は表示されないので、高さが合っていないのが分かります。

　ということで900×300は使えないということになります。

900×200の画像を使用

　↑900×300の画像の時と同じように設定すると、このような結果になりました。

　高さは200でぴったりのようですが、両端が切れてしまっています。

　両端部分の一番内側の黄色の枠まで見えなくなっているので、幅は今の900pxよりも少なくとも60px以上小さくしないと切れてしまうことになります。

ブログ幅を変えてみる

　900×200の画像の画像を使用したままブログ幅を変更してみます。

　「デザイン」→「デザインCSS」の中に以下のCSSコードを入れてみます。

　↑そうするとぴったりハマってくれました。

　使っているテンプレートによってはヘッダー部分に「margin」が設定されている場合もあると思うので、その場合はブログ幅をヘッダ画像の幅より少し多めにとらないと切れてしまう可能性がありそう。

まとめ

　最初にブログ幅を設定してから、そのサイズと同じ幅のヘッダー画像を作成するという手順が一番楽ですね。

　高さに関しては200pxで問題なさそう。

　すでに画像を作成し終わっていてうまくいっていない場合、どうしてもブログ幅を変えたくない場合は画像サイズを変えるしかありませんが、「少しくらい気にならないよ」という場合はブログ幅を変えてしまった方が対処が早いと思います。

　画像作成面倒ですからね…（汗。

　それともう一つ、ブログ幅を広くすると記事本文とサイドバーの間隔も広がってしまいます。

　↑以前、ブログ幅、記事本文幅、サイドバーの幅変更に関しての記事を書いたので参考にしていただければ幸いです。