WordPressで記事投稿する際にGoogleマップを挿入する方法【動画あり】

この記事は約2分で読めます。

こんにちはFPヒデです。
今回は、WordPressで記事投稿する際にGoogleマップを挿入する方法を動画を使ってお伝えしますね。

やり方は非常に簡単ですので、是非必要に応じて利用してみてください。

 

動画で解説するWordPressで記事投稿する際にGoogleマップを挿入する方法

 

Googleマップからコードを入手する

まずはGoogleマップを開き検索窓に、実際にサイトに表示したい地図の住所や施設名を入力して地図を表示させます。
 
googlemap
 

そして右下の『設定』ボタンをクリックします。
googlemap1
 

次に『地図を埋め込む』をクリックしてサイズを指定します。
googlemap2
 

カスタムサイズを選択した場合は、下記画像の様に表示されますのでここでサイズをサイト表示に幅に合わせて指定します。 
そして、表示されているコードをコピーして記事投稿欄にペーストしていきます。
googlemap22
 

WordPressの記事投稿欄にペーストします。
googlemap3
 

プレビューしてみると、下記の様に地図が挿入されているはずです。
googlemap4

以上で設定は完了です^^。

が、タブレットやスマートフォンで見た際に地図画像が飛び出しているようであれば、次のコードを入れてみてください。

 

レスポンシブデザイン用にコードを設定する方法

タブレットやスマートフォンで地図を見る際に画面から飛び出しているような場合は下記のようにコードの記述を追加して先ほどのコードを囲ってあげます。

追記するコードはこちらです↓
<div class=”v-wrap”>~<div>

<div class="v-wrap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6485.580585050801!2d139.880394!3d35.632895999999846!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60187d03114737b3%3A0xe4d93636d509d3cb!2z5p2x5Lqs44OH44Kj44K644OL44O844Op44Oz44OJ!5e0!3m2!1sja!2sjp!4v1411884309061" width="500" height="400" frameborder="0" style="border:0"></iframe></div>

追加して囲ってあげることでスマートフォンやタブレットでご覧になってもはみ出していないはずです。

コメントを残す

サブコンテンツ

このページの先頭へ