こんにちは。
はてなブロガー夫婦のよつば（妻）です(*^-^*)
ブログタイトルが入るヘッダーは，ブログの表紙みたいなもの。
こだわりのあるものを作りたいですよね。
今回，旦那ブログ（Minimalism）のヘッダーを変更した体験をもとに
- はてなブログのヘッダー画像の貼り方（設定方法）
- はてなブログヘッダーの最適サイズは？
- スマホで見ると画像が見切れてしまう問題，どうする？
これらについて，実際行ったやり方をメモしておきます。
画像を貼るだけのシンプルなやり方なので，簡単ですよ。
これからヘッダーを作る方はぜひ試してみてくださいね。
↓クリックでお好きなところから読めます
- はてなブログのヘッダー画像の大きさは？推奨サイズはこちら
- 「スマホ表示だとタイトル画像の左右が見切れる」を解決！画像づくりのポイント
- 【はてなブログ】ヘッダー画像の設定方法と，位置調整のカスタマイズ
- ヘッダーを変更して，ブログのタイトル画面を好きにデザインしよう
- 【安い】ココナラのおすすめヘッダー作成者さん3選
スポンサーリンク
はてなブログのヘッダー画像の大きさは？推奨サイズはこちら
まずはタイトルの入ったヘッダー画像を準備しましょう。
はてなブログのヘッダー最適サイズは，「1000×200px」です。
カスタマイズすれば他のサイズでも作れますが，おすすめのサイズで作るほうが間違いないです(笑)
ワードプレスなど一般的なブログに比べると細長いですが，一番見てほしいのは記事なので，私は気に入っています。
「スマホ表示だとタイトル画像の左右が見切れる」を解決！画像づくりのポイント
PCやタブレットなど大きい画面と，スマホで見るときはヘッダーの表示が変わります。
カスタマイズに詳しくない私は「レスポンシブデザイン」（スマホで見てもいい感じに表示してくれる便利設定）にしていますが，スマホだと左右が途切れて表示されます。
こんな感じ。
なので，最初から中央に寄せたデザインにしておくのが◎
当ブログのデザイン（canvaで作りました）も何とな～く中央に寄せて作ってます(*^-^*)
でも今回は，スマホできちんと表示される枠を測りましたよ！(笑)
⇩皆さんも良ければダウンロードして，サイズの参考にしてください。
濃い赤の部分が（私の）スマホでも表示される枠です。
※スマホ画面の大きさによって誤差があるので，もう少し中央に寄せる方が確実です。
今回の旦那ブログはココナラで依頼して作ってもらいました。
この画像を添付して「重要な部分はこの中におさまるように作ってください」とお願いしたところ…
今までは文字だけだったヘッダータイトルが…
こうなりました！
スマホ画面ver.もバッチリです♪(*'▽')b
ひぇええカッコ良すぎません…！？
自分ではとても思いつかないデザイン！
自分で作るのも良いですが，得意な方にお任せするのもアリですよ～(≧▽≦)
私は「やぺもち」さんにヘッダー作りをお願いしました。
お安く作ってもらえるのでおすすめです☆(*^-^*)
こちらから内容をチェックできます。
今だけのお得情報！
はじめてココナラを使う方なら，無料会員登録300P＋招待コード入力1000Pの，計1300円OFFで利用できますよ。
私の招待コードを入力してもお互いに個人情報は分からないので，ご自由にお使いくださいね。
ココナラ招待コード「KBA4MB」
※会員登録＆電話番号認証で，4営業日以内に1000Pが入ります
よつば家が最後まで迷ったヘッダーデザインはこちら(*^-^*)
他の方のヘッダーデザインを探してみたい方はこちら◎
【はてなブログ】ヘッダー画像の設定方法と，位置調整のカスタマイズ
ヘッダー画像を用意したら，はてなブログに画像を設置していきましょう。
なお当記事では，レスポンシブデザインを使っていることを前提としています。
「レスポンシブって何？」
「自分のブログはレスポンシブに設定してあるのかな？」等
分からない方は，こちらのぴっぴさんの記事を読んでみてくださいね。
（参考：はてなブログのレスポンシブの設定方法）
調整のカスタマイズはこちらの記事を参考にしています。
（参考：はてなブログのタイトル画像の高さを変更する・上下の余白を消す【css】 - Minimal Green）
スポンサーリンク
①はてなブログにヘッダー画像を設定する
はてなブログで，まずはヘッダの項目を開きましょう。
「デザイン」→「カスタマイズ」→「ヘッダ」
「ヘッダ画像」の「画像をアップロード」部分の，「参照」を押してヘッダー画像をUPします。
画像調節の画面になりますが，1000×200pxで作っていれば特に調整はいらないはずです。
表示設定は「画像だけ表示」を選んでくださいね。
プレビュー画面にきちんと表示されていたら「変更を保存する」をクリックすればOKです。
②ヘッダーのスマホサイズを調整するカスタマイズ（CSS)
ヘッダー画像を設定したはいいのですが，スマホで見るとこんな感じに表示されてしまいます。（レスポンシブなのに何故なんだ…(笑)）
CSSでこれを調整しましょう。
「デザイン」→「カスタマイズ」→「デザインCSS」
青枠のCSSをクリックして，下記のコードをコピペしてください。
/* ヘッダースマホサイズ調整 */
@media (max-width:480px) {
.header-image-only #blog-title {
height: 100px;
}
.header-image-only #blog-title #blog-title-inner {
background-size: cover;
height: 100px;
}
}
これでスマホで見ると中央部分がきちんと表示されます。
（※スマホでチェックする前に「変更を保存する」をクリックしてね）
中央部分に寄せたデザインにしていたのでバッチリ！(*'▽')b
③タイトル画像上下の余白を取るカスタマイズ（CSS）
あと，ヘッダーの上下に余白ができているので，気になる方は余白を取るCSSも入れましょう。（画像の青い部分）
「デザイン」→「カスタマイズ」→「デザインCSS」
先ほどの続きに以下のCSSもコピペすればOKです。
/* タイトル画像上下の余白を取る */
#blog-title {
margin: 0 auto;
padding: 0;
}
プレビュー画面にきちんと表示されていたら，忘れず「変更を保存する」をクリック。
これでヘッダーの変更は完了です(*^-^*)
/* ヘッダー画像上の隙間 */
.header-image-only #blog-title #title a {
position: static;
}
気になる方はぜひお試しあれ◎
ぴっぴさん，ありがとうございました(*^▽^*)
ヘッダーを変更して，ブログのタイトル画面を好きにデザインしよう
1000×200pxの画像を準備すれば，ヘッダーの設定は簡単です。
ブログのＴＯＰ画面はみんなが目にする部分なので，ブログが一気に華やかになりますよ♪
canvaなどで自分で作るも良し，ココナラで本格的に作ってもらうのもアリです◎
みなさんも素敵なブログを作ってくださいね(*^-^*)
ではでは，よつばでした！
＼お安く！オシャレなヘッダーを作りたいなら／
【安い】ココナラのおすすめヘッダー作成者さん3選
①やぺもちさん
私が今回お願いしたのが，こちらの「やぺもち」さん。
イラストレーターさんなので，かわいいキャラクターや人物もお手の物です♪
ブログだけでなく，TwitterやYouTubeのヘッダーやバナーも実績多数ですよ～
何より，お安いのです♡(*'▽')b
ヘッダー作成 やぺもちさんのページはこちら(*'ω'*)
②miyutaroさん
次にご紹介するのは，イラストレーターのmiyutaroさん。
ゲームのドット感ある背景とか素敵すぎますよね…！
ポップでかわいいヘッダーが欲しいならこちら☆
ヘッダー作成 miyutaroさんのページはこちら(*'ω'*)
③きなこもちさん
わたしも最後までお願いしようか悩んだのが「きなこもち」さん。
シンプルなヘッダーから，ビジネス用・ゆるふわデザインなど，可愛いうえにバリエーションも無限大です♪
3人の中では一番お高いですが，満足度はNo.1かも…！？
サンプルのヘッダー実績がたくさん載っているので，ココナラページで要チェック☆
ヘッダー作成 きなこもちさんのページはこちら(*'ω'*)
今だけのお得情報！
はじめてココナラを使う方なら，無料会員登録300P＋招待コード入力1000Pの，計1300円OFFで利用できますよ。
私の招待コードを入力してもお互いに個人情報は分からないので，ご自由にお使いくださいね。
ココナラ招待コード「KBA4MB」
※会員登録＆電話番号認証で，4営業日以内に1000Pが入ります
他の方のヘッダーデザインを探してみたい方はこちら(*^-^*)