コンピュータ・IT

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

更新日:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でTwitterをフォローしよう!

-コンピュータ・IT
-

Copyright© 前向き情報ブログ , 2019 All Rights Reserved Powered by AFFINGER5.