はてなブログのレスポンシブテーマに注意!
俺のはてなブログテーマはレスポンシブ対応だからスマホでもPCと同じデザインのまま表示させるぜヒャッハー!レスポンシブ最強!
とか思っていたら全然そんなことはなかった話。
経緯
Googleウェブマスターから「モバイルユーザビリティの問題が検出された」という旨のメールが届く。
そんな馬鹿な。俺のブログはレスポンシブ対応だからスマホで見ても最適化されているはず。
さっそくGoogleデベロッパーツールで確認だ。(⌘+opt+I
で開ける)
最近のデベロッパーツールはPCでもスマホの表示が確認できるのだ。便利な世の中になったものだ。
どれどれ
What's !?
なんてこった。スマホのビューポートが設定されていないかのような現象が起きている。
一体なぜ…。このテーマはスマホ対応のはず。
でも明らかにこの表示はビューポートが設定されていない…。
ビューポートを設定したいけどたしかあれはHTMLのhead
部分で設定するだったはず。
だがはてなブログは特定箇所へのHTMLの挿入はできてもHTMLテンプレートごといぢることはできない。つまりhead内の変更は無理。
クソッタレ!一体どうすりゃいいんだ!
レスポンシブテーマの罠?
途方に暮れかけた瞬間こんなページを見つけた。
スマートフォンで適切に表示されるレスポンシブデザインのテーマは、次の2つの条件を満たすように作成してください。
テーマのCSSの先頭に Responsive: yes という行を含んだコメントを挿入します。
デザインテーマにこのようなコメントが記述されている場合、はてなブログでは下記のようにスマートフォンデバイスに適したviewportをHTMLヘッダーで指定します。
なんだって?
おれはレスポンシブ対応のテーマを適用したはず。
だったらそれで済むんじゃないのか?
CSSを見てみる。
/* <system section="theme" selected="6435922169449207872"> */ @import url("http://hatenablog.com/theme/xxxxxxxxxxxxx.css"); /* </system> */
先頭にはimport
文しかない。
試しにそれの下に先ほどの
/* Responsive: yes */
を追加してみた。
(・o・)
これははてな運営による罠ですか?
ひとまずこれでビューポートの設定ができたようだ。
その他にもスマホで見た時に横スクが発生するようなまづい箇所が複数あったので手直しして事なきを得た。
ウェブマスターツールってすげえや!
スマホで自分のブログなんて見ないしウェブマスターツールから警告のメールが届かなかったらずっと気付かなかった。
ありがとうGoogleウェブマスターツール!
というかはてなブログどうなってんだ!

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)
- 作者: 菊池崇
- 出版社/メーカー: アスキー・メディアワークス
- 発売日: 2013/07/30
- メディア: 大型本
- この商品を含むブログ (1件) を見る

- 作者: 山崎大助
- 出版社/メーカー: ソフトバンククリエイティブ
- 発売日: 2013/03/28
- メディア: 大型本
- この商品を含むブログ (3件) を見る

レスポンシブWebデザイン入門 ~マルチデバイス時代のWebデザイン手法~
- 作者: 小川裕之
- 出版社/メーカー: マイナビ
- 発売日: 2013/03/28
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (4件) を見る