google mapのスクロールを無効化してスマホでも超読みやすくする方法

スポンサーリンク

ども。

きしころ(@kagoshimato)です。

僕結構食べることが好きで、超よかったお店だけ紹介してるんですけど、

google mapを埋め込んで場所を紹介してるんですね。

でも、スマホで見ると画面一杯にでてきてスクロールされちゃうからみにくい!

とのお声を頂き解決策を探したので報告です。

ブロガーの皆様、これ超便利なのでgoogle map貼る時はやってください!

下記サイト様を参考にさせてもらいました。

Google Maps iframeでホイールスクロールを無効

スクロール有効のgoogle map

こちら。

どうですか?すらすら読みたいのにmapのところでスクロールされちゃいますよね。

しかも画面一杯にデカイから下に行くの難しいですよね。

結構ストレス。

そんな問題を解決したのがこちら。

スクロール無効のgoogle map

どうですかこの読みやすさ具合。

PCならカーソルをどければいいのですが、スマホだと難しいですよね。

解決策

ものすごく簡単です。

google iframeのスタイルにpointer-events: none;を入れるだけ。

通常のgoogle mapだとこのようになっているのですが。

f:id:kishikoro:20160905103843p:plain

最初の方に打ち込んじゃいましょう。

f:id:kishikoro:20160905104016p:plain
スクロール有効

<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

はいこれで終了。

すらすら読んでる途中にスクロールされてストレスになることを回避できます。

読者側の視点に立って、それを解決できる事ってすごく面白いなと思う日々です。

2 件のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)