まとめ
- はてなブログのヘッダ画像を綺麗に設定する方法をまとめた
参考
この記事の内容は，
大体の内容が以下の参考リンクに書いてある．
しかし，ブログはいつ非公開になるか分からないので，
自分でもまとめておく．
tukinasikotonoha.hatenablog.com
はてなブログのヘッダ画像がぼやける問題を解決する
画像がぼやける理由
ヘッダ用に作った画像を
デフォルトの設定のままアップロードすると，
大抵の場合はぼやけてしまう．
はてな推奨のヘッダ画像サイズは，
1000 * 200
らしいが，このサイズで画像を作ったとしても，
ぼやけてしまうのだ．
理由は
はてなの写真を管理する，
はてなフォトライフのデフォルト設定が，
800 ピクセルを上限に圧縮してしまうようになっているため．
なので，設定を変更する必要がある．
設定手順
右上のはてな利用中のサービスから，
はてなフォトライフを選択する．
右上の設定を選択．
画像サイズは 800ピクセルとなっているので，
ここを 1920 など大きなサイズにする．
また，オリジナルサイズの画像を保存に✅を入れる．
この状態で，
画像ファイルをアップすることで，
変に圧縮されない設定になった．
はてなブログのヘッダ画像の余計な余白を消す
html で直接貼る
はてなブログのデフォルトのデザイン設定では，
思うように配置ができないので，HTML と css を直接記述して，
配置してしまう．
デザイン > カスタマイズ > ヘッダ > タイトル下に以下の html を追記．
<style type="text/css">
.header-image-wrapper {display:none;}
#blog-title{display:none;}
.headernew img{
max-width:1120px;
margin: auto;
display: block;
}
.headernew a{
display:block;
background-color:#fde6ff;
}
.headernew{
margin:0px!important;
}
</style>
<h1 class="headernew">
<a href="ブログのトップページURL">
<img src="ヘッダー画像のURL" alt="ブログタイトル" width="100%">
</a>
</h1>
- ブログのトップページURL
- ヘッダー画像の URL
- ブログタイトル
- background-color:#fde6ff
を自分のブログのものに編集する．
このとき，
画像ははてなフォトライフに直接アップしたものを使う．
はてなフォトライフにアップした画像を使う
はてなフォトライフ右上のアップロードを選択．
手順に沿ってアップロード，
アップロードした画像を右クリックし，
リンクをコピー．
画像の URL がコピーされるので，
先程の html の ヘッダー画像のURL 欄に貼り付ける．
おまけ．ヘッダサイズを半分にする
これは自分用の設定．
1000 * 200 で作ったヘッダをそのまま使うと大きすぎると感じたので，
大きさを半分にした．
先程の html 内の
css を以下のようにすれば OK ．
.header-image-wrapper {display:none;}
#blog-title{display:none;}
.headernew img{
max-width:979px;
margin: auto;
display: block;
height: 100px;
width: auto;
}
height と width を追加している．
以上．
おわりに
はてなブログは困ったときに大体先駆者がいるのが大変ありがたい．
おかげでヘッダを綺麗に設定できた．
かっこいいヘッダを作ってくれる人募集！
