スマートフォンでブログのデザインカスタマイズを考える
最近、意識高くて(?)Googleアナリティクスを見ているんですが、「このブログをスマホで見ている人めっちゃ多いなぁ」と思うように。大体、アナリティクス運用し始めた頃と比べると2倍ぐらいの割合になってます。
最初、「は?スマホでブログをまじまじと見る人なんて、いないだろ。マジ」とか思って、あんまりこだわらなかったけど、実態はそうではなさそうだ。
特に問題は「グローバルナビゲーション」無造作に各カテゴリーのリストが縦に並ぶ。
これは、今後、リストが増えるごとにより、永延と縦に伸びていくということでもある。それはまずい。リストはまとめておいて、たたみたい。
短いコードで楽に畳めるものってないかな、と探してたら、あった。
↓このサイトがとても参考になりました。
タグの中にそれぞれのコードまとめて入れているから、楽。
メニューなので1個しか使わないことを前提に、
このはてなブログのスマートフォン用HTML記載画面に記述するなら合っていると思う。
レスポンシブデザインにするべきか考えたし、迷った。
レスポンシブデザインに、広告以外、対応している状態で、広告も差し替えればいける。今後はこれが標準になるという話も聞いている。
でも、これはしばらく使わないことに決めた。
まず、マウスでクリックすることと、指でタップするのは、感覚的には違う感じがして、それぞれに別のデザインが必要じゃないかと思った。
ので、記事の見出しのデザインも、スマートフォンはよりボタン風に近い形にデザインにしてたりする。
追記:メニューをたたむやつを消して別の方法へ
後述するカテゴリー一覧と併用すると、ヘッダのスペースを取りすぎる気がしたんで、畳むボタンは消して下記のフッターのメニュー固定を使いました。
カテゴリー部分を「ナビMENU」として、ここをグローバルナビゲーション代わりに使用しております。
スマホ用デザインにはカテゴリー一覧を取り付ける
非常に不便なことに、はてなのブログのスマホ画面には、カテゴリー一覧がない。
ということで、何かないと探してみたら、これもあった。
はてなブログ(というより、ブロガーさんすごい!)
www.ituore.com
上記のサイトの解説どおりに設置。
これでそこそこましになったかも?
フッターに固定メニューを取り付ける。
リスト
スマホでブログをまじまじ見る時代なんですなぁ。
ディスカッション
コメント一覧
まだ、コメントがありません