ワードプレスのCocoonテーマを使ってブログを書いている方はたくさんいると思います。
今日はGoogle マップをブログ記事に貼り付ける方法を解説します。
こんにちわ。
ブロガーのティージェーです。
今日はワードプレスのCocoonテーマを使ってブログ記事を書いている方向けの記事です。
僕もCocoonを使ってブログ運営をしています。
キャンプや遊園地などに行った時の記事を紹介するときにブログ記事にGoogle マップが貼り付けられると便利ですよね。
ワードプレスのCocoonテーマではブログ記事にグーグルマップを貼り付けるのは超簡単にできちゃいます。
写真付きでわかり安く解説します。
Cocoon（コクーン ）でGoogle マップをブログに貼り付ける方法
まずはGoogle マップを開き紹介したい場所を検索します。
例えば、今回は本栖湖キャンプ場にしてみますね。
Google マップの検索ボックスに「本栖湖キャンプ場」と入力します。
すると本栖湖キャンプ場周辺の地図が表示されます。
次に「共有」というボタンをクリックしてみましょう。
次に「地図を埋め込む」というボタンをクリックしましょう。
すると下記のように地図のHTMLリンク画面が表示されます。
このHTMLをコピーする前に地図のサイズを決めておきましょう。
最初の設定は「中」サイズになっています。
地図のサイズを変更するには、HTMLの横の「中」というボタンをクリックします。
すると下記のように「小、中、大、カスタム」と4つのサイズが選択できます。
地図のサイズは下記になります。
- 「小」：横400px 縦300px
- 「中」：横600px 縦450px
- 「大」：横800px 縦600px
普通のブログであれば地図のサイズは「中」でいいと思います。
サイズを選んだらHTMLのリンクをコピーします。
これでブログに表示させたい場所のGoogle マップの地図のHTMLがコピーできました。
あとはワードプレスのCocoonテーマのブログ記事に貼り付けていきましょう。
ブログ記事への貼り付け方も簡単です。
まずは記事作成ページへ行き、「＋」ボタンをクリックします。
いくつかの選択タグから「カスタムHTML」をクリックします。
もしも「＋」をクリックしたときに「カスタムHTML」が表示されなければ、「一般ブロック」をクリックすると「カスタムHTML」が表示されます。
「カスタムHTML」をクリックするとブログ記事内に下記のようなボックスが表示されますので、「HTMLを入力」と書いてあるところに先ほどGoogle マップでコピーしたHTMLリンクを貼り付けましょう。
すると下記のようによくわからないコードがたくさん表示されますが、これでOKです。
最後にきちんとブログに地図が表示されるかチェックしましょう。
下記の赤丸で囲っているところをクリックします。
ブログ内に下記のようにGoogle マップは表示されていればOKです。
Google マップで経路を表示させながらブログに貼り付ける方法
ブログでGoogle マップを使って、紹介する場所を貼り付けるだけではなく、下記のように経路を表示させるのも簡単にできます。
では早速やり方を解説していきます。
まずはGoogle マップで目的地を入力します。
さっきと同じように本栖湖キャンプ場としましょう。
赤丸の「ルート・乗換」をクリックします。
目的地は自動で入力されていますので、赤枠部分に出発地点を入力しましょう。
今回は「横浜駅」を入力してみます。
「横浜駅」を入力し、移動手段は「車」を選択しました。
移動手段は他に、電車、歩き、自転車、飛行機が選択できます。
すると下の写真のように入力した出発地点から到着地点までの経路が表示されました。
あとは、先ほどのようにこの地図のHTMLリンクを取得します。
次に下の赤枠部分をクリックします。
すると下記のページが出てくるので、「地図を共有、または埋め込む」をクリックします。
「地図を埋め込む」をクリックします。
サイズを選んでからHTMLリンクをコピーし、先ほどと同じようにCocoonテーマのブログ記事に貼り付けるだけです。
まとめ 【写真付きで解説】Cocoon（コクーン ）でGoogle マップをブログに貼り付けるのは超簡単
いかがでしたでしょうか？
このようにワードプレスでCocoonテーマを使っていれば、ブログ記事にGoogle マップを貼り付けることはとっても簡単です。
紹介したい場所の地図をのせることもできますし、経路ものせることができます。
慣れれば1分も掛からずにできてしまいます。
是非ご活用ください。
