商品・サービスへのリンクは一部を除きアフィリエイトリンクです。
SNSボタン「COPY」は記事URLコピーボタンです。シェアする時にご利用ください。
新着記事などはメニューボタンから見られます。

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

ブログ運営・お知らせ,日記・コラム,日記・お知らせ,趣味の事

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

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

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

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

  • スマホ用デザインにはカテゴリー一覧を取り付ける
  • ↓このサイトがとても参考になりました。

    fukafuka295.jp

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

    スポンサーリンク

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

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

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

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

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

    f:id:daij1n:20171123110333p:plain

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

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

    www.yukihy.com

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

    スポンサーリンク

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

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

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

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

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

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

    スポンサーリンク

    アニメ・映画・グラビア見放題!

    【読者登録をして、新着通知を受け取る】