どうも！最近ちょっと寄り道してブログの外枠を固めている【ほほなっつ】です。
前々からやるやる言っていた
ブログのヘッダー画像もとうとう設定しました٩( ᐛ )و
HTMLやCSS初心者の私はヘッダー画像の設定にかなり手こずってしまったので、
私と同じような迷える初心者ブロガーの救済になればと、完成までの道のりをお伝えしていこうと思います！
はてなブログのヘッダー画像（タイトル画像）を作ろう！
はてなブログのヘッダー画像（タイトル画像）の推奨サイズはW1000px H200pxです。
PCとスマホの両方にバランスよく反映させたいのでレスポンシブデザイン仕様で作っていきます。
まずは下書きから
ヘッダー画像をどんなデザインにしたいか
漠然と決めていたので
試しに裏紙に下書きしてみたところ意外と一発でいい感じのが描けました(*^ω^*)
もうこれでいいや！
「まひ☆まり劇場」は
息子と娘の名前からとってるので
イラストも息子と娘をイメージしてます！
完成したヘッダー画像がこちら
お絵かきアプリの「Procreate」で下書きイラストを読み込んでペン入れ
イラストが出来たらブロガー御用達アプリ「Phonto」でイラストに合ったフォントを選んで文字入れ
PCで作っちゃえばあっという間なんだけど、
全てiPad Proで済ませました(￣∀￣)←面倒くさがり
使用applicationはこちら
ヘッダー画像（タイトル画像）設定時に予期せぬ問題が発生！
「はてなブログ ヘッダー画像 サイズ」とかで調べていると必ずと言っていい程出てくるのが
「余白が変」、「画像がヘッダーからはみ出す」、「スマホにレスポンシブデザインで反映されない」などなど…
私も嫌な予感がしてたんですが案の定、
- 余白のバランスがおかしい
- レスポンシブデザインになってない
といった予期せぬ問題が発生！
スマホで見たとき
まり劇場になってる(￣∀￣)
レスポンシブデザインどこいった！？
HTMLやCSSの事は全然わからないので自力で解決できる余地もなし！
（デザイン学校でWebデザイン専攻したんだけどね笑）
考えるよりもまずはググります！
このブログの記事で問題解決！
ググったら出てきましたドンピシャな記事が！
勝手ながらリンクを貼らせて頂きます。
＼私が参考にさせて頂いた記事がコチラ／
「IT系アラサーOLの悲喜こもごも日記」さんの記事通りに進めたら、
一発で問題解決ができました！
要は「CSS」で余白やレスポンシブデザインの調整をしてあげるという事でした。
リンクした記事の内容通りにヘッダー画像のサイズを調整してCSSのテキストをそのままコピペしたら私のヘッダー画像も無事反映されました(*^ω^*)
スマホで見たとき
ちゃんとスマホにも反映されていました！
「IT系アラサーOLの悲喜こもごも日記」さん
本当にありがとうございます(*^ω^*)
まとめ
ブログのヘッダー画像が出来るとまたモチベーションが上がりますね！
ブログの顔ですからね！
一度覚えちゃえば設定も何の事はないので、
気に入ったヘッダー画像が出来たらどんどん変えていっちゃいます(*^ω^*)
顔がコロコロ変わるブログってどうかとも思うけど(￣∀￣)
コメントを残す