先日、ブログの読者の方から「いくつかの記事の画像が表示されません」とご指摘いただきました。どうやらスマホから閲覧する時にのみ起こる現象でMacのブラウザーではちゃんと表示されます。
ブログを書くのはスマホだったり、Macだったりしますが、仕上げと確認はMacで行っていたため気付きませんでした。
iPhoneで確認したところ、確かに一部の記事でアイキャッチ画像をはじめ、記事内の画像が全て真っ白になっていました。アプリをChrome、Safariと色々変えて試しましたが同じ様に白いまま。
スマホから閲覧すると03.13と03.11のアイキャッチ画像が表示されていません。
同様に記事内の画像も表示されていません。
テンプレートはArbatrosを使っており、サポート担当者へメールをしてみました。最初の返信では「特定のプラグインとの相性が悪いのかもしれません」とのことで記載のあったプラグインを全て確認しましたが該当せず。
その旨を伝え再度メールしたところ、「画像を日本語で保存している場合に表示されないことがあります。ファイル名をローマ字にしてから再度アップしてみてはいかがでしょうか」とのこと。確かに使用している画像はリサイズとリネームをしておりますが、スマホでも問題なく表示されている画像もあります。
画像が表示されていない記事のファイル名をよくよく見てみると共通点がありました。それは「濁点、半濁点」を使っていること。例えば「オーガニック」「ひつじ」「ペッパー」などの画像が表示されません。漢字や濁点、半濁点以外の文字を使用した画像は問題なく表示されています。
該当するファイル名をローマ字に変更し再度アップしたところスマホでもきちんと表示されました。やはりこれが原因でした。WordPressの問題なのかテンプレートの問題なのかはっきりとはわかりませんがとりあえず解決しスッキリしました。
なお、ファイル名に濁点、半濁点を使う場合でも「WP Multibyte Patch」というプラグインを入れれば解決できるということがわかりました。画像検索でひっかかりを多くするためには日本語のファイル名の方がいいのですが、それを気にしないならばローマ字のファイル名の方が安心。
もし、同じような症状の方は参考になるかと思い記事にしました。お役に立てれば幸い。
ほな！