こんにちは！月城です！
ＰＣ・スマホともヘッダー画像を変えて、アイコンも新しくいたしました。そこで今回ははてなブログでのヘッダー画像サイズの適正値や、画像を製作する際の注意点を書いていきます。画像制作をお願いする際に、ヘッダー画像の適正値ををわかりやすく示してくれてリるサイトになかなかたどり着けづに困ったため今回この記事を書きました。初心者には何かと悩みの種になるヘッダー画像ですが、少しでも参考になれば幸いです。
ＰＣ用ヘッダー
サイズ
ＰＣ用ヘッダーの画像の適正は「１０００×２００」です。これ以外の値でもヘッダー画像は作れますが、設定の時にトリミングして上下が切れることになるため、画像制作の際は注意が必要です。
ちなみに私が利用しているブログテーマはBrooklynです。カスタマイズが色々充実しているため、おすすめですよ！
画像制作の際の注意
基本的に自分で画像を作る際も、基本的に両端が切れてしまうためこれを考慮して画像を製作する方が綺麗に仕上がります。
画像を切れなくする方法もいろいろなサイトに紹介されていますが、初心者の場合はこの変更が大変ですので画像をそれに合わせた方が簡単です。
自分で制作する場合は、背景が白で問題ないようにしたり左右と上が切れても変ではないデザインを考えましょう。
以下は以前私がフリー素材で自作したヘッダーになります。背景が白でも問題なく葉っぱを下部から出しているため、違和感はありません。
ココナラなどで外部にヘッダー画像をお願いする場合は、
- 左右と上がどうしても画像が切れてしまう事
- そのため、背景が白で境目が気にならないデザインにしてほしいこと
を必ず伝えてから制作していただきましょう。
伝え方が悪いとこのように不自然な空白が発生してしまい、再度書き直してもらう必要が出てきます。
これを経てきちんとなっているヘッダーがこちらです。
空白が目立たない背景で不自然感がなくなりました。こちらは言葉で伝えることは難しいためぜひ外部サービスを利用されるときは、画像添付をおすすめします。
スマホヘッダーサイズ
スマホのサイズは私は「３５０×２００」で制作しました。
以下は順に月城、めがね主婦さん、おとなんさんのスマホヘッダー画面です。
上下左右が白く切れていますが、それが気にならないデザインになっているため、ヘッダーとして違和感がありません。
また、ここで紹介させていただいている、みにろぐのめがね主婦さんのヘッダーや、おとなんつづりのおとなんさんのヘッダーは、記事が目立つようにコンパクトになっているのでそういうものを選択するのも有りですね！
スマホヘッダー制作の際の注意点
私のようなブログ形式にする場合は、以下の点に気を付けてください！
- 上下左右が切れてもいいようなデザインにする
- 白く切れる背景が目立たないデザインにする
以下は私が、製作者様にうまく要望を伝えられずに起こった失敗例です。こうならないためにもぜひ上記の二点を気を付けてください。
下の部分が切れてしまうことを伝え忘れ、スパーンと不自然に切れていしまっています。こちらの問題は下にラインを引いてもらう事で解決しました！
まとめ
PCなら１０００×２００、スマホなら３５０×２００どちらも色々カスタマイズの方法はありますが、初心者ならばこちらを参考にしていただけれな問題ありません。
ブログを始めると自然と色々覚えてやってみたくなるものなので、知識ができたら自分らしいカスタマイズもぜひやってみてください！
ここまでお付き合いくださりありがとうございました！
ちょっと体調を崩して、だいぶ新規記事が遅れてしまいました(;・∀・)ブログをやり始めてからずっとワークバランスについて悩んでいるため、もうちょっと体力つけてバリバリやりたいですね！おとなんさん、めがね主婦さん素敵なヘッダーだな～と思っていたため紹介させていただきました！ありがとうございます！
月城
