スマホで自分のブログを確認していたとき、ふと気になることがありました。
記事の一覧ページを見ると、サムネイル画像の左上と右下に「AI活用」というバッジが2つ表示されていたんです。
最初は「目の錯覚かな？」と思ってもう一度見直しました。でもやっぱり2つある。
「これ、おかしいよね……？」と思いながらクロコに相談したのが、この長い戦いの始まりでした。
バッジが2か所に出てる！どういうこと？
.cat-label の位置を bottom:4px; right:4px に指定しつつ、記事カード内のものだけ表示するようにセレクターを絞ります。修正後はConoHa WINGのキャッシュをクリアしてから確認してください。
CSSで直そうとしたが…iOS Safariだけ直らない
キャッシュをクリアして確認。PCのChromeではバッジが右下1か所だけに表示されていて、一瞬「直った！」と思いました。
でも、iPhoneで確認するとまた左上と右下に2つ出ているんです。
bottom:4px のような絶対配置を指定しても、Safariはページの初期描画時の位置をゴーストとして残すことがあります。後からCSSで位置を変えようとしても、最初に描画した場所のバッジが残ってしまうんです。
display:none にして初期描画前に完全に非表示にします。そのあとJavaScriptで、DOM読み込み完了後に正しい位置で display:block として表示し直します。これでゴーストの発生を防げます。この方法で更新してみます。プライベートモードで確認してみてください（キャッシュの影響を排除するため）。
CSS＋JSで対処。でも実践編の記事だけおかしい
プライベートモードで確認すると、バッジが右下1か所だけになっていました。
「ついに直った！！」
思わず声が出るくらいうれしかったです。CSS→JS→プライベートモード確認、この流れを何度も繰り返してきたので、本当にほっとしました。
念のため全記事を1本ずつ確認していきます。入門編（パステルロボット）の記事……OK。会話形式の記事……OK。転職系の記事……OK。
あれ。
さっきプライベートモードで確認したはずなのに……どうして？
普通、画像の話になるとは思わないですよね。CSSが効いていないとか、JSの読み込みタイミングとか、そういう話が続くと思っていたので、「画像を調べる」という言葉が出てきたとき、正直「何を言っているんだろう」と思いました。
そこまで言われて、やっと思い出しました。最初に実践編アイキャッチを作ったとき、ブログのページをスクリーンショットで撮って、それをPythonで加工してダークネイビーの背景にしていたんです。
真犯人は「画像に焼き込まれたバッジ」だった
これを聞いたとき、思わず「えっ、そんなことある？」と声が出ました。
2時間近く格闘してきた相手が、HTMLではなく画像ファイルの中のピクセルだったなんて。しかも原因を作ったのは自分自身。「スクリーンショットをベースにしたから」という話を聞いて、なんとも言えない気持ちになりました。
調査結果：x=30~131, y=28~65の範囲にバッジのピクセルを検出
バッジカラー：#4285f4系（Cocoonのデフォルトバッジカラー）
対象画像：実践編アイキャッチ7枚ImageDraw.rectangle() で (30,28)〜(131,65) の範囲をダークネイビー(30,41,59)で上書きします。7記事分の画像を修正して、WordPressに再アップロードします。修正が完了しました。7枚のアイキャッチを差し替えて、各記事のアイキャッチIDも更新しています。
まとめ：HTMLじゃなくて画像が問題だった
今回の学びをまとめると、こうなります。
| 試したこと | 結果 |
|---|---|
| CSSで位置を変更 | PCは直ったがiOS Safariで再発 |
| CSS全非表示＋JSで再表示 | HTML上は解決・でも画像のバッジが残る |
| 画像ピクセルを塗りつぶし | 根本解決！ |
2時間近くCSSやJavaScriptと格闘したのに、本当の原因はPNGファイルの中のピクセルだったというオチ。クロコが「画像自体を調べてみます」と言い出したときは半信半疑でしたが、これは自分だけでは絶対に気づけなかったと思います。
ブログのトラブルって、原因がコードにあるとは限らないんですよね。今回みたいに「画像の中身」が問題だったケースは、検索しても情報が出てこなくて途方に暮れたはずです。AIと一緒に作業していることで、こういう斜め上の原因にたどり着けたのは本当に助かりました。
この記事でわかったこと
- スクリーンショットベースで作った画像は、そのとき表示されていたUIがそのまま焼き込まれる
- iOS Safariは初期描画後にCSSで位置を変えても「ゴースト」が残るバグがある
- CSS・JSで直らないときは、画像ファイルそのものを疑ってみる
次にやること
今回の修正で実践編アイキャッチ7枚を作り直しました。新しく画像を作る際は、ページのスクリーンショットではなく、最初からPythonで背景・テキスト・キャラクターを合成して作るようにしています。
関連記事：
→ ブログのアイキャッチをGeminiで統一する方法【入門編・プロンプト公開】
→ ブログのアイキャッチを全記事統一した話【実践編・AIとのやりとり全公開】
ブログの細かい調整に時間を使ったあとは、収益化の全体像を整理しておくと「今何のためにやっているか」が見えやすくなります。
→ 副業ブログで月1万円稼ぐロードマップ【完全版・40代・AI活用】
カテゴリーバッジの基本的なカスタマイズ方法は、入門編にまとめています。
→ 記事カードのカテゴリーバッジをカスタマイズする方法【入門編・CSS公開】
コメント