サムネイルが [ NO IMAGE ] [8/7更新]

これは、自分のための備忘録的な技術メモです。

●サムネイルがグレーの"NO IMAGE"

2020/7/21 10時現在、古い記事のうち一部記事でサムネイル（記事タイトルの左側に表示される画像）が、グレーの"NO IMAGE"となっています。

●ブログの環境

ブログはWordPressで運営しており、WordPressのテーマはSimplicityを使っています。

Simplicityではサムネイルは、記事内の画像から、もしくはアイキャッチ画像を設定すると、自動的に製作されるのですが、そのどちらも行わないとデフォルトのサムネイルが表示されます。

デフォルトのサムネイルのファイルは、

https://en-light.net/wp-content/themes/simplicity2/images/no-image.png

となっています。

テーマファイルの"no-image.png"を置き換えることで、表示したいサムネイルに変更できるので、以前はこちらのファイル、

に置き換えをしていました。

●アップデート

提供元でテーマがアップデートされたので、自分のブログもテーマをアップロードしてアップデートすると、テーマ内の各種ファイルが更新されます。

デフォルトのサムネイルである"no-image.png"も更新されます。
そのため、元のグレーの"NO IMAGE"の画像に戻ってしまいました。

●対策しました

テーマファイルの製作者の記事を見てみると、プラグインで設定するというのもあるようで、現在調査してみましたが、上手く動作しないものもあるようなので、2020/7/21 23時にテーマファイルの"no-image.png"をツリー画像に置き換えしました。

ブラウザのキャッシュに以前の"no-image.png"の画像がキャッシュされている場合は、グレーのNO IMAGEが表示されます。
ブラウザの閲覧履歴と画像キャッシュとCookieをクリアをするとツリー画像が表示されるようになります。

なお、キャッシュクリアをすると、これまでの閲覧履歴が消去され、再度ログインしなおす必要が出てくることもあります。下記の説明をよく読んでから実行してください。

①iPhone, Android, パソコンで、Chromeを使っている場合のキャッシュクリアについては、こちらのサイトを参照してください。

②iPhone - Safariの場合のキャッシュクリアについては、こちらのサイトを参照してください。

iPhoneユーザーガイド
iPhoneのSafariでキャッシュを消去する
https://support.apple.com/ja-jp/guide/iphone/iphacc5f0202/ios

③Windows - Microsoft Edgeの場合のキャッシュクリアについては、こちらのサイトを参照してください。

Windows FAQ
Microsoft Edgeのキャッシュクリア（削除）手順
https://windowsfaq.net/windows/microsoft-edge/delete-cache/

●最近の人気記事

PCで見ると、右列に「最近の人気記事」がならんですが、こちらのサムネイルは上記とは異なり、WordPress Popular Postsプラグインが生成しているもののため、上記の対策だけでは、"NO IMAGE"のままになります。

変更するには、WordPress Popular Postsの設定画面　→　ツール　に移動して、デフォルトのアイキャッチ画像を設定する必要があります。

設定後の画面がこちら：

●おまけ（その１）

対策について書くときに、ブログを読んでいる人がどういうデバイスを使っているのかをGoogleAnalytics 4のデータ（直前約１週間）で出してみたら、こんな感じです。

Apple iPhone(iOS)とWindowsとAndroidで、全体の93%になります。グラフ上1%以下になるので表示されていないですが、Chrome OS、Linux、Playstation 4も僅かながらあります。

iPhoneとWindowsは所有しているので、技術的にも分かりますが、AndroidとMacintosh、Chrome OS、Linux、Playstation 4は持ってないので、詳しいところは分かりません。

また、ブラウザについてはこんな感じ。

iPhone標準ブラウザのSafariが約半数で、次にChromeが続きます。
Edgeはおそらく大半がWindowsだと思われます。

ということで、SafariとChromeおよびWindowsを押さえておけば、9割以上のユーザーに伝えることができるということになります。
それ以外のものについては、私の方で検証する環境がないのと、多種多様になるため技術サポートするのが難しくなります。

●おまけ（その２）

「格安温泉宿」の記事をついでにアップデートしました。