はてなブログのレスポンシブデザインがレイアウト崩れしてた話
自分用のメモ。
なんか昨日、僕のもってるはてなブログが全てにおいて、
「レスポンシブデザインが正常に稼動せず、スマフォでみるとPC版を縮小表示したようなレイアウトになる」
という現象が発生していました。
あれれ、はてなブログのレスポンシブデザインの設定がなんかおかしくなってない？
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
昔はちゃんとスマフォごとに合わせた横幅になってたのに、今見たら全サイトこんな感じなんだけど。なにこれ。 pic.twitter.com/JSFzbt8tw6
PC表示をそのまま縮小したような表示になってる
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
自分でHTML手打ちで作った別のサイトはちゃんと正常に表示されているので、おそらくiPhone側やブラウザ側の問題ではない。
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
アプリとサファリとグーグルクロームで表示確認したけど、どれも同じ現象。
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
ってことはやっぱはてなブログ側だよな。
試しに暇つぶしブログだけ、デザインテーマを変更してみた。だけど変わらず。
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
ということは、使用中テーマ単一の不具合ではない。
他のブログはどうなってるんだろう。
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
そっちが正常表示されてるなら、俺のブログだけの問題ってことになるんだけど。
いまやぎろぐと宮森ブログみたけど、どちらもレスポンシブデザイン使ってないっぽい。
誰かいないかな
レスポンシブデザイン使ってる人
あ、ひとで祭りがレスポンシブぽい。
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
そしてこちらは正常に表示されてる。
てことは俺のところだけの不具合だな。
こちらでも確認できました！ほんとだありがとうございます！
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
他のはてなブログは正常表示されている。
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
しかし私のはてなブログだけ正常表示されていない。
なんだ。トリガーはどこだ。
同じ現象がおきているのは
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
タロットブログ
タロットブック
ひまつぶしブログ
ファンクラブ
共通項がみえねえ笑
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
あちこちのコードを削除しては表示テストを繰り返してるんだけど、どこのコードを削除しても挙動が何もかわらん。
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
えええええ！！！！そんなばかな！！こっちでは先月くらいにちゃんと表示されてるのを確認できてるんだけど。。。環境なに？
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
とりあえず原因はわかった。
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
max-widthの指定がなぜか消えてる。
かわりに600px指定になってる。
しかしなぜ消えている。デザインテーマの作者が何か間違えたのかな？あれ、でもそれって自動で反映されるのか？
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
仕様がいまいちわからんな。
あれだ。へッダー側で、スマフォだったらこのCSSを呼び出してねの記述が消えてるんだな。
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
おお、それ以外の作るだけ作って放置中のブログも全てレスポンシブじゃなくなっている。
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
ヘッダーに
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
<meta name="viewport" content="width=device-width">
を追加したらなおった。
ヘッダーなんていじった覚えないんだけどな。忘れてるだけでどっかでやったのだろうか。
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
いや保有ブログの全てでわざわざヘッダーの記述を削除するのは可能性としてありえないな。
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
やはり公式側でなにか設定変更があったのかな？
びゅーぽーとの設定を公式側で削除しちゃたのかな？
— 中川龍@タロット占い師、占いで独立開業する通信講座 (@dshocker) 2016年6月1日
まぁいっか！なおったし！
結論、なぜか僕の保有しているはてなブログ全てにおいて、ヘッダー内に本来記述されているべきビューポート記述が消えちゃってたみたいですね。
なんでなんだろう。
理由はようわかりません。
僕のブログは、だいたい全部以下三つどれかのデザインテーマを使用しています。
とりあえず解決したのでいいんですが、同じ現象で困ってる人がいたら、
はてなブログの設定から
- 詳細設定
- headに要素を追加
と進んで、そこに <meta name="viewport" content="width=device-width">と記述を追加してください。
すると直ります。
おしまい！
