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

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

f:id:yuzumochi3:20171114003820j:plain

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

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

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

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になるように指定しています(環境に応じて変えてみてください)。

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

f:id:yuzumochi3:20171114002800j:plain

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

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

先ほどのコードに、上下の余白をなくすコードを追加します。
/*  レスポンシブヘッダー調整  */
@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」が下の余白を指定しています。

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

まとめ

今回のコードはこちらのものをアレンジさせていただきました。

blog.z0i.net

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