さよならレイジーマンデイ

ゲーム / イラスト / Web漫画

【はてなブログ】ヘッダー画像の上下左右の余白を取る方法まとめ

どうも、ぽよ彦(@poyo_hiko)です。

 

ここ数日、あーでもない、こーでもないと言いながら、「ヘッダー画像を作る」→「消す」 を繰り返していました(笑)

 

キリがないため、以下のデザインでいったん校了。

 

そのうち、シンプルなヘッダーに戻すかもしれません。

 

さて、あとはこれを設定するだけなんだけど、ここから難関が待っていました。

……そう、ヘッダー画像の上下左右の余白問題です。

 

ヘッダー画像を差し替えるだけなら、「デザイン」→「カスタマイズ」→「ヘッダ」と進み、タイトル画像をアップロードすれば終わりです。

 

しかし、この方法でヘッダー画像をアップロードすると…

 

↑ ヘッダー画像の上下左右に変な余白が生じてしまいます。

(はてなブログの場合、ヘッダー画像はトップページへのリンク領域となっているらしく、この余白はデフォルトで発生します)

 

そこで、、

この上下左右の余白を消すためのアプローチ方法をいくつかご紹介したうえで、最終的に僕がどうしたのか…というお話をしたいと思います。

※注)PC限定です。

 

 

方法① 背景色を変える。

まず、ことのは(id:tukinasikotonoha) さんがご紹介されていた方法。

tukinasikotonoha.hatenablog.com

 

こちらは、background-colorを指定し、ヘッダー画像と余白部分の背景色を統一することで、ヘッダー画像の余白部分を削るという方法です(間違っていたらすみません)。

 

この方法は、背景色が単一であれば一番良い方法だと思います。画像を横に引き延ばすわけではないので、表示も崩れません。

 

しかし、私のように、背景色にグラデーションなどを使っていた場合、こちらの方法は使えません。。

泣く泣く、別の方法を探すことに。

 

方法② 画像の横幅を広げる・比率を変える。

次に、多くの方が紹介している「ヘッダー画像を横幅いっぱいに広げる」「ヘッダー画像の表示比率を変える」という方法。

 

…うーん。

この方法については、私のやり方がマズかったと思うんですが、画像を引き延ばすことによって、若干表示が崩れてしまいました。

↑ 余白は取れますが、少しピントがズレたようなボヤけた表示になります(拡大して目を凝らすとわかります)。

 

ただ、画像の横幅を広げる方法については、最初から引き延ばすことを念頭に置いたうえで、大きめのサイズで使っておけばOKみたいです。

例えば、束子 (id:kimamalist)さんは、はてな推奨サイズの「1000×200px」ではなく、「1500×400px」で作成されています。

tawashino.hateblo.jp

 

方法③ 背景画像を変える。

次に、元CAバンビ (id:zuboraca) さんがご紹介されていた「背景画像を変える」という方法。

www.bambi.pro

 

こちらは、ヘッダー画像ではなく、背景画像を横幅いっぱいに広げるというアプローチをとっています。

左右が見切れても大丈夫な画像を使っているのであれば、この方法もアリですね♬

 

方法④ 上下の余白だけを取る。

んで、結局私が取ったのは、

左右の余白は諦めて、上下の余白だけを取る」という方法です。

 

1000×200でヘッダー画像を作成した場合、横に伸ばそうとすると、どう足掻いても表示がボヤけます。

そこで、左右の余白については、諦めることとし、上下の余白だけを取ることとしました。

 

上下の余白を取る方法として、Minimal Green(id:minimalgreen)さんの記事を参照させて頂きました。

blog.minimal-green.com

 

#blog-title {
margin: 0 auto;
padding: 0;
}

↑ こちらのコードを「デザインCSS」に追加するだけで、ヘッダー画像の上下の余白を取ることができます。

 

f:id:pochi-kohchou:20190708214221j:plain

そして、完成したのがこちら。

左右の余白は残っていますが、そのままの画像サイズで上下の余白を取ることができました。

 

今回、参考にさせて頂いたブログ様、ありがとうございました!

 

以上、ヘッダー画像の上下左右の余白を取る方法でした!

でわでわ~