はてなブログのレスポンシブデザインでヘッダー画像を設定する方法

ブログのヘッダー画像を設定っと。

あれ？スマホ版のヘッダー画像の大きさがうまく調節されない……。

こんにちは。なりです。
はてなブログでブログを始めると高い確率で発生する問題。
それはヘッダー画像が思ったように反映されないという問題です。

はてなブログでレスポンシブデザインを使用している場合、普通に設定するとPCでは問題なく表示されるのですが、スマホではおかしな画像サイズとなってしまいます。
この問題を解消するために一つ作業が必要になるので、今回はその方法をご紹介しようと思います。

ちなみにはてなブログのヘッダー画像推奨サイズは1000×200のようです。
私もそのサイズに合わせてヘッダー画像を用意してます。

はてなブログでヘッダー画像をうまく設定する方法

ではさっそくヘッダー画像をうまく調整する方法について説明します。
作業はとても簡単でコードをコピーして貼り付けるだけです。
さっそくやってみましょう！

①以下のコードをコピーする

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

※タイトル画像上下の余白を調整という部分について
50pxとなっているのが画像上の余白
5pxとなっているのが画像下の余白

コードを貼り付けの際に適宜調整してください。
一度貼り付けてみて微調整するのが良いと思います。

②はてなブログのデザインCSSに追加します。

ダッシュボードのデザインタブを開きます。

カスタマイズの下の方にデザインCSSがあるので、ここにコピーしたコードを追加。
最後に変更を保存するをクリックして終了です。

ヘッダー画像はブログの顔

ヘッダー画像はブログの顔とも呼べる存在です。
その表示がおかしいと、せっかく来てくれた人もページを離れてしまうといった事になりかねません。

ヘッダー画像の表示がおかしい方は早急に対応しましょう。

ちなみに私も最近ヘッダー画像を変更してます。
私の場合はどうしてもオリジナル画像が良かったので、ココナラというサイトでイラストの作成を依頼しました。

過去にココナラを紹介する記事を書いているので、興味がある方は覗いてみて下さい。

www.dailylife-log.com