たわしの帖

やれることをやってみるブログ

たわしの帖

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

※この記事は2018年3月30日に加筆・修正しています。

 もういくつ寝るとお正月(はやい)。師匠も走るほど忙しない師走となってしまいました。今年が終わるとかやだー! 寂しいー! と密かに叫んでいるわたくしですが、月末に控えられているであろう会合に今から心を弾ませる毎日でございます。むふ。

 さて、11月のブログ更新が虫食い穴の如く、1日おきだった理由──「たわしの帖」のヘッダー画像が完成しました。

 既に設定済みなので、きっと皆さんの目にも問題なく晒されている……はず。少しトラブルもありましたが、先人たちのお力を借りて設定できました。

 しかし、この“トラブル”っていうのが厄介なもので──というか私が無知ゆえに、はてなブロガーにとっては常識的な部分が抜け落ちていて、結果的にいつまでたっても「なんか納得いかない」状態が続いていたんですよね。ググってもなかなか情報が見つからないから、困った困った。

 きっと多くの人は知っているだろう。それでも一応【初心者向け】と称して、ヘッダー画像を横幅いっぱいに、美しく設定するコツを書き残しておこうと思います。ここでいう“初心者”の基準は以下の通り。

1.「はてなブログ」を始めたばかりの人
2.CSSとかHTMLとかよく分からない、カスタマイズは【コピぺでOK!】に頼っている人
3.横幅いっぱいにしたくて一通り試したけれど、なんか上手くいかない……「詰んだ!」と感じた人

前のヘッダーどんなだった?新旧ヘッダー画像を比較

 本題の前にちょこっと、記念としてヘッダー画像の比較をしておきます。

f:id:kimamalist:20161029152753j:plain
 ↑旧ヘッダー画像

 アイコン画像を使いまわしております。やっつけ感がしゅごい、滲み出ていますね。

 ブログ名が縦書きのヘッダーはあまり見かけないなと思って、敢えて縦書きを採用。キャラクターの髪型を私本人に似せているので、この時はアホ毛がよく立っていました。あと、ハイライトがやたら多い。一歩間違えれば白髪に見えなくもない。

 サイズは1000×200ピクセル。はてなが推奨しているサイズで作られています。

f:id:kimamalist:20161202105038j:plain
 ↑新ヘッダー画像

 新ヘッダー画像は当ブログでよく使われている青色を中心にキャラクターを左右に描きました。旧画像がシンプルだったので、ちょっとだけ賑やかさ重視

 描きながら「イラストレーターでもないのに、こんなに自分の絵を全面的に出すのイッタイヨネー」と羞恥心に襲われつつ、最終的にはノリノリで加工までする始末。イッタイヨネーというか恥ずかしいよねー!? 知ってる!!

 サイズは1500×400ピクセル*1。横幅に合わせた時に崩れないよう、大きめに作成しました。上の画像は記事用に1000×267ピクセルに縮小したものです。実物とは違うのであしからず。

f:id:kimamalist:20161202105052j:plain
 ↑スマホ用

 スマホ用は640×310ピクセル。PC用の画像から切り取って作りました。

参考にしたサイト

 横幅いっぱいに設定するため、月無ことのは氏(id:tukinasikotonoha)の「【ブログカスタマイズ】はてなブログのヘッダー画像の余白を非表示にする方法」を参考にしています。非常に助かりました、ありがとうございます。
www.tukinasikotonoha.com

 美少女のイラストが実に可愛らしいですね。くっそー、うらやましい。すきです。

 ちなみに、月無氏はタイラケンヂ氏(id:bumpmania)を参考+アレンジして作成したのだとか。

 私の中でタイラケンヂ氏は「文字が震えてる人」という印象だった(失礼)のですが、ブログにお邪魔してみると興味深いエントリーや面白く役立ちそうなカスタマイズが紹介されているので、ぜひ合わせて訪れて頂きたい。ルビをつけるHTMLとか、いつか活用してみたいなぁ。

見よう見まねで設定してみよう

 なにはともあれ実戦あるのみ。はてなフォトライフで画像をアップロードし、「【ブログカスタマイズ】はてなブログのヘッダー画像の余白を非表示にする方法」に従って設定してみました。

f:id:kimamalist:20161202110740p:plain

 ……お分かりいただけるだろうか。微妙に、ぼやーんとしているのを。

 なんか、ピントがあってないんですよね。イラストよりブログ名を注視したらよく分かる。視力が1.5から1.0以下に落ちたかのような、はたまた夕方の疲れ目状態で活字を追おうとした時のような。中途半端な不明瞭感。うーん、気持ち悪い!

思考錯誤してみる

 いろいろなHTMLを試したり画像サイズを変更してみた。しかし、どうにもぼやーんが無くならない。一瞬「このままでも良いかな……見えなくはないし」と思ったけれど、こういう所で妥協すると後々痛い目を見るのは分かっているので止めることも出来ない。

 一体、どうしたものか──と何気なく、はてなフォトライフで画像のサイズなどを確認してみると……。

f:id:kimamalist:20161202111501p:plain
はてなフォトライフ→目的の画像をダブルクリック→画像を編集の順番でアクセス

 注目すべき点は、ココ。

f:id:kimamalist:20161202111514j:plain

 画像サイズが800ピクセル(長辺)になっているではありませんか。

 つまり、私は横幅1500ピクセルの画像を800ピクセルに変換してアップロードし画像URLを取得。そのURLをヘッダーコードに組み込んでいたのである。あちゃー、そりゃあボヤけるわ。

オリジナルサイズで保存しなおす

 やっぱりボヤけたヘッダーは嫌だ! 画像を元のサイズで保存するように設定しなおします。はてなフォトライフの画面右上「設定」から画像サイズを「0」、「オリジナルサイズの画像を保存」にチェック。

f:id:kimamalist:20161202111525j:plain

 もう一度、画像をアップロードして画像URLを組み込みました。すると……。

f:id:kimamalist:20161202111537p:plain

 お分かりいただけるだろうか。シャープさが増しましたね。

f:id:kimamalist:20161202120943j:plain

 並べて比較してみる。単体で見るより、一緒に見たほうが如何にボヤけていたかよく分かります。

ヘッダーの横幅いっぱいに美しく設定するには、大きめの画像をオリジナルサイズで保存

 私の失敗から得た「ヘッダー画像を画面の横幅いっぱいに、美しく設定するコツ」は最低でも以下の2点である。

  • 広げても崩れないように、はてな推奨サイズより大きめの画像を用意する
  • オリジナルサイズで保存する

 多分だけど、記法を“見たままモード”にして記事を書く時のように画像を投稿。HTMLモードから画像URLを取得したほうが絶対面倒くさくなかったよね。だって「写真の投稿」からアップロードすれば、オリジナルサイズの筈だもの! うわ、もしかして無駄骨!?

 まあでも、遠回りしたことで得るものがあったということで、良しとしませう。結果的にヘッダーも設定できたしね、ちゃんと。

余談

 実は、当初こちらのヘッダー画像を使おうとしていました。

f:id:kimamalist:20161202121708j:plain

 束子(キャラクター化)と束子(擬人化?)なヘッダー。さすがに恥ずかしすぎる上に痛すぎるので止めた

*1:実際、ヘッダーに設定している画像はバランスの観点から1500×370ピクセルに調整しています