最初に読んでもらいた記事Picup5

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

どうも!最近ちょっと寄り道してブログの外枠を固めている【ほほなっつ】です。

前々からやるやる言っていた

ブログのヘッダー画像もとうとう設定しました٩( ᐛ )و

HTMLやCSS初心者の私はヘッダー画像の設定にかなり手こずってしまったので、

私と同じような迷える初心者ブロガーの救済になればと、完成までの道のりをお伝えしていこうと思います!

はてなブログのヘッダー画像(タイトル画像)を作ろう!

はてなブログのヘッダー画像(タイトル画像)の推奨サイズはW1000px H200pxです。

PCとスマホの両方にバランスよく反映させたいのでレスポンシブデザイン仕様で作っていきます。

まずは下書きから

f:id:mahix2:20180218225719j:image

ヘッダー画像をどんなデザインにしたいか

漠然と決めていたので

試しに裏紙に下書きしてみたところ意外と一発でいい感じのが描けました(*^ω^*)

もうこれでいいや!

「まひ☆まり劇場」は

息子と娘の名前からとってるので

イラストも息子と娘をイメージしてます!

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

f:id:mahix2:20180215130240j:image

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

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

PCで作っちゃえばあっという間なんだけど、

全てiPad Proで済ませました( ̄∀ ̄)←面倒くさがり

使用applicationはこちら

Procreate

Procreate

  • Savage Interactive Pty Ltd
  • エンターテインメント
  • ¥1,200

Phonto 写真文字入れ

Phonto 写真文字入れ

  • youthhr
  • 写真/ビデオ
  • 無料

 

ヘッダー画像(タイトル画像)設定時に予期せぬ問題が発生!

「はてなブログ ヘッダー画像 サイズ」とかで調べていると必ずと言っていい程出てくるのが

「余白が変」、「画像がヘッダーからはみ出す」、「スマホにレスポンシブデザインで反映されない」などなど…

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

  • 余白のバランスがおかしい
  • レスポンシブデザインになってない

といった予期せぬ問題が発生!

スマホで見たとき

f:id:mahix2:20180215202727j:image

まり劇場になってる( ̄∀ ̄)

レスポンシブデザインどこいった!?

HTMLやCSSの事は全然わからないので自力で解決できる余地もなし!

(デザイン学校でWebデザイン専攻したんだけどね笑)

考えるよりもまずはググります!

このブログの記事で問題解決!

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

勝手ながらリンクを貼らせて頂きます。

\私が参考にさせて頂いた記事がコチラ/

sprout-wings.hatenablog.com

「IT系アラサーOLの悲喜こもごも日記」さんの記事通りに進めたら、

一発で問題解決ができました!

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

リンクした記事の内容通りにヘッダー画像のサイズを調整してCSSのテキストをそのままコピペしたら私のヘッダー画像も無事反映されました(*^ω^*)

スマホで見たとき

f:id:mahix2:20180215211330j:image

ちゃんとスマホにも反映されていました!

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

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

まとめ

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

ブログの顔ですからね!

一度覚えちゃえば設定も何の事はないので、

気に入ったヘッダー画像が出来たらどんどん変えていっちゃいます(*^ω^*)

顔がコロコロ変わるブログってどうかとも思うけど( ̄∀ ̄)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です