はてなブログのレスポンシブデザインがレイアウト崩れしてた話
自分用のメモ。
なんか昨日、僕のもってるはてなブログが全てにおいて、
「レスポンシブデザインが正常に稼動せず、スマフォでみると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">と記述を追加してください。
すると直ります。
おしまい!
リアル攻殻機動隊!光学迷彩を実現した稲見昌彦教授の「再帰性反射材マント」がすごい!
え、ちょ、今たまたまFeedlyで新着ニュース見てたら光学迷彩があったんだけど何これ?
まとうだけで姿を消すことができる、透明マント。
子どもなら、特に男子なら一度は憧れたことがあるはずです。理由は、まぁ、いろいろです。
悲しいかな、多少の知恵をつけると「まぁそんなものできるわけないよね」なんて気づいてしまいます。しかし、大人になってもそれを諦めなかった人たちがいるんですよ。しかも、近所の空き地で「俺は未来から来た」とか言ってるオジサンではなく、あの最高学府、東京大学にですよ!
この「光学迷彩」という技術を研究・開発しているのが、東京大学先端科学技術研究センターの稲見昌彦教授。入射した光を散らすことなく、まっすぐに戻す「再帰性反射材」という素材を用いているのだそう。
実際の原理ですが、コートには背景と同じ映像が投射されており、ハーフミラー(マジックミラーはハーフミラーの一種)という特殊な鏡越しで見ることで、背景に溶け込んで見える、とのことです。
あの頃僕らが夢見た「透明マント」が着々と近づいているんですね。
ほあああーー!!!!!
まじで光学迷彩だ!!!
まじで透明マントだ!!ドラえもんだ!SFだ!!!22世紀からやってきた!!!!
なにこれ!!!
すごいーーーーーーー!!!!!
あまりに驚いたので教授名でググってみたらこんな記事もありました。
インタフェース技術とコンピュータグラフィックスの国際会議「SIGGRAPH」に出展した際は、ひと目デモを見ようと小さな装置の前に行列ができたという。胸から下が透明。そんな「透明人間」が、装置を覗くと突然、目の前に現れるのだ。取材でも、デモを見せてもらった。3mほど先に、グレーの色のマントを着た学生がいる。一見すると、何の変哲もない光景。しかし、ひと度「光学迷彩」のシステムが入った装置から同じ光景を覗くと驚くべきものが目の前に広がった。胸から下が「透けて」いるのだ。実際には、マントの部分が「透けて」見える。もちろん、人がいきなり透けてしまうはずはない。ここには「カラクリ」がある。稲見氏が開発した、再帰性反射材を使った「再帰性投影技術」だ。研究テーマは、情報世界と現実世界をいかに融合させるか。新進気鋭の34歳の大学教授によるユニークなアイデアは、国内外のコンピュータ関係者から熱い注目を浴びている。
これが2015年10月の記事!!!
うおお!
ちなみに冒頭に紹介したギズモードの記事によれば、この素晴らしくSF脳な教授は次に「分身の術を作りたい」とおっしゃられているようです。笑
「次は「分身の術」を作りたい」という、いい意味で奇天烈な稲見教授
かっこよすぎやろ!
先日、戦闘ロボに関する記事も書きましたが、技術の進歩はすごいな。