はてなブログのレスポンシブテーマに注意！

俺のはてなブログテーマはレスポンシブ対応だからスマホでも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)

レスポンシブWebデザイン「超」実践デザイン集中講義

レスポンシブWebデザイン入門 ~マルチデバイス時代のWebデザイン手法~