【これで解決！】スマホ表示をするとタイトル画像の左右が切れる問題【はてなブログ】

はてなブログはレスポンシブ対応が不完全なようで、スマホで見るとタイトル画像（ヘッダー画像）の左右が切れて表示されることがあります。

ヘッダーが文字だけならいいようですが、画像になっているとレスポンシブが効かないようです。というわけで、対処方法です。

画面内にタイトル画像（ヘッダー画像）がおさまるようにする

画面の幅が狭くなるとタイトル画像が縮小されるようにします。

CSS

「デザイン」→「設定」→「デザインCSS」とすすみ、次のコードを貼ります。

/*  レスポンシブヘッダー調整　 */
@media (max-width: 480px){#blog-title-inner,#title a{
height:80px!important;
width:auto;
}
#blog-title-inner {background-size: contain!important; }
}

ここでは画面の幅480pxを境に、画像の高さが80pxになるように指定しています（環境に応じて変えてみてください）。

すると、こんな感じで画面に入るようになりました。

・・・が、画面の上下にある余白が気になる場合があります。

上下の余白をなくすコード

先ほどのコードに、上下の余白をなくすコードを追加します。

/*  レスポンシブヘッダー調整　 */
@media (max-width: 480px){
#blog-title-inner,#title a{
height:80px!important;
width:auto;
}
#blog-title-inner {
background-size: contain!important;
}
/* タイトル画像上下の余白を調整 */
#blog-title {
margin: 10px auto 5px auto;
padding: 0;
}
}

下から4行目の「margin:」のところにある「10px」が上の余白を、「5px」が下の余白を指定しています。

ちょうどいい余白になるよう、お使いのデザインに応じて調整してみてください。

まとめ

ヘッダー画像はブログの顔でもありますので、きちんと表示したいところ。同じ現象が出ている方はぜひ参考にしてみてくださいね。