みんなモバイルでの「レイアウト崩れ」気付いてる？【はてなブロガー向け】

　ちょびっと気になったので記事にしてみる。

　はてなブログの管理ページでは、パソコン版表示のレイアウトしかいじれません。

　だからそのせいか、

　モバイル端末でのレイアウト崩れに気付いていない？

　あるいは、気付いてても放置中？

　と思われるブロガーさんがけっこういます。

　例１　ipadで崩れるパターン

　例えば有名な脱社畜ブログのid:dennou_kurageさんのところは

　パソコンで見るとこんな感じだけど。

　でもipadで見ると、右側のサイドバーが

　横幅が足りなくて記事の一番下に移動しちゃってます。

　こんな感じ。

　ソースを見てないからなんともだけど、

　多分サイドバーの一番上にある広告が悪さしてる気がする。

　例２　iphoneでダメなパターン

　お料理ブログでじわじわ人気を集めてきている

　id:Healthy-Yamachan さんのブログは

　ひとまず、パソコン・ipadでは正常に表示されます。

　しかし、iphoneで見ると

　記事下に設置されてる「新着記事一覧」「人気記事一覧」がレイアウト崩れを起こしている。

　記事ページ全体の横幅（300px）よりも、画像のほうが大きいため、

　横に大幅にはみ出ちゃってる。

　こうなるとページ全体が無駄な余白を持つので、

　下にスライドする時とかにぐらぐら揺れて気持ち悪い。

　記事下に広告とかブログパーツを入れてる人は、

　けっこうありがちなパターンだと思う。

　ただ、崩れてるからって即あせる必要も無いです

　まずはアナリティクスさん辺りで、自分のブログにアクセスしてくる人達の環境を確認してみましょう。

　もしモバイルが少ないなら、当面放置でも良いと思います。

　もし、当ブログのように「モバイルが５０％前後」なんて場合は、即対応した方が良いと思います。

　注意して欲しいポイント

　１、ipadは横幅980pxが限界。

　パソコンの大画面なら問題ないレイアウトでも、ipadだと980pxの壁に阻まれてレイアウト崩れを起こすのは、よくあるパターンです。

　記事エリアの横幅＋サイドバーエリアの横幅＋各種空白の合計値が、980pxを超えないようにレイアウトしましょう。

　２　管理ページ→デザイン→「記事下」で設定した広告やブログパーツは、スマートフォン版でもそのまま表示される。

　だから、パソコン版だけを意識してレイアウトすると、

　スマートフォンでは崩れる場合が多いです。

　３、iphoneは横幅320pxが限界。

　はてなのスマフォ用テンプレートだと、

　横に若干の空白が挿入されるので、記事エリアは300pxが限界です。

　つまり、記事下に広告やブログパーツを入れる場合、

　300pxまでのものを入れるようにすれば安心です。

　ちなみに

　当ブログでは、記事下に横幅300pxの広告を横に二つ並べていますが、

　これはiphoneだと縦に二つ並ぶ形で表示されます。

　つまり、単体パーツで300pxを超えるのはダメですが、

　複数パーツで超える分には問題ないということです。

　一つのパーツの横幅が300px以内に収まってさえいれば、

　縦並びか横並びかは自動的に調整してくれます。

　あと、zenbackを入れてる人は安心して下さい。

　あれはスマフォならスマフォ用に自動的にレイアウトが調整されます。

　欲を言えば

　本当は各種android端末にも対応できるようにした方がいいんでしょうが、僕のところではそこまでは意識してないです。

　androidは端末によって仕様が異なり過ぎてて、企業サイトでも全対応は諦められる場合が多いので、個人ブログなら仕方ないです。

　だいたい今はどこの企業でも、一番横幅が狭い（と思う）iphoneに合わせて、320pxでレイアウトするところが多いですね。

　それだけしておけば、よっぽどマイナー端末じゃない限り、だいたいなんとかなる…はず……

　その他、確認したけど問題なかった人達

　さすがに全ブロガーは確認できなかったので、個人的にぱっと思いついた人達だけ。

　id:watakochan 

　id:kouas1100 

　id:ponako10

　id:sho_yamane

　id:TM2501

　以上の方々はipad・iphone共に正常表示されてました。

　さっすがーっ！

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

HTML+CSSデザイン|基本原則、これだけ。【HTML5 & CSS3対応版】

　というわけで

　本日はなんとなく気分で、

　少しは人様のお役に立てそうな記事を更新してみました。

　たいしたことは出来ていないかもしれませんが、

　レイアウトに悩んでいるどなたかの助けになれば幸いです。

　何かわからないことがある方がいらっしゃいましたら、Twitterでもメールでも何でもお気軽にご相談下さい。

　当方はニートなので、365日対応可能です。

　それでは人助けっぽい告知をして気分も良くなってきたので

　自分へのご褒美として、

　近所の小学校に侵入して女の子の上履きを舐めて来ようと思います。

　いってきます。