【WordPressブログ】記事内にGoogleMapを挿入する方法【初心者】

  • 2019年5月19日
  • 2019年5月21日
  • Blog
  • 276view
  • 自分の記事内にGoogleマップを挿入したい
  • CSSとかHTMLとかよくわからない
  • プラグインとか使いたくない

こういった方の気持ちにお答えします。

WordPressブログの記事内に、Googleマップを挿入するのは非常に簡単です。
HTMLをコピーして、それを貼り付けるだけで適用することができます。

ほぼほぼコピペするだけでOKですので、プログラミングとか、コードに関して抵抗ある方でも簡単に挿入することが可能ですよ。

注意事項も一緒に紹介します

Google マップを自分のサイトに表示するときには、注意すべきポイントがあります。
そちらも、記事の最後で一緒に解説していきます。

スポンサーリンク

ブログ記事内にGoogleMapを挿入する方法

流れをざっと説明すると

  • 自分の表示したい場所をGoogleマップで開く
  • 埋め込み用のコードを表示
  • 表示したコードをコピー
  • 自分のブログの挿入したいポイントに貼り付け

上記のような流れになります。
途中コードが出てくるので、不安に思う方もおられるかもですが、それをコピーするだけでOKですので、心配いりません。

表示したい場所を開く

まずは、GoogleMapを開いて、自分がブログで表示させたい場所を検索します。
今回は、「羽田空港」を検索します。

埋め込み用のコードを表示

検索をかけ、表示したい場所のマップを開くことができたら、1番右端の「共有」ボタンを選択します。

すると、下記の画像のような共有に関する方法が二つ表示されます。

そこにある「地図を埋め込む」を選択します。

すると、この地図を記事内で表示させるためのHTMLのコードが表示されます。
これをブログに貼り付けることで、記事内で地図を表示することができるのです。

右端にある「HTMLをコピー」をクリックします。

 

1クリックするだけでOKです

「HTMLをコピー」というボタンを、1クリックするだけで勝手にコピーされます。
なんども押す必要もないですし、真ん中の黒文字で表示されているHTMLのコードをドラッグしながら選択してコピーする必要もありません。

ブログの貼りたい場所に貼り付け

HTMLのコードをコピーできたので、今度はそれを貼り付けます。

投稿したい記事を開いて、「テキスト」ボタンを押し、テキストモードへ切り替えます。

テキストモードを開いて、自分が表示したいポイントに、先ほどコピーしたHTMLのコードを貼り付けます。以下画像のようになるはずです。

これで、記事を公開または更新ボタンを押して、内容を反映させると、以下のような地図が表示されます。

これで挿入の仕方は以上になります。
コピペで挿入することができるので、比較的簡単に挿入するできることがお分かりいただけたかと思います!

GoogleMap使用の注意事項

GoogleMapで表示される地図を、スクショして、自分のブログの記事や固定ページへ貼り付けることは禁止されています。

Google利用規約

スクショ画像を貼り付けると規約違反になるので、ブログ継続に影響が出ることも考えられます。

今回紹介した正しい挿入方法を使って、記事作成をもっといいものにしていきましょう。

Twitterアカウント始動

降り頻るNews・情報の雨 良くも悪くも明日は我が身!我が身を守るもまた我自身。
『貴方は傘をお持ちですか?』

いま、はじめよう。

最新情報をチェックしよう!