ヘッダー画像を余白をなくし画面全体に表示する方法【はてなブログ】

どうも、Wizです。タイトルのヘッダー画像の余白なくす方法を説明します。

私はカスタマイズはコピペと簡単な数値をいじるくらいしかできません。この記事は、そんな私が実際におこない、なんとか余白をなくすことができた流れを説明します。

同じくコピペくらいしかできない初心者
テキストだけのタイトル画面に画像を入れたい

という人向けになります。なお私はシロマティさんが作成したブログテーマの「Brooklyn」を使用しています。はからずもそれを前提に行っていた作業があるかもしれません。ご了承ください。

注意

現在このブログははてなブログからWordPressに移行しています。（テーマ：SANGO）

記事内に書かれている内容やデザインはあてはまらない部分があることを前提にお読みください。

1. 画像をアップロードすると余白ができる…
2. 画像のURLがわからない…
3. 文字の色を変えたい

1. 画像をアップロードすると余白ができる…

まずは【デザイン】⇒【カスタマイズ】⇒【ヘッダ】からタイトル画像をアップロードする方法を行いました。その結果がこれです。

「よし、できた！」と完全に作業が終わったムードでしたが、そんなことありませんでした。

調べてみると、推奨されているサイズは1000✕200ピクセルということだったのでおおまかにそれくらいの大きさにトリミングしてやってみましたが、それでも余白がある状態でした。

ちなみに画像の大きさは、画像を「Windowsフォトビューワー」などで開いて、右クリック⇒【プロパティ】⇒【詳細】⇒【イメージ】からわかります。ネットでフリー素材などをダウンロードした人は、画像を開いて「Windowsフォトビューワーから右クリック⇒【プログラムから開く】⇒【ペイント】で編集すると大きさが数字で分かる状態でトリミングすることができるので便利です。

よくわからないので、ググってみます。そして以下のサイトで、余白を無くす方法が書かれていました。しかし超初心者にはこれでも難しくて断念しました。下のサイトで分かる人は下のサイトを参考にした方がいいかもしれません。

【ブログカスタマイズ】はてなブログのヘッダー画像の余白を非表示にする方法 – 月無ことのは日記

はてなブログのヘッダー、タイトル画像の設定について（追記あり） – Minimal Green

はてなブログのヘッダー画像を横幅いっぱいに、美しく設定するコツ – たわしの帖

はてなブログのヘッダー画像を挿入している方のための適切なCSSスタイリング – ゴトーのブログ

そしてたどり着いたのが人力検索はてなのページでした。

はてなブログ公式デザイン「PinkPharmacy」を使用しています。 … – 人力検索はてな

ここに書いてあるCSSをコピペして余白がなくなるようにできました。しかしそこにいたるまでにはいくつか問題があったのです。