はてなブログのヘッダー画像を設定！スマホにも対応

はてなブログのヘッダー画像を設定する際、変な余白が生まれたり、スマホの画面で見切れたり、イメージ通りにいかずかなり手こずりました。

しかし、ほんの少しCSSの設定を加えるだけで、簡単に解決出来たので、完成までの道のりを忘れない為にも、まとめておく事にします。

はてなブログのヘッダー画像を作ろう！

はてなブログのヘッダー画像（タイトル画像）の推奨サイズはW1000px H200pxと言われています。

PCとスマホの両方にバランスよく反映させたいのでレスポンシブデザイン仕様で作成する事にしましょう。

まずは下書きから

当ブログの由来「まひ☆まり劇場」は、息子と娘の名前から来ているので、イラストも息子と娘をイメージしたもの！

完成したヘッダー画像がこちら

お絵かきアプリの「Procreate」で下書きイラストを読み込んでペン入れ！

イラストが出来たら、多くのブロガー御用達アプリ「Phonto」で、イラストに合ったフォントを選んで文字入れ！

Macを立ち上げてイラレで作ってしまえばあっという間なんですが、面倒だから全てiPad Proで済ませちゃいました 笑。

使用applicationはこちら

ヘッダー画像設定時に予期せぬ問題が発生！

完成したヘッダー画像をはてなブログで設定します。

はてなの管理画面＞デザイン＞カスタマイズ＞ヘッダ

完成！

…しかし、

「はてなブログ／ヘッダー画像／サイズ」で調べていると必ずと言っていい程出てくる問題が「余白が変」…「画像がヘッダーからはみ出す」…「スマホにレスポンシブデザインで反映されない」…などなど。

私も嫌な予感がしていたのですが、案の定！

という、ある意味予期していた問題が発生！

スマホで見たとき

めっちゃ失敗してる〜！

レスポンシブデザインどこいった！？

ちゃちゃっととググって解決しましょう！

こちらの方法で問題解決！

ググったら出てきましたドンピシャな記事が！

「IT系アラサーOLの悲喜こもごも日記」さんの記事の内容通りに進めたら、一発で問題解決ができました！

• 手順1
  ヘッダー画像を作成
  参考記事の内容通り、H100×W480で画像を作成
• 手順2
  ヘッダー画像を設定
  はてなの管理画面＞デザイン＞カスタマイズ＞ヘッダ
• 手順3
  デザインCSSにコードを追加
  はてなの管理画面＞デザイン＞カスタマイズ＞デザインCSSに参考記事のコードを追加する
• 手順4
  完成！
  スマホにも反映しているか確認する
 

要は「CSS」で余白やレスポンシブデザインの調整をしてあげるという事でした。

参考記事の内容通りに、ヘッダー画像のサイズを調整してCSSのテキストをそのままコピペしたら、私のヘッダー画像も無事反映されました！

スマホで見たとき

「IT系アラサーOLの悲喜こもごも日記」さん

本当にありがとうございます(*^ω^*)

まとめ

ブログのヘッダー画像が出来るとまたモチベーションが上がりますね！ ブログの顔ですからね！

一度覚えちゃえば設定も簡単なので、気に入ったヘッダー画像が出来たらどんどん変えていこうと思います☆

顔がコロコロ変わるブログってどうかとも思うけど…