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

どうも！ほほなっつ（@mahi_x2）です。

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

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

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

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

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

まずは下書きから

ヘッダー画像をどんなデザインにしたいか漠然と決めていたので、試しに裏紙に下書きしてみたところ意外と一発でいい感じのが描けました！

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

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

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

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

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

使用applicationはこちら

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

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

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

完成！

…しかし、

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

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

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

スマホで見たとき

めっちゃ失敗してる〜！

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

HTMLやCSSの事は全然わからない素人なので、自力で解決できそうにもありません ！（デザイン学校でWebデザイン専攻したんだけどね）

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

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

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

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

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

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

スマホで見たとき

ちゃんとスマホにも反映されています！ 感動！

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

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

まとめ

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

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

顔がコロコロ変わるブログってどうかとも思うけど…
初心者ブロガー必見！アマゾンアソシエイトの審査には必勝法があった！