ワードプレスでヤフー地図やグーグルマップの入れ方は?スマホ用サイズ変更も!

どうも、Mr.フリーマンです。

 

今回はWordpressで簡単にヤフー地図や

 

グーグルマップ(Google Map)をブログの文中に簡単に挿入する方法や

 

自動的にスマホやパソコン(PC)の画面サイズに地図の大きさを合わせてくれる機能についてもご紹介したいと思います。
下記の地図が実際に挿入したヤフー地図です。

 

グーグルマップの地図はコチラ

 

グーグルマップの方が有名で利用している人も多いけど、昔からヤフー地図を利用してて使いやすいっていう人も結構いるんですよね。

 

グーグルマップの入れ方を紹介しているサイトの中ではワードプレスのプラグインを使用した方法をおすすめしている方が多いようだけど

 

プラグインを使用しなくても挿入は簡単に可能です

 

便利だからといって闇雲にたくさんのプラグインをインストールする人もいるようですが、速度の低下やプラグイン同士が干渉しあってエラーを引き起こす原因にもなるので必要最小限のプラグイン数に抑えることをオススメします。

 

また、どんなプラグインでもアップデートされなかったり

 

WordPressのアップデートで互換性が無くなる可能性があるので

 

手動で挿入できるのであればプラグインは使用しなことをオススメします。

関連:ワードプレス用語集まとめ!初心者必須わかりやすいアドセンスブログ作成術も!

 

ヤフー地図の入れ方

 

ここでは東京スカイツリーのマップを文中に挿入する手順をご紹介していきます。

 

①ヤフー地図を開く

 

②画面左上のボックスに『東京スカイツリー』と入力し検索ボタンをクリック

yahoo map

クリックで拡大

 

 

③画面右上の『URL』ボタンをクリック

yahoo map2

クリックで拡大

 

④表示された地図コードをコピー
yahoo map3

 

⑤地図を挿入したいワードプレスの記事を開く

 

⑥画面右上の『テキスト』をクリック
text

 

 

⑦挿入したい場所に先ほどコピーした地図コードを貼り付ける
yahoo map4

以上でマップの挿入は完了です。

 

テキスト画面からビジュアル画面に変更しても地図は表示されてませんが、プレビューで確認すると表示されます。

 

ヤフー地図で検索する場合は住所や建物など、ビルの名前でも検索可能です。

関連:リンク先を別のページで開いて滞在時間をアップさせるプラグインは?

 

ヤフー地図をスマホやPCのサイズに併せてサイズ変更

 

ヤフー地図はスマホやパソコンなど見ている人の画面に自動でサイズを合わせてくれる便利な機能があります。

 

ヤフーの地図は下記4つのサイズから選択可能です。

 
 

変更方法は地図コードが表示された画面で『地図のカスタマイズとレビュー』をクリック。
yahoo map5

 

 

自由設定をクリックし『横幅自動調節(はりつけ先のページの横幅にあわせた地図を表示)』に☑を入れる。

yahoo map6

クリックで拡大

 

※地図の形式欄で自動検出を選択すると、スマートフォンとパソコンでそれぞれ最適化された地図が表示されます。

 

サイズを変更後、画面の一番下に記載されている地図コードをコピーして記事本文に貼り付ければ完了です。

yahoo map7

関連:ワードプレス写真画像を拡大する無料プラグインWP-Slimbox2設定方法

 

グーグルマップの入れ方

 

ここでも東京スカイツリーのマップを文中に挿入する手順をご紹介していきます。

 

①グーグルマップを開く

 

②画面左上の検索ボックスに『東京スカイツリー』と入力しエンターを押す
google map

 

 

③『SHARE』ボタンをクリック
google map2

 

 

④『Embeded Map』をクリック
google map3

 

 

⑤赤枠内にある地図コードをコピーする

google map7

 

 

 

⑥地図を挿入したいワードプレスの記事を開く

 

⑦画面右上の『テキスト』をクリック
text

 

 

⑧地図を挿入したい場所にコピーした地図コードを貼り付ける
google map8

以上でグーグルマップの挿入は完了です。

 

ヤフー地図で検索する場合と同様、住所や建物の名前でも検索可能です。

 

グーグルマップの良い点は文字を入力する『ビジュアル』モードにしても地図が表示されるところです。

関連:Adsense ManagerとQuick Adsenseの違いは?おすすめはどっち?

 

グーグルマップ地図サイズの変更方法

 

Google Mapのサイズを大きいサイズや小さいサイズに変更したい場合は『Embeded Map』をクリックした後の画面左にサイズを選ぶ項目があります。

 

google map4

 

  • Small (400x300)
  • Medium (600×450)
  • Large   (800×600)
  • Custom Size (任意でサイズ変更)

 

Custom Sizeを選択すると下記画像のようにサイズを入力する画面が出てきます。

 

google map9

 

希望のサイズを入力してカーソルを地図コードに移動しコピーするだけでOKです。

 

表示することができないサイズを入力するとInvalid Inputという文字が表示されます。

 

google map10

 

いかがでしたでしょうか。

 

ヤフー地図とグーグルマップそれぞれ長所と短所がありますが、ご自身のブログスタイルに合った地図をご利用されるのが1番かと思います。

 

その他もしアドセンスブログを運営する上でどんなプラグインが必要なのかお悩みの場合下記リンクをご参照ください。

 

分かりやすいよう1つのページにまとめています。

 

その他ご意見ご感想などございましたらページ下にあるコメント欄からご連絡ください。

 

本日は最後までお読みいただきありがとうございました。

関連:ワードプレスのサイドバーが動かない!スクロール追尾してくれるプラグインは?