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

コンピュータ・IT

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

最近の記事

  1. ルテインサプリメントとヘム鉄サプリメント
  2. 五月山動物園
  3. サーマクールとフォトフェイシャルの美容効果
  4. 内臓脂肪の減らし方
  5. ふくらはぎの痩せ方

おすすめ記事

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

Twitter でフォロー

  1. 住宅ローン審査に通りやすくなる条件は?

    暮らし情報

    住宅ローン審査に通りやすくなる条件やクレカとの関係は?
  2. スーパーの特売日

    暮らし情報

    スーパーの「特売日」がなくなる!?EDLP(毎日安い)って本当にお得なの?
  3. リニアモターカー体験乗車申し込みについて

    イベント・催事

    リニアモーターカーの試乗(2017年)申し込みは6月21日午後11時59分まで
  4. 公認会計士の仕事について

    暮らし情報

    公認会計士ってどんな仕事 ?仕事内容や年収、試験の難易度は?
  5. 仕事探し

    暮らし情報

    長く続けられる仕事・一生働ける会社を探している人へ
PAGE TOP