Word Press(ワードプレス)の記事にプラグインなしでGoogleマップを載せるには。【2018年9月現在】

2018年9月14日日進月歩Word Press(ワードプレス), そうだったのか!

読了時間: 約312

ブログ開設準備から数えると、5ヶ月近くになりました。
まだまだ良質な記事を量産せねばならないところですが、
同時に、Googleアドセンスや、Googleアナリティクスの勉強も始めています。

まだ、学び始めたばかりなので、アドセンスやアナリティクスに関してのまとまった記事は書けないでいますが、
学んでいると、アイディアが浮かんだり、やりたいことが出てきたりします。

行動するうちに、いろいろと知りたいことが出てくるので、「こういうことをするには、どうしたらいいのか。」というのを書いてみようと思いました。

今回は、
Word Press(ワードプレス)の記事に、プラグインなしでGoogleマップを載せる方法」を書いてみようと思います。

そのうち、福岡のお好み焼きレポートを書きたい。

広島のお好み焼きは、本場広島なら、探すのに苦労しませんが、福岡だと結構困ります。

というのも、ひとくちに「広島焼き」とか、「広島のお好み焼き」とかいいますが、
地域によって、バリエーションがありますし、
実は、焼き方にもバリエーションがあるんですよね。

どんなお好み焼きを食べて育ってきたか。で、それぞれに好みやこだわりが出てくるものなので、
ネットでここがおいしい!とあっても、期待はずれだったりすることもあります。

ひとまず、私の中で「ここはおいしい!福岡なら、一番じゃと思う。」というお好み焼き屋さんがあるので、
そこのことをいずれ書きたいなと思っています。

そのためには、Word Press(ワードプレス)の記事に、地図が埋められるようになるといいなぁ。と思ったので、
まずは、そのやり方をまとめてみます。

2018年9月現在のやり方です。

Googleマップで「東京タワー」を検索。

今回は、「東京タワー」の地図を記事に埋めてみます。

まず、Googleマップで、「東京タワー」を検索します。

すると、以下のような画面になりますので、
左側にある「共有」のアイコンをクリックします。

「共有」ウィンドウの「地図を埋め込む」をクリック。

「共有」アイコンをクリックすると、既存の画面は、少し薄暗くなり、
新しく「共有」ウィンドウが立ち上がります。

その「共有」ウィンドウ内に、「地図を埋め込む」というタブがあるので、そこをクリックします。

埋め込む地図の「サイズ」を選ぶ。

「共有」ウィンドウ内の「地図を埋め込む」タブをクリックすると、
「共有」ウィンドウ内に地図が表示されます。

画像で、ピンクの枠で囲んである「中」の文字は、地図のサイズを選べるところです。
「中」の文字の右隣りに、下向きの三角「▼」がありますが、
そこをクリックすると、「小・中・大・カスタムサイズ」と、4段階で地図のサイズが選べます。
試しに、「カスタムサイズ」を選んでみます。

小サイズは「経路」アイコンが表示されなかった。

ちなみに、「小」サイズだと、「保存」アイコンのみで、「経路」は示されませんでした。
記事を読んでくれたユーザーが、「わ~行きたい!」と思ったとき、
経路が示されないのも不便かなと思いますので、
「中」サイズ以上の地図にしておくほうが、親切だろうなと思います。


おそらく、「中」サイズが、800×600 なのだろうと思います。
サイズの右側にある、「実サイズでプレビュー」という青い文字部分をクリックすれば、

別ウィンドウが新たに立ち上がり、800×600サイズの地図が表示されます。
これを参考にしながら、記事に表示させたい地図のサイズを確認していきます。

「HTMLをコピー」する。

表示サイズに納得がいけば、「共有」ウィンドウ内にある、「HTMLをコピー」という青い文字をクリックします。
すると、左側にあるコードが青い帯に包まれ、文字は白抜きになります。
おそらく、これでコピーできていると思いますが、心配な方は、右クリックして「コピー」をしてください。

Word Press(ワードプレス)の記事投稿画面へ移動。

Word Press(ワードプレス)の記事投稿画面に移動します。
「ビジュアル」タブに比べて、「テキスト」タブが明るい灰色になっていることを確認して、
右クリックをしてコードを貼り付けます。

プレビューで確認してみる。


「プレビュー」をクリックすれば、記事に地図が埋め込まれたかどうかが、確認できます。

このように、問題なく、地図が貼り付けられたことがわかりました。

プラグインもあるようですが・・・


今回は、Googleマップで、コードを発行しておいてから、それを貼り付けることで、
Word Press(ワードプレス)の記事に地図を埋め込む方法を示しました。

ただ、実際には、Googleマップにアクセスせずに、Word Press(ワードプレス)内で、地図を埋め込むことができるプラグインもあるようです。

毎回、記事に地図を埋め込むような執筆スタイルの方は、プラグインを導入されたほうがよいと思いますが、
私の場合、時々地図を入れられたらいいな。という感じなので、
プラグインを入れるほどではなく、上記のやり方で十分です。

Left Caption

Lukia

Googleマップが埋め込んであると、近隣の情報も得られて、より有用な情報になりますよね。
ああ、早くお好み焼き屋さんの記事が書けるような段階になりたいです。
久々にデジカメ買うべきかな・・・

カテゴリー