読者です 読者をやめる 読者になる 読者になる

ポジティブ心理学研究所

幸福度(EQ)アップの研究所です。ポジティブ心理学に出会う前の古い記事はネガティブなので注意。

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

はてなブログカスタマイズ インターネット ツッコミ プログラミング

f:id:lettuce0831:20150129001201p:plain

俺のはてなブログテーマはレスポンシブ対応だからスマホでもPCと同じデザインのまま表示させるぜヒャッハー!レスポンシブ最強!

とか思っていたら全然そんなことはなかった話。

経緯

Googleウェブマスターから「モバイルユーザビリティの問題が検出された」という旨のメールが届く。

そんな馬鹿な。俺のブログはレスポンシブ対応だからスマホで見ても最適化されているはず。

さっそくGoogleデベロッパーツールで確認だ。(⌘+opt+Iで開ける)

最近のデベロッパーツールはPCでもスマホの表示が確認できるのだ。便利な世の中になったものだ。

どれどれ

f:id:lettuce0831:20150129001536p:plain

What's !?

なんてこった。スマホのビューポートが設定されていないかのような現象が起きている。
一体なぜ…。このテーマはスマホ対応のはず。

f:id:lettuce0831:20150129002037p:plain

でも明らかにこの表示はビューポートが設定されていない…。

ビューポートを設定したいけどたしかあれは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
*/

を追加してみた。

f:id:lettuce0831:20150129002628p:plain

(・o・)

これははてな運営による罠ですか?

ひとまずこれでビューポートの設定ができたようだ。

その他にもスマホで見た時に横スクが発生するようなまづい箇所が複数あったので手直しして事なきを得た。

ウェブマスターツールってすげえや!

f:id:lettuce0831:20150129002951p:plain

スマホで自分のブログなんて見ないしウェブマスターツールから警告のメールが届かなかったらずっと気付かなかった。
ありがとうGoogleウェブマスターツール!

というかはてなブログどうなってんだ!

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)

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

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

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

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