ども。
きしころ(@kagoshimato)です。
僕結構食べることが好きで、超よかったお店だけ紹介してるんですけど、
google mapを埋め込んで場所を紹介してるんですね。
でも、スマホで見ると画面一杯にでてきてスクロールされちゃうからみにくい！
とのお声を頂き解決策を探したので報告です。
ブロガーの皆様、これ超便利なのでgoogle map貼る時はやってください！
下記サイト様を参考にさせてもらいました。
Google Maps iframeでホイールスクロールを無効
スクロール有効のgoogle map
こちら。
どうですか？すらすら読みたいのにmapのところでスクロールされちゃいますよね。
しかも画面一杯にデカイから下に行くの難しいですよね。
結構ストレス。
そんな問題を解決したのがこちら。
スクロール無効のgoogle map
どうですかこの読みやすさ具合。
PCならカーソルをどければいいのですが、スマホだと難しいですよね。
解決策
ものすごく簡単です。
google iframeのスタイルにpointer-events: none;を入れるだけ。
通常のgoogle mapだとこのようになっているのですが。
最初の方に打ち込んじゃいましょう。
スクロール有効
<p><iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3267.23738633031!2d135.7744618152244!3d35.0257907732452!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f1
スクロール無効
<p><iframe style="border: 0; pointer-events: none;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3267.23738633031!2d135.7744618152244!3d35.0257907732452!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f1
はいこれで終了。
すらすら読んでる途中にスクロールされてストレスになることを回避できます。
読者側の視点に立って、それを解決できる事ってすごく面白いなと思う日々です。