QUEST MILE

読者です 読者をやめる 読者になる 読者になる

QUEST MILE

映画やWEB小説、ふと気になったことなど気軽に書いていくブログ 考えたで終わらない。言葉にしていこう。

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

 

f:id:kotonoha_sorakuni:20170405232016p:plain

 

コトノハです。ブログも少しずつ慣れてきたので、タイトルのヘッダー画像を変更してみようと考えました。

 

はじめるまえは、【デザイン】⇒【カスタマイズ】⇒【ヘッダ】からタイトル画像をアップロードするだけの作業だと気楽に考えてたんですが、実際には思ってた以上にややこしかったので、備忘録がわりに書いておきたいと思います。

私はブログやCSSについてはコピペくらいしかできない超初心者です。この記事は

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

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

 

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

 

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

 

f:id:kotonoha_sorakuni:20170327210026p:plain

 

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

 

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

 

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

 

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

 

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

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

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

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

 

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

q.hatena.ne.jp

 

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

 

 

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

 

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

 

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

 

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

②【HTML編集】画面の赤線のところが画像のURLになる
f:id:kotonoha_sorakuni:20170327210056p:plain

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

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

f:id:kotonoha_sorakuni:20170327210518p:plain

 

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

 

 

3. 文字の色を変えたい

 

はじめに画像をアップロードしたときは文字の色が自動的に白になりましたが、【デザインCSS】からタイトル画像を変えると、文字の色は変わらなかったので手動で変えていきます。以下のサイトを参考に同じく【デザインCSS】に貼ることで変更できました。「Brooklyn」を使っている人は質問用ページのコメント欄にあります。それ以外の人でも可能かもしれません。

 

質問用ページ - NO TITLE

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

 

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



f:id:kotonoha_sorakuni:20170327221414p:plain

 

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

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

 

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