主婦のすきま時間の遊び研究サイト(主にゲーム)もやってます

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

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

こんにちは、主婦ブロガーくうかです。

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

当ブログも最初は上手くいきませんでしたが、調べまくってやっと解決できたという経緯がありましたので、備忘録がてら参考にさせていただいた記事をご紹介したいと思います。
※現在はワードプレスへ移行しています。

目次

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

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

ヘッダー画像の準備と設定

まず、はてなブログ推奨サイズの1000×200でヘッダーとなる画像を用意します。
私は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%にするとぴったりでした!

余白がなくなりました!

スマホでの表示の見栄え調整のCSS

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つに対応すれば私のブログでは大丈夫でした!

本日も最後までご覧いただき、ありがとうございました。

応援クリックしていただけると嬉しいです!

ブログランキング・にほんブログ村へ 人気ブログランキング

楽天で買ったものやおすすめを紹介しています

rakutenroom

コメント

コメント一覧 (10件)

  • soilwork0106 より:

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

  • puchico111 より:

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

  • ku-kahan より:

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

  • ku-kahan より:

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

  • fuku-utsuo より:

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

  • ku-kahan より:

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

  • bayo_fantasy より:

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

  • ku-kahan より:

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

  • houjoh37 より:

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

  • ku-kahan より:

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

コメントする

CAPTCHA


目次
閉じる