UQモバイルに乗り換えたら年間84,000円の節約に!

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

どうも!ほほなっつ(@mahi_x2)です。

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

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

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

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

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

まずは下書きから

f:id:mahix2:20180218225719j:image

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

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

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

f:id:mahix2:20180215130240j:image

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

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

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

使用applicationはこちら

Procreate

Procreate

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

Phonto 写真文字入れ

Phonto 写真文字入れ

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

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

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

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

完成!

…しかし、

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

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

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

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

スマホで見たとき

f:id:mahix2:20180215202727j:image

めっちゃ失敗してる〜!

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

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

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

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

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

参考 はてなブログでヘッダー、タイトル画像の余白を消す方法と、スマホ対応(レスポンシブデザイン)IT系アラサーOLの悲喜こもごも日記

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

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

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

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

スマホで見たとき

f:id:mahix2:20180215211330j:image

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

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

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

まとめ

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

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

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

コメントを残す

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