ゲーマー逃避行ブログ

社会や経済、ゲーム産業やゲームユーザー、ネット文化について考察して語ります。

スマートフォンでブログのデザインカスタマイズを考える

最近、意識高くて(?)Googleアナリティクスを見ているんですが、「このブログをスマホで見ている人めっちゃ多いなぁ」と思うように。大体、アナリティクス運用し始めた頃と比べると2倍ぐらいの割合になってます。

最初、「は?スマホでブログをまじまじと見る人なんて、いないだろ。マジ」とか思って、あんまりこだわらなかったけど、実態はそうではなさそうだ。

特に問題は「グローバルナビゲーション」無造作に各カテゴリーのリストが縦に並ぶ。
これは、今後、リストが増えるごとにより、永延と縦に伸びていくということでもある。それはまずい。リストはまとめておいて、たたみたい。

短いコードで楽に畳めるものってないかな、と探してたら、あった。

↓このサイトがとても参考になりました。

fukafuka295.jp

タグの中にそれぞれのコードまとめて入れているから、楽。
メニューなので1個しか使わないことを前提に、
このはてなブログのスマートフォン用HTML記載画面に記述するなら合っていると思う。

レスポンシブデザインにするべきか考えたし、迷った。

レスポンシブデザインに、広告以外、対応している状態で、広告も差し替えればいける。今後はこれが標準になるという話も聞いている。

でも、これはしばらく使わないことに決めた。

まず、マウスでクリックすることと、指でタップするのは、感覚的には違う感じがして、それぞれに別のデザインが必要じゃないかと思った。

ので、記事の見出しのデザインも、スマートフォンはよりボタン風に近い形にデザインにしてたりする。

f:id:daij1n:20171123110333p:plain

追記:メニューをたたむやつを消して別の方法へ

後述するカテゴリー一覧と併用すると、ヘッダのスペースを取りすぎる気がしたんで、畳むボタンは消して下記のフッターのメニュー固定を使いました。

www.yukihy.com

カテゴリー部分を「ナビMENU」として、ここをグローバルナビゲーション代わりに使用しております。

スマホ用デザインにはカテゴリー一覧を取り付ける

非常に不便なことに、はてなのブログのスマホ画面には、カテゴリー一覧がない。

ということで、何かないと探してみたら、これもあった。
はてなブログ(というより、ブロガーさんすごい!)

www.ituore.com
上記のサイトの解説どおりに設置。
これでそこそこましになったかも?

フッターに固定メニューを取り付ける。
リスト

スマホでブログをまじまじ見る時代なんですなぁ。

当サイトのプライバシーポリシーについて