Googleマップをブログに貼る方法と地図がはみ出さないための対処法を紹介します!

よめ
こんにちは!新米夫婦のよめちゃんです(@ponN0216

WordPressで御朱印巡りの記事を書いた後、神社のアクセスのところにGoogleマップを貼りたいなとなりました!

他の方のブログでGoogleマップが貼ってあるのを見てきましたが

いざ、自分が貼ろうと思ってもやり方を知らないことに気が付きました(;´・ω・)

 

この記事では、Googleマップを貼る方法を紹介します!また、携帯画面からはみ出してしまったときの対処法もお伝えします!

Googleマップをブログに貼りたい!

アクセスのところに大体みんな貼っているGoogleマップ!簡単に貼ることができます!

例えば記事を書いたことがある「変なホテル 京都」でやってみます。

 

①Googleマップを張りたい場所で検索

②すべてで検索されているので隣の地図をクリック

Googleマップを貼る方法1

③共有をクリック

Googleマップを貼る方法2

④地図を埋め込むをクリック

Googleマップを貼る方法3

⑤HTMLをコピーをクリック

Googleマップを貼る方法4

ブログの編集画面に戻ってきてビジュアルからテキストに

⑥テキストに先ほどコピーしたものをペーストする

Googleマップを貼る方法5

⑦ビジュアルに戻るとGoogleマップが貼れているのを確認できます。

 

地図を埋め込む際に、小・中・大・カスタムというように大きさが選べます。

通常、HTMLをコピーするときは自動で中になっています。ちなみに大きさは以下の通りです。

小(width=”400″ height=”300″)

中( width=”600″ height=”450″)

大(width=”800″ height=”600″)

変更なしで中のままでいいと思います。

 

Googleマップを貼れるようになって喜んでいましたが・・・

Googleマップが大きすぎて画面からはみ出している!

パソコン上で見るとちゃんと表示されていますが、携帯でふと見てみることがあって見てみるとマップがはみ出していました。

Googleマップを貼る方法7

サイトをスクロールするにあたって下だけでなく左右も動いてしまいます。

これはスマホユーザー的に邪魔くさくてしょうがないです。

Googleマップを貼る方法6

Googleマップを貼るときに画像サイズを横100%、縦はお好みでそのままでもお好きな風にすると画面をはみ出さなくなります。

 

height=”300″が個人的に好き

 

ブログを始めたばっかりの方は、携帯で自分の記事がどう表示されているかチェックしたほうが良いと思います。

Googleマップの横幅を100%とにしたつもりが1000%になっていたりしたことがありました(笑)

上手く貼れていないとサマリー内のモバイルユーザビリティで「テキストが小さすぎて読めません」というエラーが出てきます。

 

まとめ

Googleマップを貼る方法とはみ出す場合の対処法について書いてきました!

ポイントはGoogleマップを貼る時、リンクを送信ではなく地図を埋め込むを選択するところです。

また、ブログのビジュアルではなくテキストに貼るところです。

 

モバイルユーザビリティで「テキストが小さすぎて読めません」というエラーが出た場合、

Googleマップが大きすぎてはみ出している場合があります。

元々貼り付ける時に横を100%にするとはみ出さず貼ることができます!

 

Googleマップ内のマイプレイスの機能について説明しています。よかったら見ていってください!

関連記事

よめ こんにちは!新米夫婦のよめちゃんです(@ponN0216) Googleマップの中にマイプレイス作成機能があります! 地図上に複数ピンを指すことができて、ピンをクリックすると個別に詳細が出てくるというものです。 […]

Googleマップでマイプレイスを作る方法

 

ブログを書き始めたときから知っておきたかったことをまとめました!

関連記事

こんにちは!新米夫婦のふたりごとの嫁です(`・ω・´)ゞ(@ponN0216) wordpressで雑記ブログを書き始め、夫婦合わせて200記事目に到達しました!! [sitecard subtitle=関連記事 url=htt[…]

WordPress初心者向け講座
Googleマップを貼る方法
最新情報をチェックしよう!