MENU
アーカイブ
くうか
ミニマリスト
ミニマリスト・ブロガー・ライター。
整理収納アドバイザー準1級、元SE。
引っ越しをきっかけに物を減らすことを決意。快適なシンプルライフへの過程を発信しています。
SWELLでサイト型トップページを作る!解説→CLICK!

はてなブログのヘッダー画像の余白をなくしスマホも美しく表示させる

当ページのリンクには広告が含まれています。
はてなブログのヘッダーの余白をなくす

こんにちは、ゆるミニマリスト主婦のくうかです。

はてなブログでヘッダー画像を設定すると、余白ができてしまったことなどありませんか?

当ブログもはじめは上手くいきませんでしたが、調べてやっと解決できたという経緯がありましたので、備忘録がてら参考にさせていただいた記事を紹介させていただきます。

くうか

お悩みの方の参考になれば嬉しいです。

※現在はワードプレスへ移行しています。

目次

はてなブログでヘッダー画像の余白をなくす方法

カスタマイズを行う前に、必ずバックアップ(メモ帳等にコピペなど)を取ってください。
元からあるCSSコードはそのままにしてください。

ヘッダー画像の準備

まず、はてなブログ推奨サイズの1000×200pxでヘッダーとなる画像を用意します。

私はCanvaというツールを使用してヘッダー画像を作成しました。

完成したものがこちら↓

ヘッダー画像

ヘッダー画像の設定

1.この画像を、

デザイン>カスタマイズ>ヘッダ>画像をアップロード

で設定します。

2.その下の「表示設定」にて【画像だけ表示】を選択します。

ここまでは問題なくできると思います。

しかし画像の周りに余白ができてしまっているのではないでしょうか。
推奨サイズなのに余白ができちゃうってちょっと納得いきませんが・・・(笑)

ヘッダー調整前

白くてわかりづらいですが赤枠をつけた部分が余白になってしまっています。↓

ヘッダーの余白部分

この余白部分を取るためのCSSを追加します。

CSSの追加

デザイン>カスタマイズ>デザインCSS
に、CSSの記述を追加します。

ヘッダー画像の余白を非表示にするカスタマイズは、たくさん記事があり、色々試してみたのですが、こちらの記事のカスタマイズでようやく上手くいったのです!

ありがとうございます!!Minimalismをお使いの方はしっくりいくのではと思います。

以下のCSSを追加します。

/* ヘッダー画像の比率の調整↓ */
.header-image-only #blog-title #blog-title-inner {
position: relative;
background-size: cover;
height: auto;
}
.header-image-only #blog-title #blog-title-inner:before {
display: block;
content: "";
width: 100%;
padding-top: 20%;
}
.header-image-only #blog-title #blog-title-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

/* ヘッダー上下の余白を取る */
#blog-title {
margin: 0 auto;
padding: 0;
}
/* ヘッダー画像の比率の調整↑ */

11行目の【padding-top】の数値は、ご自分で準備された画像のサイズに合わせて微調整してください。
私の場合は高さが200で、20%にするとぴったりでした!

余白がなくなりました!

ヘッダー調整後

はてなブログでのヘッダー画像をスマホでもきれいに表示させる

PCでの表示は上記のCSSでOKとなりましたが、スマホの表示もチェックしてみましょう。

私のブログの場合、なんだかスマホだとヘッダー画像が小さく表示されてしまいます。

こちらの記事のやり方で上手くいきました。ありがとうございます!!!

以下のCSSを追加します。

/* ヘッダースマホ対策 */
@media (max-width:480px) {
.header-image-only #blog-title {
height: 100px;
}
.header-image-only #blog-title #blog-title-inner {
background-size: cover;
height: 100px;
}
}

このような感じになります。↓↓↓

スマホのヘッダー表示

見た目が良くなりました~!

はてなブログのヘッダー画像の余白をなくす方法まとめ

今回のヘッダーの修正は、Minimalismを使っている方向けとなっています。

SOHOで試してみるとダメでしたので(^^;
※その後、UnderShirtを使用した時にもうまくいきました

今回紹介したこと。

  • ヘッダー画像設定後の余白を非表示にする
  • スマホの表示を美しくする

この2つに対応すれば私のブログでは大丈夫でした!

くうか

素敵なヘッダーをきれいに表示させましょう。

ぽちっとしていただけると嬉しいです

にほんブログ村 ライフスタイルブログ ミニマリストへ

楽天ROOMに愛用品を登録しています

楽天ROOM
はてなブログのヘッダーの余白をなくす

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメント一覧 (10件)

  • 貴重な情報ありがとうございます。
    自分もオシャレにしたいと思いつつ後回しにしてしまっているのが現状(´・ω・`)
    スマニュやGoogleの掲載が上がってきたら、
    考えようかなぁ)Oo。.(´-`)

  • ku-kaさんこんにちは♪
    凄く有難い記事です!
    私も色々調べながら試したのですが、結局解決できなかったので早速試してみたいと思います!
    ありがとうございました♪

  • fitness-tomoさん
    ヘッダーをいじるだけでも雰囲気変わりますもんね!
    シンプルも軽いしすごくいいと思いますが、お好みですね(*’▽’)

  • ぷちこさん
    ぷちこさんもMinimalismですもんね^^
    私と同じ解決方法で解決できるといいのですが・・・。
    ドキドキ(/ω\)

  • なるほど、勉強になります。
    スマホのほうがアクセス多いのに、なんかいい加減にしてしまいます。
    自動的にあるていどは体裁ととのえてあるので、まあいっか、と。
    細かい部分に手入れしないといけないですね。
    ありがとうございました。
    ブクマもありがとうございました。

  • ふくさん
    スマホのほうが圧倒的に多いですよね。
    一応スマホからの表示もチェックしておいたほうがいいと思います(*^^)v
    細かい部分はどうですかね、自己満足になってくるかもしれませんが(笑)
    私もある程度はやっておこうと思います!

  • くうかさん初めまして。
    ブログをはじめたばかりのばよと言います。
    おもにパソコンで作業していますが、
    ヘッダー画像が変に余白ができてしまっていたので、さっそく記事の通りにCSS入力しました。
    おかげさまでいい感じになりました!
    ありがとうございます(^^)

  • ばよさん
    初めまして!
    うまくいって良かったです!
    はてなブログのヘッダーは一筋縄ではいきませんよね(>_<)

  • ありがとう!
    くうかさん以外のヘッダの調整はどのブログに書いてあるコードを使っても無理でした。くうかさんすごい!

  • 37Houjoさん
    初めまして!
    それはとても嬉しいです。
    なかなかヘッダーはうまくいかないですよね。
    コメントありがとうございました(^^♪

bayo_fantasy へ返信する コメントをキャンセル

CAPTCHA


目次