アメブロの記事やフリースペースにGoogleマップを貼り付ける方法 - アメブロカスタマイズと読者を増やすブログ運営 初心者からプロまで - アメブロカスタマイズと読者を増やすブログ運営 初心者からプロまで

アメブロの記事やフリースペースにGoogleマップを貼り付ける方法

アメブロの記事やフリースペースにGoogleマップを貼り付ける方法

./image/entry/QBlog/20140617-1-09.png

お店の地図などを載せたい時に便利なGoogleマップをアメブロの記事やフリースペースに貼り付ける方法です。

アメブロの記事にGoogleマップ貼り付ける方法

ここでは、Googleマップを記事に貼り付ける方法を説明しますが、フリースペースに貼り付ける場合も、最終的に貼り付ける位置が違うだけです。

Googleマップを開く

まずは、Googleマップを開きます。

./image/entry/QBlog/20140617-1-01.png

ブログに表示したい場所を検索する

Googleマップ左上の検索ボックスで、ブログに表示したい場所を、お店の名前や住所で検索します。

./image/entry/QBlog/20140617-1-02.png

見つかったら、地図上にマークが表示されますが、大きさが不適切な場合がありますので、マウスのホイールや、マップ右下の「+」「ー」ボタンでちょうどよい大きさに調整してみて下さい。。

./image/entry/QBlog/20140617-1-03.png

貼り付けタグを取得する

アメブロに貼り付けたい地図を表示できたら、次は、その地図を貼り付けるためのタグを取得します。

マップの右下にある「歯車」の形のアイコンをクリックして、表示されたメニューにある「地図を共有または埋め込む」をクリックします。

./image/entry/QBlog/20140617-1-04.png

すると、マップの中央付近に「リンクを共有」「地図を埋め込む」と書かれた小窓が表示されますので、「地図を埋め込む」をクリックしましょう。

./image/entry/QBlog/20140617-1-05.png

これで、このマップを貼り付けるためのタグが表示されます(下の画像の赤枠で囲った部分)ので、

./image/entry/QBlog/20140617-1-06.png

このタグを選択し、右クリックメニューから「コピー」をクリックします。

(左のボタンで大きさを選択できますが、アメブロ記事が2カラムなら「中」、3カラムなら「小」にするとはみ出さないと思います)

./image/entry/QBlog/20140617-1-07.png

これで、クリップボードに貼り付け用のタグがコピー出来ました。

アメブロの記事に貼り付ける

あとは、アメブロの記事エディタに貼り付けて投稿すればOKです。

./image/entry/QBlog/20140617-1-08.png

ちなみに、上の画像では、タグ編集エディタに貼り付けています。

標準エディタや新エディタでも、「HTMLを表示」するモードにすれば貼り付けできますが、何かと不都合なことがあるので、できればタグ編集エディタを利用されるのが良いと思います。

どうしても、「タグ編集エディタはちょっと・・・」と言う方は、このGoogleマップのタグ貼付けに関しては、標準エディタよりも新エディタの方が問題が少ないので、新エディタを利用されると良いと思います。

確認

最後に、投稿した記事にGoogleマップが貼り付けられたのを確認して終了です。

./image/entry/QBlog/20140617-1-09.png

以上、アメブロの記事にGoogleマップを貼り付ける方法をご紹介しました。

よかったら参考にして下さい。

最新の更新 RSS