グーグルマップ（Google Map）をアメブロの記事に貼り付ける方法（最新版エディタ対応）

こんにちは。
『やさしいブログの作り方』の松田です。

一昨日、こちらの大先生のブログでグーグルマップをアメブロの記事に貼り付ける方法が公開されていました。

ちょうど同じようなご質問を私もいただいていて、その解決方法を探っていたところでした。

私の方でわかったことを含めて手順をご紹介しますね。＾＾




グーグルマップを開いて、貼り付けたい地図を表示させ、共有をクリックします。




「地図を埋め込む」をクリックします。




開いたウインドウの左上のサイズを「小」にすると横幅が400pxの地図になり、記事エリアに収まるサイズになります。




表示された地図のアドレス上で右クリック→コピーします。




アメブロの記事編集画面を開いて、「ＨＴＭＬ表示」に切り替えます。




右クリック→貼り付けでタグを貼り付けます。

この時、タグ内の最後の方にある

allowfullscreen

を削除し、通常表示に戻します。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3268.832943357641!2d135.75657265065587!3d34.98584898026589!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x600108ae918b02ef%3A0xb61a446e74a21c08!2z5Lqs6YO96aeF!5e0!3m2!1sja!2sjp!4v1467009179192" width="400" height="300" frameborder="0" style="border:0"></iframe>

↑仕上がりのタグはこんな感じ。

これでプレビューおよび保存が可能になります。

allowfullscreenを削除せずに通常表示に戻すと、下書き保存等ができません。（禁止タグが含まれています、というエラーが出ます。）


最後までお読みいただきありがとうございました。

４つの無料メール講座配信中

これからブログを頑張っていきたい！ まずは基本から。
やさしいブログづくりのための、やさしいメール講座（全１０回）

「来てよかったです！」と言われるイベントにするために。
少人数イベント実施のための５つのステップ＋αが学べる無料メール講座（全１０回）

メルマガ、やってみたいけどどうすれば？という方へ
初めてでも安心して始められる、ステップメールの作り方メール講座（全１０回）

パソコンワーク、もっと時短できますよ。
ブロガーさんのための、パソコンワーク時短術１０の技メール講座

２０１６年１月１１日、出版しました！

ブログでビジネスを軌道に乗せるための行動術

ブログを続けていてよかった、そんな気持ちを一人でも多くの人と共有したいと思っています。＾＾