はてなブログヘッダー画像サイズと余白設定!スマホレスポンシブ対応版


ブログサポート60の石黒です。

今回は、以下のような方への記事です。

  • はてなブログ ヘッダー画像の設定がうまくいかない!
  • はてなブログ ヘッダー画像スマホからうまく表示されない
  • はてなブログ ヘッダー画像の上下の余白が気になる

はてなブログのminimalismとBrooklynという人気のデザインテーマで試した、ヘッダー画像の設置のやり方です。

他のテーマでもできるかは、試してみてください。テーマによって微調整が必要になります。

 

はてなブログ ヘッダー画像を上手に表示させる設定の手順

パソコンと悩んでいる女性のイラスト

はてなブログ ヘッダー画像の設定方法の動画も撮りました。

動画のほうが分かりやすいと思います。下の方に動画もありますのでご覧ください。

 

はてなブログ ヘッダー画像おすすめの用意方法

「はてなブログ ヘッダー画像があまり気に入っていない。オリジナルのヘッダー画像にしたい!」

でもどうやったらヘッダー画像を用意したらいいのでしょうか?

ココナラがおすすめです。とても安くヘッダー画像を作ってもらえるからです。

 

わたしのこちらのヘッダー画像は、ブログサポート60の「副業ブログの作り方セミナー」にきてくださった方が作ってくださいました。

ココナラでも出品されていると、おっしゃっていました。

似顔絵であれば、500円から作ってもらうことができます。

わたしのブログの表示されている似顔絵も、ココナラで作ってもらいました。
石黒敬太似顔絵

似顔絵の金額は3,000円でした。
安くやってくれる方を探せば500円で作ってもらえますよ!

※実際に注文する前に、はてなブログでヘッダー画像のテストをしましょう。

テスト後にココナラで発注されることをおすすめします。

ココナラで、「ヘッダー画像」と検索すると作ってくれる人がたくさんでてきます。

販売実績が多くて、高評価の☆がたくさんついている、経験が豊富な人にお願いしましょう。

ココナラのヘッダー画像のページ

会員登録はもちろん無料です。

>>ココナラを見てみる

 

はてなブログ ヘッダー画像おすすめのサイズは?

「ココナラで作りたい!でも、はてなブログヘッダー画像のサイズはどうしたらいいの?」

こんな疑問がでてきますよね!

はてなブログヘッダー画像のサイズは、以下の2つどちらかにされることをおすすめします。

  1. 1000×200(設定する作業が多い)
  2. 400×200(設定する作業が少ない)

以下どっちのヘッダー画像のサイズが良いか、選んでください。

 

ヘッダー画像が1000×200のはてなブログ

1000×200のサイズの見え方

 

ヘッダー画像のサイズが400×200のはてなブログ

400×200のサイズの雰囲気

ココナラで上記のサイズを注文する前に、テストで試してください。

うまくカスタマイズができたら、発注するようにすると失敗しないですみます。

 

はてなブログのヘッダー画像の設定のやり方

手っ取り早くはてなブログのヘッダー画像設置をやりたいかたは、こちらの動画を見てください。

【動画】1000×200と400×200サイズの、ヘッダー画像の設置方法↓

【図解】ヘッダー画像の設置方法

はてなブログの管理画面→デザイン

管理画面→デザイン設定へ

カスタマイズ→画像のアップロード(参照)→画像だけ表示→画像を選ぶ
画像の設置方法

 

ヘッダー画像のサイズが大きくても位置の調整ができます。ヘッダー画像の位置が決まったら「適用」を押します。
位置調整

 

ヘッダー画像の設置が完了!「変更を保存する」を忘れずに押してください。

ヘッダー画像の設置が完了!変更を保存するを忘れずに押す

 

はてなブログのヘッダー画像スマホレスポンシブデザインでうまく表示されない

「1000×200のサイズを選んで、はてなブログに設置をしてみた。でも、スマホのレスポンシブデザイン対応の表示からうまく表示されない!
以下の作業をすれば解決します。

※こちらの記事を読んでレスポンシブデザイン対応にしておくことをおすすめのします。

1000×200のサイズを選ぶと、こんな感じにスマホから表示させると画像の真ん中しか表示されなくなってしまうんですよね↓↓。

スマホから画像が上手に表示されない

でも、デザインCSSに以下のコードを貼るだけのカスタマイズで、きちんと表示されるようになるのでご安心ください。

1000×200サイズのヘッダー画像をスマホでも正常に表示させるコード


/* ヘッダー画像をスマホでも正常に表示 */
@media (max-width:480px) {
.header-image-only #blog-title {
height: 70px;
}
.header-image-only #blog-title #blog-title-inner {
background-size: cover;
height: 75px;
}
}

background-size: cover;
height: 75px;

の部分は、デザインテーマによって70pxや80pxなど、微調整してください。

  • デザインテーマがBrooklyn→70px
  • デザインテーマがMnimalism→75px

上記のコードをデザインCSSに貼り付けます。
デザインCSSに貼り付け

「変更を保存をする」青いボタンをおすと、1000×200のスマホのヘッダー画像もきちん表示されます。

スマホでも正常に表示された

 

※はてなブログのヘッダー画像のサイズを「400×200」にすると、レスポンシブデザイン対応にしたスマホからも正常に真ん中に表示されます。デザインCSSにコードを貼る作業がないので楽です。

 

はてなブログのヘッダー画像上下の余白を消す設定方法

1000×200 400×200のサイズ、どちらのヘッダー画像サイズもの上下に空白ができてしまっていますよね。

1000×200のヘッダー画像の余白

1000×200の画像の余白

 

400×200サイズのヘッダー画像の余白

400×200サイズの画像の余白

この余白を消すやり方です。

デザインCSSに以下のコードを貼ってください。

デザインCSSに貼り付け

はてなブログヘッダー画像の上下の余白を消すコード


 #blog-title {
    margin: 0 auto;
    padding: 0;
}

そうすると、以下のようにヘッダー画像の上下の余白を消すことができます。

余白が消えてきちんと表示された

 

はてなブログのヘッダー画像のカスタマイズが反映されないときの対処方法

「デザインCSSに、ヘッダー画像の設定を変えるコードを入れたよ!でも、反映されない!」という方はこちらの動画を見てください。

デザインCSSに貼り付けたコードを上の方にもってくると、きちんと反映されることがあります。
ヘッダー画像だけではなく、他のカスタマイズでも同じ作業できちんと表示されたりすることがあります。
覚えておいてください。

 

まとめ(はてなブログのヘッダー画像の設定)

ヘッダー画像作成で時間がかかってしまうと、「時間がもったいない」と感じてしまいますよね!
サクッと終わらせてしまいましょう。

時間をかけたくない方は、400×200が簡単なのでおすすめです。

わたしも手間なしでやりたかったので、400×200でやりました。

見栄えも悪くないと思います!

ココナラでヘッダー画像の作成をしてもらって、オリジナルのブログを作ってください。

会員登録はもちろん無料です。

>>ココナラを見てみる

ヘッダー画像の設置がおわったら、はてなブログの設定もきちんと終わらせておきましょう。
設定を変更するだけでも、アクセスが上がったりします。
損をしないためにも!