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

f:id:kotonoha_sorakuni:20170405232016p:plain

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

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

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

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

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

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

ヘッダー画像

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

調べてみると、推奨されているサイズは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に貼るだけでタイトル画像が表示されます。

(追記)

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

3. 文字の色を変えたい

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

質問用ページ – NO TITLE

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

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

f:id:kotonoha_sorakuni:20170327221414p:plain

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

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

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

2 Comments

syofuso

http://design.syofuso.com/entry/2016/07/27/141600
言及ありがとうございます。Minimal Greenを書いているものです。
記事を背景いっぱいに表示するカスタマイズは、人力検索はてなでぽけっとしすてむさんが回答されてる方法と私のブログで書いている方法は同じです。
タイトルテキストはそのままで、背景を100%横幅いっぱいに表示する方法です。
月無ことのは日記さんのカスタマイズはタイトル画像自体をクリックできるような方法ですね。
はてなに画像をアップロードするにはブログ記事にあげても良いのですが、
はてなフォトライフhttp://f.hatena.ne.jp/
が使えますよ。(はてなブログの写真は自動的にはてなフォトライフにアップロードされます)
フォトライフにオリジナルサイズでアップロードし、表示されたら画像を右クリックして
「画像のアドレス」をコピーしたら、画像のURLが取得できますよ。

返信する
kotonoha_sorakuni

syofusoさん、コメントありがとうございます!
なるほど、同じものだったんですね。コードの長さがまったく違ったので、違うものかと思ってしまってました。
コード内にタイトルテキストを中央寄りにするという記述があり、右寄りのままにしたかったのですが、どこを削除したら良いのか判断できずに早い段階で諦めてしまってました。
はてなフォトライフというのもあるんですね。まだまだはてなのサービスは奥が深そうです。
いろいろ教えていただきありがとうございます!カスタマイズに興味出てきたので、せめてコピペしたCSSを自分でいじれるくらいになれるよう、勉強してみます!

返信する

コメントを残す