クラシトトノエ*賃貸の階段のあるおうち

メゾネット2LDKのおうちでインテリア・収納・家計を整えて、シンプルライフを目指しています

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

こんにちは、くうかです!
ブログのヘッダー画像を設定すると、余白ができてしまったことなどありませんか?
当ブログも最初は上手くいきませんでしたが、調べまくってやっと解決できたという経緯がありましたので、備忘録がてら参考にさせていただいた記事をご紹介したいと思います。

 

 

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

f:id:ku-kahan:20190123142113p:plain

 

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

まずはてなブログ推奨サイズの1000×200で画像を用意します。
私はCanvaというツールを使用してヘッダー画像を作成しました。

www.kurasitotonoe.com

 

完成したものがこちら↓

f:id:ku-kahan:20190222215446p:plain

 

1.この画像を、

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

で設定します。

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

 

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

 

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

f:id:ku-kahan:20190308152019p:plain

 

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

f:id:ku-kahan:20190308152016p:plain

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

 

CSSの追加

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

 

ヘッダー画像の余白を非表示にするカスタマイズは、たくさん記事があり、色々試してみたのですが、こちらの記事のカスタマイズでようやく上手くいったのです!
ありがとうございます!!ありがとうございます(´;ω;`)ウッ…
Minimalismをお使いの方はしっくりいくのではと思います。

raku-book.hatenablog.com

以下の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;
}
/* ヘッダー画像の比率の調整↑ */

赤い文字の部分は、ご自分で準備された画像のサイズに合わせて微調整してください。
私の場合は高さが200で、20%にするとぴったりでした!

f:id:ku-kahan:20190308152023p:plain



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

PCでの表示は上記のCSSでOKとなりましたが、スマホの表示もチェックしてみましょう。
私のブログの場合、なんだかスマホだとヘッダー画像が小さく表示されてしまって(;´∀`)

 

こちらの記事のやり方で上手くいきました!
ありがとうございます!!!ヾ(*´∀`*)ノ

www.imaichido.com

以下の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;
}
}

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

f:id:ku-kahan:20190308153141j:plain

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

 

まとめ

今回のヘッダーの修正は、Minimalismを使っている方向けとなっています。
SOHOで試してみるとダメでしたので(^^;

 

今回ご紹介したこと。

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

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

 

※カスタマイズは自己責任でお願いします。事前にバックアップを取ることをおすすめします。(私はメモ帳にコピペしたりしています)

 

Minimalismをお使いの方、スマホの表示もチェックされていますか?
ちゃんと意図した通りに表示されているか確認しておくといいと思います。
▼Minimalism向けのカスタマイズ関連の記事です。

www.kurasitotonoe.com

www.kurasitotonoe.com

▼今までのカスタマイズを集めました。

www.kurasitotonoe.com

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