【ワードプレスお悩み解決】スマホで見た時になぜか画像が表示されない時の原因3つ

スポンサーリンク

こんにちは、WEBマーケッター山田祐輔です。

突然ですが、あなたは自分のワードプレスで作成したサイトをスマホで見た時に、画像が表示されないとお悩みではありませんか?

 

そう、何を隠そう僕も実は1か月ぐらい悩んでました!

「何でスマホで見た時に画像が表示されへんねやーー!!」

 

しかもその間、スマホからの離脱率は急上昇。

その時の表情がこちら。

 

 

しかし、見て見ぬふりをしながらも僕は解決策を考え続け、ググりまくって検証した結果、ようやく原因がわかった。

では、今からスマホであなたの画像が表示されない3つの原因について書いていきます。

安心してください。僕もCSSとかは一切分かりませんよ。笑

 

・・では、行きましょう!

 

原因1、画像の名前が日本語である

max16011550_TP_V

 

いきなり大本命の登場だ。

そう、このブログも画像を日本語で名前をつけていた結果、スマホで画像が表示されてなかったんです。笑

具体的にお話していきます。

 

まず、ワードプレスのダッシュボードを開く。

次に、下記のように「メディア」から「ライブラリ」を選択する。

スクリーンショット 2016-04-17 22.49.11

 

すると、今までのアイキャッチ画像などが一覧で表示されます。

その中から表示を確認したい画像を選択します。

今回は一番上の一番左の画像で検証していきまっす。

スクリーンショット 2016-04-17 22.49.32

 

画像を選択すると、画面の右側にこんな表示が出ます。

その中で「ファイル名」を見てください。

今回は処理後に撮ったキャプチャ画像なので、ちゃんと英語に変わってますよね。

ここが日本語になっていたら問題アリ!

 

ここが日本語の場合は次に進む。

 

スクリーンショット 2016-04-17 22.50.33

 

画面の一番下の「さらに詳細を編集」という項目があるので、そこをクリック。

 

スクリーンショット 2016-04-17 22.50.09

 

すると、詳細の設定が確認できます。

そこで今、画像が設定されている上に下記のようなパーマリンクが表示されます。

そして、その右側に「編集」をいう項目があります。

ここの「最後の/(スラッシュ)の後ろが日本語」の場合は、英語表記に変更が必要です!

 

スクリーンショット 2016-04-17 22.51.38

 

特にどんな英語でも問題ないが、きちんとした英語にしたいのであれば「グーグル翻訳」を使うといいですね。

もちろん山田も毎回使っているのはここだけの話です。笑

話を戻して、「グーグル」「翻訳」と検索すれば一番上に出てくる。

スクリーンショット 2016-04-17 23.08.45

次に、入力が完了したら「OK」を選択。

スクリーンショット 2016-04-17 22.51.18

 

そして、最後に右側に「保存」をクリックすれば完了でっす。

 

スクリーンショット 2016-04-17 22.51.56

 

ちなみにこれで1枚は完了したが、他にも日本語表記になっているなら残念ながら全て変えなくてはいけないです。

・・・とにかくユーザーのためなので頑張りましょう!

 

これで多くの場合は問題なく解決するでしょう!

 

原因2、プラグインの問題(Lazy Load、Autoptimize)

PAK87_HDDDRILL220141221152630_TP_V

1で解決しない場合、プラグインによる干渉の可能性も出てきます。

よく問題にされているのが「Lazy Load」「Autoptimize」ですね。

前者は表示の読み込みを遅らせてくれサイトの表示速度を速めてくれ、後者はHTML、CSS、JavaScriptの縮小してくれるお互いに大変便利なプラグインでっす。

しかし、どちらのプラグインもその便利さ故か色々と他のプラグインとの干渉を起こすみたいです。

特に後者の「Autoptimize」は設定方法によっては必要なコードも消してしまう恐ろしい側面も持っています。

(山田は一度、これが原因で画面が真っ白になりました・・)

少し話が逸れたが、スマホで画像が表示されないのであれば一度どちらか、もしくは両方プラグインの設定を切ってみましょう。

知らない方のために一応説明するが、設定をオフにする方法は下記のとおりでっす。

まず、ダッシュボードに行き、「プラグイン」から「インストール済みプラグイン」を選択。

スクリーンショット 2016-04-17 23.30.00

 

そして一覧の中からプラグインの項目の「停止」をクリック。

 

スクリーンショット 2016-04-17 23.30.15

 

これでプラグインを停止させることができる。

 

原因3、「Photon」の設定を切ってみる

PAK86_konbaniccyaimasu20131223_TP_V

これは「jetpack」というプラグインの設定の中に含まれています。

これを設定しておくと、画像と写真の処理をスピードアップしてくれる優れものです。

山田も「jetpack」の設定の際に必ず設定する大変便利な機能である。が、この「Photon」が原因で画像の処理が上手くいかないことがあるらしいっス。

一応、設定の解除方法も書いておきまっす。

まずは、ダッシュボードから「jetpack」「設定」を開く。

スクリーンショット 2016-04-17 23.48.34

次に、項目の中から「Photon」の設定を「停止」にすればOK。

 

これで設定は停止することができた。

 

まとめ

 

いかがでしたでしょうか?

まとめると、大概の場合、画像の名称が「日本語」表記になっているので、これを「英語」表記に変える。

そして、次にプラグインの設定や干渉を疑う。という流れですね。

 

〈スマホで画像が表示されない理由〉

1、画像名が日本語でないかチェック

2、Lazy Load、Autoptimizeなどのプラグインを疑ってみる

3、「Photon」の設定を切ってみる

 

これで自分は解決したが、あなたの場合はどうでしょう?

 

もし、それでも解決しない場合はコメント欄に書いていただければご相談に乗りますのでぜひ教えてください!

というわけで、参考になったらぜひいいね!やシェアをお願いします!

 

ではでは!

スポンサーリンク

参考になりましたら、「ツイート」や「シェア」お願いします!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

IT企業でメディア運営を行いながら個人でもWEBデザインやネットビジネス、映像など色んなことを勉強中!(特に海外のマーケティング情報が大好物)このブログでは主に学んだことを中心に、個人や小規模ビジネスを対象にしたコンテンツマーケティングに関する情報を中心に書いています!