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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. 画像のURLがわからない…

CSSに画像のURLをいれなければいけませんでしたが、そのURLはどうやってわかるのかさっぱりでした。検索からいけばURLがわかりますが、フリー画像サイトからダウンロードしてトリミングした画像のURLがわからなかったのです。

いろいろ調べた結果一番わかりやすかったのが、はてなブログを使った方法でした。

①新しく記事を書く画面にして、貼りたい画像を投稿し、赤い四角の【HTML編集】画面にする

②【HTML編集】画面の赤線のところが画像のURLになる

③自分の画像のURLをコピーしてメモ帳にはる。上のサイトのCSSをコピーしてメモ帳に貼る。貼ったCSSの「http://cdn-ak～jpg」の部分を削除し、かわりに自分の画像のURLを入れる。

④できたCSSを【デザイン】⇒【カスタマイズ】⇒【デザインCSS】に貼る

このような手順で上のように余白をなくすことができました。余白をなくしたいだけでしたらここでおわりです。ちなみに【ヘッダ】からタイトル画像をアップロードする必要はありません。CSSに貼るだけでタイトル画像が表示されます。

（追記）

この方法の他に、直接はてなフォトライフにアップロードするやり方もあります。右クリックして「画像アドレスをコピー」をおすと、その画像のURLを入出できます。

3. 文字の色を変えたい

はじめに画像をアップロードしたときは文字の色が自動的に白になりましたが、【デザインCSS】からタイトル画像を変えると、文字の色は変わらなかったので手動で変えていきます。以下のサイトを参考に同じく【デザインCSS】に貼ることで変更できました。

はてなブログでタイトルや本文の文字色を変える方法 – マトリョーシカ的日常

出来上がったのがこちらです！画像は途中で変えました。 ブログの名前である『QUEST MILE』にちなんで”探求”・”道”をイメージしてます。なかなかいいのができました。

自分はやりませんでしたが、タイトル部分の縦幅を変えることもできるようです。

はてなブログ：ヘッダー画像の高さ（縦幅）を広くする – アラ還的やじうまぶろぐ

これだけのことに半日近くかかりました。このブログを見て時間短縮できることを願ってます。ではよいブログライフを！

【GoogleChrome】ブログ執筆がはかどる拡張機能はこれだ！茉愛さんにすてきなアイコンを書いていただきました！「初心者におすすめの二次小説は？」中堅SS読みが考えてみた