ときまき!

謎の創作集団による、狂気と混沌の執筆バトル。

はてなの『ヘッダー』を消すと一部Androidブラウザでブログがスクロールできなくなる問題について

 スマホ版はてなブログの、上部に表示されるヘッダー。

 はてなブログProのユーザーであれば、cssを追記して、display:none;で消すことができる。あるいは、レスポンシブ対応のテーマを使えば、『設定』→『ヘッダとフッタ』から、非表示にすることができる。

 このようにしてヘッダーを消した場合に、ごく一部で起こりうるバグについて紹介する。

Androidブラウザ2.3系だと、ブログがスクロール不能になる

 Androidのスマートフォンには『ブラウザ』という名前のブラウザアプリが標準装備されている。なかでも2011年頃に普及したAndroid version2.3系のブラウザはいろいろと不具合が多く、多くのWebデザイナーが泣かされた。

(例えば『ページトップへ戻る』のアンカーリンクが無効化されたり)

 なかでも隠しコマンド的なバグとして恐れられたのが『iframe要素をdisplay: noneすると、スクロール不能になる』というもの。ページがスクロールできなくなるので、実質的にその端末ではコンテンツが読めなくなる。致命的だ。

 お気づきのとおり、はてなブログのグローバルヘッダーはインラインフレーム(iframe)である。ゆえにヘッダーを消すと、ごく一部のAndroid端末では不具合が生じる。

 実機(NEC N-06C MEDIAS WP N-06C for DoCoMo/Androidブラウザver 2.3.3)で確認してみたところ『ヘッダーを消しているはてなブログ』の30のうち6ブログは、当機ではスクロールができずに記事が読めなかった。

 じつは昨日、ブログ開設一周年記念にブログデザインを変えたのだが、このときに発覚したのがこの問題。原因を突き止めるのに休日を6時間も消費してしまった。悔しい。

対処法はあるの?

 css追記での対処は難しいと考えられる。

 bodyの「overflow:hidden」を「scroll」で上書きして、#wrapperで再び「hidden」かけるとか……したら行けるのかもしれないが、すごくモヤモヤする。

 あるいは、display:none以外の方法でヘッダーを消してみるとか。

 position:absolute; bottom:-999999;のたぐいの禁術を使って、『ヒャッッハーーーー!!! ヘッダーもろとも宇宙の果てまでぶっ飛ばしてやるぜーーーーーー!!!!』みたいな。いや、これはオススメしない。それこそどんな不具合が起こるか分からないし、SEOでペナルティを受ける可能性がある。

対処法1.ブログのデザインテーマを変える

 スマホ版ヘッダーを非表示にしているはてなブログでも、30のうち24は問題なくスクロールできた。つまり多くのブログでは、ヘッダーを消しても大丈夫ということ。ごく少数の「デザインテーマcss」と「ヘッダー非表示css」が融合し、そこへさらに希少種である「Android 2.3.x」が加わってこの奇跡的なバグは発生するらしい。

対処法2.ヘッダーを消すのをあきらめる

 途中で考えるのが面倒になって、このブログでは結局ヘッダーを消すのはあきらめた。はてなユーザーであれば、むしろヘッダーがあった方が何かと便利なので(すぐに記事を投稿できたり、購読中のブログを確認できたり)まぁいっか☆と思った。

 ヘッダーの『追尾機能*1』は画面が狭くなるのが嫌だったので、css追記でオフにした。

 具体的には「#globalheader-container {position: fixed;}」を {position: relative;}で上書きする。absoluteでも可。使用テーマによってはセレクタの指定方法が変わってくる。

 Proではヘッダーを消すのがOKなくらいなので、追尾機能を消しても怒られることはないだろう。(公式テーマでも追尾しないタイプのがあるし)とにかくこれで、スクロールしてもヘッダーがついて来ない。バグも起こらない。

対処法3.対処しない

 おそらくこれが一番良いだろうと思う。今回の事例ははっきり言って、超レアケースである。Androidブラウザver2.3.3は、未来には完全に消えゆく運命だ。2015年でver 5.1まで更新されているので、わざわざこんな古いブラウザでネットを見るユーザーは少ない。今ならSafariだってChromeだってOperaだってスマホで使える。

 対処しなかったところで、SEO(モバイルフレンドリー)への影響は皆無であり、Adsense等の収益への影響もほぼ無いと断言できる。

 つまりは、気にしないのが一番ではないかと。

おわりに

 ここまで引っ張っておいて、こんな結論になってしまってなんだか申し訳ない。個人的にはけっこう悩んでいた問題で、こと「はてなヘッダー問題」に関してはググってもまったく情報が出てこなかったので、もしかしたら自分と同じような人が検索してきたときの助けになればと、記事を書いた。以上、お役に立てれば幸いである。

 

(おわり)

*1:ページをスクロールしてもヘッダーが上部固定されたままついて来るデザインで、現代ではお洒落だとされている。ツイッターなどが有名


Copyright (C) 2014-2019 五条ダン All Rights Reserved.