いまいちど

子育てパパの雑記ブログ

はてなブログでヘッダー画像作成から設定までをやってみた

スポンサーリンク

ヘッダー画像、いつか変更したいなぁと、ず~っと思っていました。

まぁ、デザインの好みは人それぞれですけども。僕は基本、ごちゃっとした感じではなくシンプルがとても好きです。

ブログに限らずなんでもそう。

しかしながらヘッダーに関しては差別化は必要。当初からずっと考えていました。これまでは文字だけでちょっと寂しい感じ。

カスタマイズしてみよかな、でも時間かかりそだな。一日潰れそうだな。と、うじうじしていたのを思い出します。

カスタマイズ=ドツボの印象ですから!

でもね、とりあえず今日はちょろっと自作で作ってみました。本格的なものでなくとも少しは雰囲気変わるかなと、そんでやっぱりさ、自分のブログに愛着を持ちたいのもあるわけ。

なんか前にも言ってた気がするけど、自分のブログを愛せなくてはこの先続かないのです。それで今まで数々のブログを沈めてきましたから。

それだけトップページは大事ってこと!いつか誰かにヘッダー作成してもらいたいなぁと、思っている今日この頃です。

訪れてくれた人にちょっとでも印象を残せたらと悪あがきしてみた。

前置き長くてだめなやつですね、これ。

PIXLR EDITORでヘッダー画像を作成してみる

f:id:hometaka5657:20171022172614j:plain

ダウンロードの必要がない画像編集ソフトです。殆ど使用したことがなかったのですが、ブログを続けていく上で編集を自分で出来ると絶対役にたつ

と思い、お気に入りにしてたのですが、どうやらヘッダー画像もできるらしい。こちらの記事でお世話になりました。

hituzidameiko.hatenablog.com

ひつじ田メイ子さんが丁寧に解説してるので、敢えて解説は必要ありませんね!

はてなブログ仕様のヘッダー

1000×200ピクセルの背景透過で作成します。

1.こちらの背景に

f:id:hometaka5657:20171022231514j:plain

2.文字を挿入して

f:id:hometaka5657:20171022231515j:plain

3.画像も挿入

f:id:hometaka5657:20171022231516j:plain


元々やり方が優しいのですが、更に僕のヘッダーがシンプルなので簡単に終わりました。わずか3ステップ!とりあえずはヘッダー画像が出来たのでこれをブログに設定してみます。

設定までメイ子さんのブログに記載されてるので問題ないかと!

ヘッダーを設定してみた

こちらがパソコンからの見た目

f:id:hometaka5657:20171022234221j:plain

ヘッダーとメニューの間の余白が少し気になるけど、まぁいいかなーと思ってスマホを覗いてみると、全くダメでした。

こちらがスマホからの見た目

f:id:hometaka5657:20171022234406p:plain

見切れすぎ!
これでは全然だめです。

ここからレスポンシブ設定で、画像サイズが1000×200ピクセルの場合で模索しました。

ヘッダーの調整に関してはビタッとくるものを探すのになかなか時間がかかりましたが、なんとか適正と言えるものを発見したので参考までに記載します。

デザイン設定からCSSにコードを入れます

まず画像上下の余白をとるのはあっさりと。

/* タイトル画像上下の余白 */
#blog-title {
margin: 0 auto;
padding: 0;
}

しかし余白をとってもスマホに対応しません。これを適応させ、更に綺麗に表示させるために、一番しっくりきたのがここ。

www.imuza.com

このコードです。

/* ヘッダー対策 */
@media (max-width:480px) {
.header-image-only #blog-title {
height: 100px;
}
.header-image-only #blog-title #blog-title-inner {
background-size: cover;
height: 100px;
}
}

これらを活用した結果!

パソコンからの見た目

f:id:hometaka5657:20171023000937j:plain

スマホからの見た目

f:id:hometaka5657:20171023001023p:plain

OKです!

まとめ

とりあえず自分視点では問題なく理想的な仕上がりになりました。結構シンプルですけど、ちょっとしたカラーを入れるだけでだいぶ違いますね!



おしまい。