はてなブログのヘッダー画像がボヤける→綺麗に表示させる方法

本ページにはプロモーションが含まれます。

はてなブログのヘッダー画像がぼやけて困っていませんか？

今回ははてなブログのヘッダーを綺麗に表示させる方法をご紹介します。

コードはご自由にコピペしていただき構いません。

ヘッダーを綺麗に表示させる方法

ヘッダーを綺麗に表示させる方法

まずは画質比較

スマホのスクリーンショットで画質比較すると、明らかに画質が良くなったことが分かります。

推奨設定

・レスポンシブデザイン：○

・デザインテーマ：Smooth(デフォルト)

　Smooth以外のデザインテーマの場合、画像の大きさや位置の調整をする必要があります。

先にやること

１.

まず、綺麗に表示させたいヘッダー画像を用意します。

はてな公式はレスポンシブデザインのヘッダーでは1000px×200pxを推奨していますが、実際にはこのサイズだとpx数が少なすぎて画像自体がザラザラもしくはモヤモヤしてしまいがちです。

私は1500px×300px(72dpi)をおすすめします。

２．

ヘッダー画像をアップロードします。記事編集画面からのアップロードは画質が低くなるため、はてなフォトライフで直接アップロードしましょう。

３.

はてなフォトライフでアップロードしたヘッダー画像を開き、画面右上の「リンク」から「HTMLタグ」をコピーしてどこかに貼っておきます。

スクリーンショット

これは後でCSSで画像を指定する時に使います。

４.

デザイン設定画面に行き、標準のヘッダ画像設定の欄に適当な軽い画像をアップロードする。この画像はサイズも問わず何でもOK。ヘッダの表示設定は「画像だけ表示」にする。

スクリーンショット

５.「デザインCSS」の欄に以下のコードを貼ります。

CSSコード

#blog-title-inner{
background-image:url(画像のURL)!important;
}
@media (max-width: 480px){#blog-title-inner{
background-size:1100px!important;
}
}

@media (max-width: 1024px){#blog-title-inner{
background-size:1000px!important;
}
}
@media (max-width: 1368px){#blog-title-inner{
background-size:1100px!important;
}
}

CSS解説

#blog-title-inner{
background-image:url(画像のURLを貼る)!important;
}↓スマホ表示の場合
@media (max-width: 480px){#blog-title-inner{
background-size:1100px!important;
}元画像より縮小してちょうど良い大きさにしています。
}↓タブレット縦表示の場合

@media (max-width: 1024px){#blog-title-inner{タブレット縦表示の場合
background-size:1000px!important;
}
}↓タブレット横表示の場合
@media (max-width: 1368px){#blog-title-inner{
background-size:1100px!important;
}
}