---

スマホ人口が増えてきた昨今、いくら弱小サイトだといってもスマホに対応しないと時代の流れについていけません。
ということで、そろそろスマホ対応の話をしようと思いましたので、今日はその話を。





うちのサイトをスマホで見ると、大体こんな感じになります。
リキッドレイアウトで設計してるので、スマホで見ても横スクロールは必要なく、パソコンで見るのと同じような感覚で見ることができます。
(※日記の横サイズ下限を400pxにしているため、横解像度が580px以下の場合は横スクロールが必要になります。)


ただ、日記を見るために下にスクロールしていくと･･････





ダサい･･････。



やはりスマホでは横幅いっぱいに日記を表示すべきですね。


ここでスマホでどういうデザインにするべきか考えるわけですが日記以外のコンテンツはスマホで見ることは基本的にないと思うんですよね。
スマホで音楽素材検索するヤツ居るか？って話です。普通はいないと思います。何の需要があるのか分かりませんし。

スマホで見る可能性のあるコンテンツっていったら、日記、あるいは掲示板ぐらいですかね。あとは全部下に追いやって構わないのでは。



と、いうことで実装してみました。
今日一日でやるつもりだったのですが「眠い」という理由で翌日まで持ち越すハメになりましたが完成しました。
27日の日記に28日のこと書くんじゃねえよとか言われても常套手段なのでツッコまないでください。書くことなくなっちゃいます。（）



具体的に何が変わったねん、って話ですが、まぁ実際にウィンドウサイズを変えてもらえれば分かるかなと思います。3段階ぐらいで変化します。






まずこれがパソコンでアクセスした場合の画面です。


で、ウィンドウの横サイズが780px以下になると･･････






左メニューがなくなります！


携帯型デバイスで参照する可能性のある日記と掲示板(実際は使われませんが笑)のみコンテンツとして、残りは･･････






全部下に追いやります。


ちょっとリンクのスタイルシート設定をちゃんとやってないことに今気づきましたが、そのうちもーちょっとちゃんとしたレイアウトにする予定なので今は放置させていただきます。
手を抜くためにリンクのリンク(ややこしいですね)はPHPの関数として出力することで記述を1つにまとめてたりします。


さらに、横サイズが560px以下になるともう一段階変化しまして･･････






邪魔な文章を全て排除し、日記更新を知らせるタイトル表示も違うとこに移動させ、完全にスマホ対応することになります。
また、画像としては載せませんが、下のメニューも3列だったのが2列になったりします。



とりあえずの実装になりましたが、これでスマホでもだいぶ見やすくなったんじゃないでしょうか。
デザインはあまり気に入ったものではないので、そのうち書き直すつもりですが、機能的にはちゃんと動いているのでしばらくはこのままで。



あ、あと気づいた方もいるかも知れませんがコメント欄を撤去しました。文字化け問題を放置するわけにもいかないので･･････
自作のコメントフォームが完成したら復活させます。御用のある方は掲示板か、あるいはtwitterなんかでDM送ってくださいまし。メールフォームもそのうち置こうかなと思ってますが、たまーにスパムメール来るんで置くのためらってます。（笑）



ただ、一応言っとくと、日記本文自体は基本的にPCで見ることを前提にレイアウトされており、スマホで見ることに最適化はするつもりないのでご了承ください。っていうか不可能なので。（笑）