【凡ミス】スマホでレイアウト崩れが生じてた

calendar

どうやら前回サイトデザインを今の状態に変更してから、このサイトはスマホだと実質見れない状態になっていたようです。

時間ができたので

一昨日あたりから、Gatsbyのバージョン上げたりとか、記事をちょろっと修正してみたりとか、とにかくメンテ作業を楽しくしていました。

今回やった中で特に大きな変更はGatsbyのパッケージ更新と選別で、その選別ではgatsby-plugin-offlineを削除しちゃいました。

このプラグインは導入するとサイトをPWA化してくれるやつなんですけど、僕にはPWAの扱いが難しくて、ギブアップです。 これでも色々調べたりして頑張ってみたりしたんですけど、もうスパッと削除して忘れることにしました。

だってGatsbyってPWA化しなくてもWordPressと比べりゃ十分速いじゃないですか。 このくらい無視しても良いんじゃない?ってね。

バグ発見

それでこの作業を一通りやった後に、各デバイスで一応バグってないか調べてみたんです。 パッケージのバージョンがかなり上がったので「一応やっとかないと」という流れでやったんですけど、全然違うバグが見つかっちゃいました。

なんとなんとスマホだとレイアウトが崩れてしまい、肝心の記事内容が何も表示されなくなるという、かなり悪質なやつ。 しかも困ったことに、サイトトップから記事を見に行くと何ともないのに、直リンクで入るとバグるという謎仕様。

原因はレスポンシブ化の処理で抜けてる所があって、ただの凡ミスだったんですが、結構ショックでした。

スマホのアクセス数がやたら低い理由が今日になって理解できました(汗)

今後に期待!

元々WordPressで作ったサイトよりもアクセス数の伸びが遅すぎるなと少し不思議に思ってたんですが、まさかサイトが壊れてたとは… レイアウト崩れでスマホだと中身が読めない場合があるなんて、全然想定してなかったです。 7~8割くらいはスマホユーザーな時代を思えば、相当時間をムダにしちゃってますよね。

まぁでも今回ちゃんと直したんでね。 来月は今までより相当マシな数値を出してくれるんじゃないかな?と若干期待しときます。

以上、今日はこれにて!

Some images are made by Freepik's icons from www.flaticon.com