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

2023/09/06
アイキャッチ

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

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

CONTENTS

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

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

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

Blogger logo

ビフォー

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

ヘッダー画像 2000x667px 変更前

アフター

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

ヘッダー画像 2000x667px 変更後

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

手動での変更手順

ヘッダー画像のボヤけだけ何とかしたいという方は、わざわざテーマを張替えなくても以下のコードを置き換えるだけで対応完了です。当該コードは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

最後に

ヘッダー画像がボヤけている F-light ブログが散見されて気になっていたものの、ずっと見て見ぬふりをしていたのですが、今回重い腰を上げてアップデートしたことで、漸く気分的にもヘッダー画像のようにモヤモヤが晴れてスッキリしました(笑)