EDIT

【F-light】ヘッダー画像のボヤけを改善する

2023/03/04 ｜2023/09/06

拙作テーマ F-light を久しぶりにアップデートしました。

変更修正した箇所の内、前から一番気になっていたヘッダー画像のボヤけ問題に関する詳細を記事に残しておきます。

今回の変更でどのように変化するか

ヘッダー画像の配置を「タイトルと説明の代わり」にした場合の例です。

こちらの画像(2000×667px)で比較テストします。

ビフォー

スクショだと分かりづらいかもしれませんが、少しボヤけています。これはリサイズ処理後のパラメータが w800 までしか対応しておらず、実サイズの幅を 800px に縮小された上に画面幅いっぱいで表示させられているためです。

アフター

パラメータが w1600 まで適用可能になり最大 1600px まで表示可能になるため、くっきり表示に改善されました。(w1600 以上は非対応)

ちなみに小さい画像でもサイズによっては大きめに表示されてしまいボヤける場合があるのですが、今回のアップデートで改善されるようです。

手動での変更手順

ヘッダー画像のボヤけだけ何とかしたいという方は、わざわざテーマを張替えなくても以下のコードを置き換えるだけで対応完了です。当該コードは1か所しかないので1分も掛かりません。

いつものごとく念のために、予めバックアップを取ってから作業を行って下さい。

<b:include name='super.image'/>

↓↓変更

<a class='header-image-wrapper' expr:href='data:blog.homepageUrl'><b:include data='{image: data:image, altText: data:blog.title.escaped, originalWidth: data:width, originalHeight: data:height, imageSizes: [360,480,640,800,1000,1200,1600]}' name='responsiveImage'/></a>

参考: Header Image turns blurry when I use it (ヘッダー画像がぼやけます) - Blogger Community