ページ全体のデザインを0から作り直しました

本来であれば先にトップのロゴを作り直す方向で考えていたのですが、ふと気になってスマホからアクセスした時の見え方を調べてみたところとんでもない問題が発覚！

急遽、デザインを0から作り直すことにしたのでした。

元々のページ構成

筆者は普段スマホよりもパソコンでほぼ全てを完結させている状態ですので、このブログもパソコンのみで作成していました。

とはいえ昨今では筆者と違いスマホのみでほぼ全てを完結させる人も多い世の中ですから、一応レスポンシブデザインを念頭に置いてcssでのメディアクエリも設定し、実際にパソコンのブラウザの横幅をギューッと狭めて疑似的なスマホの画面（と思しき状況）での見え方もチェックしました。

いや、チェックしたつもりでした。

しかしながら、実際にiPhoneでアクセスしてみてあらビックリ！

文字ちっさ！レスポンシブ効いてない！！パソコンでアクセスした時の見た目がただ小さくなっただけ！！！！

最悪、パソコン画面がただ小さくなっただけでも文字が見やすいサイズで表示されていれば問題はあまりなかったのですが、ご覧の通り米粒よりも小さな文字がびっしり並んだページをスマホの小さな画面で見るのは苦行以外の何物でもありません。

最初はただ文字を大きくすれば良いだけなのだから、フォントのサイズ指定の数値を上げればいいと考えたのですが何故か反映されず。
それならばとpx指定ではなくem指定に置き換えてみても変化なし。
一部デザインの問題でpxとemが入り混じっているところがあるから、じゃあ片っ端からem指定に置き換えてやろう（※そんなことをしても意味が無いのは分かっているが・・・）と思い実行してみてもやっぱり変化なし。
完全に行き詰まりました。

そこで筆者は一大決心をします。
よろしい、ならばこのデザインテンプレートは放棄して0から作り直してやろう。

作り直したページ構成

元々のページ構成も勢いだったとはいえ24時間もかけて作ったものでしたから苦渋の決断ではありましたが、だからといって米粒以下の文章を訪問者に強いるのも良いことではありません。

また半日近くかけてhtml+cssと格闘した結果、出来上がったのが以下の通りです。

トップのロゴのサイズが急に大きくなったのはご愛嬌（笑）として、文字の単位指定を固定サイズ（px）ではなく相対指定のemにしていますので、スマホでアクセスされた場合はいま現在ご覧になっているこの文章もお手元のスマホの標準サイズの文字で表示されているはずです。
もしこれでも小さいのであれば、それはお手元のスマホの設定画面で文字サイズを確認してみてください。筆者サイドではどうすることも出来ない事案ですので。