WordPress

【一番簡単】グーグルマップをレスポンシブにしてスマホでも崩れないようにする最強の方法はWordPressのプラグイン!

いつもパソコンで作業するのでスマホ表示を見ていない時があります。ちょいちょいあるのが、パソコンなら完璧なのにスマホで見ると表示が崩れてるってやつ。

YouTubeの埋め込み、グーグルマップの埋め込み等、幅が自動的に切り替わらないからこれは起きます。

CSSを駆使すれば問題なくいい感じに出来るようで、ちょっと知識がある人からすればそんなに難しいことではなさそうなのですが、どうもとっつきにくいので色々調べました。

CSSを使えばコピペでGoogleMapをレスポンシブに出来る!

【コピペOK】GoogleMapの地図をレスポンシブサイトに埋め込む方法

こちらの通り、iframeの間にurl入れてCSS設定すれば行けるようです。確かに簡単っぽい。僕が使っているテーマでは記事ごとにCSSを入れられるのでこちらでも可能だと思いました。

しかし、いちいちメモ開いてコピペしてという作業がちょっとめんどいので違う方法を探しました。

見つけた!やりたかったのはこれ!WordPressプラグイン

レスポンシブ対応グーグルマップのプラグイン

もう、これだ!と思いましたね。いいプラグインないかなぁ。。って思って探してたんですが、検索ワード変えたら発見出来ました!

WordPressのプラグインを入れて、簡単なタグで入力するやつです。タグは超シンプルなので覚える事が出来ました。

Simple Map – 超簡単&スマフォ対応のGoogle Map – Firegoby

詳しい使い方はこちらですね。これめちゃくちゃいいっす!

今までわざわざGoogleでお店調べてGoogleMap開いて埋め込みコードコピペして、しかも表示が崩れるという散々な感じだったんですが、これを使えば住所わかればもうタグに入れるだけです。最高。

Simple Map 0.6.0 – oEmbedに対応しましたー。 – Firegoby

oEmbedにも対応しているようです。素敵。

Simple Map

ダウンロードはこちらから。もしくは、WordPressの管理ページからプラグインの新規追加でもいけます。

番外編!GoogleMapの素敵なデザインのプラグイン「TCD Google Maps」

豊富なデザインのGoogleMapが簡単に使えるWordPressプラグイン「TCD Google Maps」

ちょっと調べていた時に、残念ながら現段階ではレスポンシブに対応していないのですがたくさんのデザインから選べるものを発見しました。

オシャレなサイトにはオシャレなデザインで入れたいですもんね。

これレスポンシブに対応したら最高です。今の時代、スマホから見る人は本当に多いので表示崩れは無視出来ないんですよね。

かつや 福山手城店の口コミ。美味しいとんかつが安い!豚汁が嬉しい!

ちなみにこのサイト作ってる時にGoogleMapの使い方に戸惑って調べたわけです。過去記事全部表示崩れてるから地獄です。笑

というわけで、GoogleMapをレスポンシブにする知ってる中で一番簡単な方法でした。

関連記事

  1. WordPress

    【503エラー解決】503 Service Unavailableをこれで解決した!

    先日、いきなり503 Service Unavailableという表示…

  2. WordPress

    WordPressに必要なあらゆる機能を詰め込んだプラグイン「JetPack」

    WordPressを使っている人なら、ジェットパックを使っている人も多…

  3. WordPress

    かなり高度で詳細な検索が出来るようになるWordPressプラグイン「Search & F…

    ローカル情報サイトを運営しています。詳細に快適に記事を検索してもらいた…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

  1. WordPress

    【一番簡単】グーグルマップをレスポンシブにしてスマホでも崩れないようにする最強の…
  2. Amazon

    WordPressにAmazonアソシエイトのリンクをブログカードのように美しく…
  3. WordPress

    WordPressのアイキャッチを自動生成したいと思った!商用利用可能な写真やイ…
  4. WordPress

    WordPressにリンクをキレイに埋め込みたい!1クリックで埋め込みURLを作…
  5. CAMPFIREレンディング

    CAMPFIREレンディングはクラウドファンディングでの結果を信用に変えて融資を…
PAGE TOP