はてなブログのヘッダー画像の余白をなくしスマホも美しく表示させる
こんにちは、ゆるミニマリスト主婦のくうかです。
はてなブログでヘッダー画像を設定すると、余白ができてしまったことなどありませんか？
当ブログもはじめは上手くいきませんでしたが、調べてやっと解決できたという経緯がありましたので、備忘録がてら参考にさせていただいた記事を紹介させていただきます。
くうかお悩みの方の参考になれば嬉しいです。
※現在はワードプレスへ移行しています。
はてなブログでヘッダー画像の余白をなくす方法
ヘッダー画像の準備
まず、はてなブログ推奨サイズの1000×200pxでヘッダーとなる画像を用意します。
私はCanvaというツールを使用してヘッダー画像を作成しました。
完成したものがこちら↓
ヘッダー画像の設定
１．この画像を、
デザイン＞カスタマイズ＞ヘッダ＞画像をアップロード
で設定します。
２．その下の「表示設定」にて【画像だけ表示】を選択します。
ここまでは問題なくできると思います。
しかし画像の周りに余白ができてしまっているのではないでしょうか。
推奨サイズなのに余白ができちゃうってちょっと納得いきませんが・・・(笑)
白くてわかりづらいですが赤枠をつけた部分が余白になってしまっています。↓
この余白部分を取るための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を使用した時にもうまくいきました
今回紹介したこと。
- ヘッダー画像設定後の余白を非表示にする
- スマホの表示を美しくする
この２つに対応すれば私のブログでは大丈夫でした！
くうか素敵なヘッダーをきれいに表示させましょう。
この記事が気に入ったら
フォローしてね！
コメント
コメント一覧 （10件）
貴重な情報ありがとうございます。
自分もオシャレにしたいと思いつつ後回しにしてしまっているのが現状(´･ω･`)
スマニュやGoogleの掲載が上がってきたら、
考えようかなぁ）Oo｡.（´-`）
ku-kaさんこんにちは♪
凄く有難い記事です！
私も色々調べながら試したのですが、結局解決できなかったので早速試してみたいと思います！
ありがとうございました♪
fitness-tomoさん
ヘッダーをいじるだけでも雰囲気変わりますもんね！
シンプルも軽いしすごくいいと思いますが、お好みですね(*’▽’)
ぷちこさん
ぷちこさんもMinimalismですもんね＾＾
私と同じ解決方法で解決できるといいのですが・・・。
ドキドキ(/ω＼)
なるほど、勉強になります。
スマホのほうがアクセス多いのに、なんかいい加減にしてしまいます。
自動的にあるていどは体裁ととのえてあるので、まあいっか、と。
細かい部分に手入れしないといけないですね。
ありがとうございました。
ブクマもありがとうございました。
ふくさん
スマホのほうが圧倒的に多いですよね。
一応スマホからの表示もチェックしておいたほうがいいと思います(*^^)v
細かい部分はどうですかね、自己満足になってくるかもしれませんが(笑)
私もある程度はやっておこうと思います！
くうかさん初めまして。
ブログをはじめたばかりのばよと言います。
おもにパソコンで作業していますが、
ヘッダー画像が変に余白ができてしまっていたので、さっそく記事の通りにCSS入力しました。
おかげさまでいい感じになりました！
ありがとうございます(^^)
ばよさん
初めまして！
うまくいって良かったです！
はてなブログのヘッダーは一筋縄ではいきませんよね(>_<)
ありがとう！
くうかさん以外のヘッダの調整はどのブログに書いてあるコードを使っても無理でした。くうかさんすごい！
37Houjoさん
初めまして！
それはとても嬉しいです。
なかなかヘッダーはうまくいかないですよね。
コメントありがとうございました(^^♪