はてなブログヘッダー画像サイズと余白消す【スマホレスポンシブ対応版】
ブログサポート６０の石黒です。
今回は、以下のような方への記事です。
- はてなブログ ヘッダー画像の設定がうまくいかない！
- はてなブログ ヘッダー画像スマホからうまく表示されない（見切れてしまう）
- はてなブログ ヘッダー画像の上下の余白を消したい
はてなブログのminimalismとBrooklynという人気のデザインテーマで試した、ヘッダー画像の設置のやり方です。
はてなブログの他のテーマでもできるかは、試してみてください。テーマによって微調整が必要になります。
ヘッダー画像がスマホから表示されないのをすぐに解決したい方は目次をクリックしてください。
目次
はてなブログのヘッダー画像のサイズは?上手に表示させる設定の手順
はてなブログ ヘッダー画像の設定方法の動画も撮りました。
動画のほうが分かりやすいと思います。下の方に動画もありますのでご覧ください。
はてなブログ ヘッダー画像おすすめのサイズは?
「ココナラで作りたい！でも、はてなブログヘッダー画像のサイズはどうしたらいいの?」
こんな疑問がでてきますよね！
はてなブログヘッダー画像のサイズは、以下の２つどちらかにされることをおすすめします。
- １０００×２００px（設定する作業が多い）
- ４００×２００px（設定する作業が少ない）
以下どっちのヘッダー画像のサイズが良いか、選んでください。
はてなブログのヘッダー画像が１０００×２００のはてなブログ
はてなブログのヘッダー画像のサイズが４００×２００のはてなブログ
ココナラで上記のサイズを注文する前に、テストで試してください。
うまくカスタマイズができたら、発注するようにすると失敗しないですみます。
はてなブログ ヘッダー画像おすすめの用意方法
「はてなブログ ヘッダー画像があまり気に入っていない。オリジナルのヘッダー画像にしたい！」
でもどうやったらヘッダー画像を用意したらいいのでしょうか?
ココナラがおすすめです。とても安くヘッダー画像を作ってもらえるからです。
わたしのこちらのヘッダー画像は、ブログサポート６０の「副業ブログの作り方セミナー」にきてくださった方が作ってくださいました。
ココナラでも出品されていると、おっしゃっていました。
似顔絵であれば、500円から作ってもらうことができます。
わたしのブログの表示されている似顔絵も、ココナラで作ってもらいました。
似顔絵の金額は3,000円でした。
安くやってくれる方を探せば500円で作ってもらえますよ！
※実際に注文する前に、はてなブログでヘッダー画像のテストをしましょう。
テスト後にココナラで発注されることをおすすめします。
ココナラで、「ヘッダー画像」と検索すると作ってくれる人がたくさんでてきます。
販売実績が多くて、高評価の☆がたくさんついている、経験が豊富な人にお願いしましょう。
会員登録はもちろん無料です。
＞＞ココナラを見てみる
無料でも比較的かんたん、キレイに、ヘッダー画像を作る方法もあります。
はてなブログでのCANVAの使い方！ヘッダー画像とアイキャッチ画像が簡単に作れる
はてなブログのヘッダー画像の設定（設置）のやり方
手っ取り早くはてなブログのヘッダー画像の設置をやりたいかたは、こちらの動画を見てください。
【動画】１０００×２００と４００×２００サイズの、ヘッダー画像の設置方法↓
【図解】ヘッダー画像の設置方法
はてなブログの管理画面→デザイン
カスタマイズ→画像のアップロード（参照）→画像だけ表示→画像を選ぶ
ヘッダー画像のサイズが大きくても位置の調整ができます。ヘッダー画像の位置が決まったら「適用」を押します。
※縦のサイズを200pxにしていれば、この調整作業は必要ありません。
ヘッダー画像の設置が完了！「変更を保存する」の青いボタンを忘れずに押してください。
はてなブログのヘッダー画像スマホレスポンシブデザインでうまく表示されない（見切れる）
「１０００×２００のサイズを選んで、はてなブログに設置をしてみた。でも、スマホのレスポンシブデザイン対応の表示からうまく表示されない！」
以下の作業をすれば解決します。
※こちらの記事を読んで、レスポンシブデザイン対応のはてなブログのデザインテーマをインストールしておくことをおすすめのします。
１０００×２００のサイズを選ぶと、こんな感じにスマホから表示させると画像の真ん中しか表示されなくなってしまうんですよね↓↓。
でも、デザインCSSに以下のコードを貼るだけのカスタマイズで、きちんと表示されるようになるのでご安心ください。
１０００×２００サイズのヘッダー画像をスマホでも正常に表示させるコード
/* ヘッダー画像をスマホでも正常に表示 */
@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にコードを貼る作業がないので楽です。
はてなブログのヘッダー画像の上下の余白を消す設定方法（スマホレスポンシブも対応）
１０００×２００ ４００×２００のサイズ、どちらのヘッダー画像サイズもの上下に空白ができてしまっていますよね。
１０００×２００のヘッダー画像の余白
４００×２００サイズのヘッダー画像の余白
この上下の余白を消すやり方です。
「デザイン」→「カスタマイズ」→「デザインCSS」に以下のコードを貼ってください。
はてなブログヘッダー画像の上下の余白を消すコード
#blog-title {
margin: 0 auto;
padding: 0;
}
そうすると、以下のようにヘッダー画像の上下の余白を消すことができます。
はてなブログのヘッダー画像のカスタマイズが反映されないときの対処方法
「デザインCSSに、ヘッダー画像の設定を変えるコードを入れたよ！でも、反映されない！」という方はこちらの動画を見てください。
デザインCSSに貼り付けたコードを上の方にもってくると、きちんと反映されることがあります。
ヘッダー画像だけではなく、他のカスタマイズでもCSSコードを上にもってくる作業できちんと表示されたりすることがあります。
デザインCSSコードに貼り付けたコードによって、他のCSSの効果がなくなってしまうことがあります。
他のデザインCSSの効果がきちんと反映されているかを必ず確認するようにしてください。
CSSをいじるときは事前に、CSSをWindowsの機能のメモ帳にコピペするなりしてから変更するようにしましょう。
まとめ（はてなブログのヘッダー画像がスマホから上手に表示されない。サイズと余白は?）
はてなブログのヘッダー画像作成で時間がかかってしまうと、「時間がもったいない」と感じてしまいますよね！
サクッと終わらせてしまいましょう。
時間をかけたくない方は、４００×２００が簡単なのでおすすめです。
わたしも手間なしでやりたかったので、４００×２００でやりました。
見栄えも悪くないと思います！
ココナラでヘッダー画像の作成をしてもらって、オリジナルのブログを作ってください。
会員登録はもちろん無料です。
＞＞ココナラを見てみる
ヘッダー画像の設置がおわったら、はてなブログの設定もきちんと終わらせておきましょう。
はてなブログの設定をきちんと正しい変更するだけでも、アクセスが上がったりします。
損をしないためにも！
その他はてなブログの初心者がやるべきカスタマイズの記事も見ていただけると嬉しいです。
最新記事 by 石黒敬太 (全て見る)
- 【はてなブログ】Microsoft Clarityの設置方法（ヒートマップ） - 2023年1月29日
- YouTubeでAmazonのアフィリエイト広告を貼る（もしもアフィリエイト） - 2021年12月30日
- 日記が毎日２００アクセスの記事に！ - 2021年11月19日
