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

コンピュータ・IT

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

最新情報をお届けします

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

スポンサーリンク

最近の記事

  1. インナードライ肌の原因と対策
  2. 大阪北部地震震度6
  3. 東香里水春
  4. ハルカス展望台の3Dマッピング
  5. 鼻の毛穴の開き解消法

おすすめ記事

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

Twitter でフォロー

  1. 西淀川図書館の休館日

    暮らし情報

    西淀川図書館利用案内 休館日はいつ?図書の予約はできる?自習室はある?など
  2. 関西いちご狩りおすすめスポット

    家族でお出かけ

    いちご狩りへ家族でいくならココ!in 関西 2017
  3. 池田城跡公園のゆり開花状況

    家族でお出かけ

    池田城跡公園の白ゆり開花状況は”見ごろ”(6月20日)駐車場や公園内の様子につい…
  4. 小宮信夫の学歴や年収について

    エンターテーメント

    小宮信夫(社会・犯罪学者)の学歴や年収をチェック!嫁や子供は?
  5. 眼精疲労を治す方法

    美容と健康

    疲れ目より深刻!?眼精疲労による肩こり・頭痛を和らげる超簡単マッサージ法
PAGE TOP