スマホでヘッダーが表示されない!
こんなことが起きました。
レスポンンシブル対応のテーマを使用しているので、PCで作業しながらタブレットとスマホのレイアウトも確認しながら外観テーマの編集完了。
チェックを兼ねて実際のスマホでも問題なく確認出来るか最終チェックしてみます。
そしたらヘッダーが表示されてましぇん。
コードはなにもいじ繰り回してません。
なぜ・・・
WordPressのテーマはAffinger4を使用しているですが、以前違うテーマでも同様の現象が起きてました。
その時は放置してしまいましたが・・・。これではいかん!!
日本でのiOSシェアは50%を超えてるのでこれは早急に解決しなければならない大問題・・・。(なんで前回は放置したんだ)
念の為、手元にある機器で一通り確認を実施。
Macbook | 問題なし |
Windows | 問題なし |
iOS | 見れない。大問題 |
Android | 問題なし |
Android見れてるじゃないすか・・・
iphone7のみヘッダーが表示されない・・・Why ○○○○○ People !!
原因を色々探してみると、解決方法を見つけました。
解決方法
ヘッダー画像の画像ファイル名をアルファベットか数字表記にして再アップロード
これで完了です。
日本語表記になっている場合、iOSではヘッダーの画像を読み込んでくれないみたいです。
他で運用していたサイトもこの方法で修正できました。
余談:簡単にファイル名を変更する方法
※画像ファイル名を管理していない場合にオススメです。w
WordPressのメニューからメディアライブラリでアップロードしている
ヘッダー画像のファイル名確認しましょう。
ファイルを引っ張り出して再アップするのが面倒だったので、画像編集画面で画像の方向を左右のどちらかに回転させて・・・
もっかい戻すと英数表記になります。w
更新で保存して、作業完了!
自身のiphone7を起動して確認してみると・・・
見れましたーーーーー!!!
まとめ
Webサイトの観覧はその殆どがスマホにシフトしています。
運用しているサイト構成はスマホを軸にして構築するのは当然ですが、パソコンで作成した場合、しっかり表示されているかどうかのチェックを怠っている人は少なからず居るはずです。(私みたいにw)
なので、最終的な表示の確認はiOS、Android、Mac、Windous全てで確認した出来たほうが望ましいです。
意外な盲点に気付くはずです。
ご参考になれば幸いです。