ヤフー地図のレスポンシブ化の方法

コンピュータ・IT

ヤフー地図をレスポンシブ対応にしてワードプレスの記事に表示する方法

ワードプレスに記事を投稿する際、ヤフー地図を記事に埋め込んで投稿することがあると思います。

記事に地図があると、行きたい場所が地図で確認できて便利ですね。

ヤフー地図を記事に埋め込むには、表示されたタグをワードプレス記事投稿画面でテキストモードにして貼り付けるだけです。

が、そのままだとスマホやタブレットで見た時に、地図が記事の横幅からはみ出して表示されてしまう場合があります。

ヤフー地図のレスポンシブ化といいますか、パソコンから見た時とスマホから見た時に、自動で最適の大きさの地図を表示させることができます。

新たなプラグイン等を使わなくても、ヤフー地図のタグを取得する際の設定を変えればできますので、その手順をご紹介します。

まずヤフー地図の画面で表示させたい場所を検索して、地図上に表示させます。

例として大阪駅をヤフー地図に表示させます。

※画像はクリックで大きくなります。

ヤフー地図レスポンシブ化の手順1

右上の「URL」をクリックします。

新たなウィンドウが表示されますので、「地図のカスタマイズとプレビュー」をクリックします。

ヤフー地図のレスポンシブ化の手順2

記事の大きさは「自由設定」にチェックを入れます。

「横幅自動調節(はりつけ先のページの横幅にあわせた地図を表示)」 にもチェックを入れます。

地図の形式は「自動検出」にチェックを入れます。

ヤフー地図のレスポンシブ化の手順3

すぐ下に「地図のプレビュー」が表示されますので、さらにその下に表示されているタグを全てコピーします。

この時、地図のプレビューを変更しないように注意しましょう。

地図を動かすとタグが変わってしまい、ブログ上で思った通りに表示されない可能性があります。

ヤフー地図のレスポンシブ化の手順4

ワードプレスの投稿画面で、テキストモードにします。

地図を挿入したい箇所にカーソルを持っていき、先ほどコピーしたタグを貼り付けます。

タグを貼り付けるには、ctrl + v でタグがコピーベーストされると思います。

ビジュアルモードにしても地図は表示されませんが、プレビュー画面で見るとちゃんと地図が表示されていると思います。

以下が挿入した地図です。

パソコンとスマホそれぞれで投稿結果を見てみると、地図がレスポンシブ化されているはずですので、パソコンとスマホそれぞれ最適化されたサイズで地図が表示されます。

最近はスマホでウェブサイトを見る人も多いので、記事に挿入する地図もレスポンシブ化しておくことをおすすめします。

スポンサーリンク

最近の記事

  1. 東香里水春
  2. ハルカス展望台の3Dマッピング
  3. 鼻の毛穴の開き解消法
  4. ビオチンの美肌効果がスゴイ!
  5. 40代の転職成功のポイント

おすすめ記事

  1. トヨタディーラーで初回車検に払った費用明細や値引きについて
  2. 京セラ404KCに適合するSDカードと差し替え方法やデータ移…
  3. 妙見の森へ子供と一緒にお出かけしよう!便利な駐車場やトイレ、…
  4. 箕面の滝は子供とのハイキングにおすすめ!アクセスや駐車場につ…
  5. 仁徳天皇陵を始めとする百舌鳥古墳群の見学時間や料金、アクセス…
スポンサーリンク

Twitter でフォロー

  1. ワンダーランドのネタバレ

    エンターテーメント

    ワンダーランド(漫画)1・2・3巻のネタバレと感想
  2. 堀田秀吾さんについて

    エンターテーメント

    明治大学教授の堀田秀吾さんは結婚してる?本の評判や年齢年収も調査!
  3. 子供

    睡眠時間の確保が大切
  4. Windows10 IMEパッドの使い方

    コンピュータ・IT

    Windows10 IMEパッド・単語の登録をもっと活用して文字入力を極めよう!…
  5. カーフィルムを自分で貼るコツ

    自動車

    カーフィルムを失敗せずに自分で上手に貼る方法~失敗しない貼り方は?
PAGE TOP