画像を流用して画面が壊れた話|ヘッダーロゴとファビコンの失敗から学んだこと

📖 読了目安: 約3分

今週は開発ログというより、完全に失敗談の週でした。サイトの見た目を整えようと思って、ヘッダーにロゴ画像を入れたり、ファビコンを設定したりしたのですが、どちらもすんなりとはいかず、思わぬところで躓いてしまいました。

コードを書いたわけでもなく、新しい機能を追加したわけでもないのですが、こういう「ちょっとした見た目の調整」こそ、意外と落とし穴が多いんだなと実感しました。

正方形の画像を横長のヘッダーに貼ってしまった

最初の失敗は、ヘッダーにロゴ画像を設定しようとしたときに起きました。以前、ファビコン用に作っておいた正方形のアイコン画像(512×512ピクセル)があったので、「これをそのまま使えば楽だな」と思って、サイズ指定も何もせずにWordPressの管理画面からアップロードしてしまったんです。

結果は大惨事でした。ブラウザでサイトを開いてみると、横長のはずのヘッダー全体が、原寸大の正方形画像で埋め尽くされていました。画面いっぱいに真っ青な巨大アイコンがドーンと表示されて、記事どころか他のメニューも何も見えない状態です。慌てて画像を削除して、今度はきちんと横長のロゴ画像を新しく作り直しました。

当然ながら、今度は幅と高さを明示的に指定してからアップロードしたので、無事に収まりました。でも、この失敗で学んだのは、「前に作った画像を別の場所に流用するときは、サイズ制約が全然違うかもしれない」ということです。ファビコンとヘッダーロゴでは、求められる形も大きさも全く違うのに、それを考えずに使い回そうとしてしまったわけです。

サーバーキャッシュに阻まれたファビコン設定

次に起きたのが、サイト直下にfavicon.icoファイルを置こうとしたときの問題です。レンタルサーバーのファイル管理画面から、wp-config.phpと同じ階層に正しくアップロードしてもらったのですが、ブラウザでアクセスしても何度やっても404エラーが返ってきます。

おかしいと思ってレスポンスヘッダーを確認してみたところ、「最終更新日」として、今日とは全く関係ない1年以上前の日付が返ってきていました。どうやらサーバー側のキャッシュが、ファイルを置く前の「存在しない」状態を長期間覚え込んでしまっているようでした。

WordPress管理画面の中にあるキャッシュプラグインの「全キャッシュを削除」ボタンを探したのですが、どこにあるのか分からず、何度も違うメニューを行ったり来たりする羽目になりました。最終的には「キャッシュを一度無効にしてから再度有効にする」という荒業まで試してみたのですが、それでも直りませんでした。

ただ、よく考えてみると、これは実害のほとんどない見た目だけの問題です。ファビコンが表示されなくても、ブログの機能自体には何の影響もありません。そこで、深追いせずいったん保留にすることにしました。全ての不具合を根本解決するよりも、コストと見合うかどうかを見極めることも大事だと学びました。

今回は開発というより、サイトの見た目を整えようとして起きた小さな失敗談でした。でも、こういう失敗から学んだことは、案外大きかったように思います。

• 画像を別の場所に流用するときは、サイズ制約が全然違うかもしれないと疑う
• サーバー側のキャッシュが古い情報を覚え込んでいると、新しいファイルが反映されないことがある
• 全ての不具合を完璧に直すより、コストと見合うか見極めることも大事

本記事にはアフィリエイト広告・プロモーションが含まれる場合があります。紹介する商品・サービスの購入や申込みは、必ずご自身の判断と責任で行ってください。