いり江の福岡生活

よかよかブログ(ブログふくおかよかよか)で、
記事に地図を表示させる方法は大別して2種類あります。

1.よかよかブログのマップ機能を使う

それでは、こちらの住所の地図を貼り付けてみましょう。

例：　　チャーガ健康園
　　　　福岡市東区箱崎5-4-12
　　　　http://www.shop-chaga.com/

まず、よかよか管理画面から、記事投稿をクリックします。

▼記事投稿


普通に記事を書いていき、地図を入れる場所で、
オプション設定の中にある『マップ』をクリックします。

▼住所検索


別ウインドウで、ブログふくおかよかよかマップが開きます。
住所検索窓に、検索したい住所を入れて、検索ボタンをクリック。
赤の十字線が検索結果です。確認して、必要であれば微調整しましょう。

ここで表示されている拡大率で、実際に記事上で
地図が表示されますので、お好きな拡大率に変更しておきましょう。
拡大率は、地図左側の+/-キー、またはスライダーで変更できます。

▼地図挿入方法


同ウインドウの下に、地図の挿入ボタンがあります。
地図のサイズを変更してから、本文または追記文のどちらか
好きな方に地図を挿入しましょう。

▼HTMLコードの貼り付け


ここでは、本文中に地図を挿入してみました。
本文中にHTMLコードが自動で貼り付けられていることを確認します。

▼プレビュー画面


地図がキチンと貼り付けられたか、プレビューで確認します。
気に入らなければ、HTMLコードを消してから、何度でもやり直せます。

以上で、1.の手順は終わりです。

どうです？意外と簡単でしょう？
よかよかブログのこの機能は結構便利ですよね。

2.Google Mapsなどの地図HTMLコードを貼る

少し上級者向けの方法です。
結局、文章中にHTMLコードを貼り付ければ、何でも表示できます。
この例では、Google Mapsで表示している地図を貼り付けてみます。

まず、Google Mapsを開きます。
http://maps.google.co.jp/

また、こちらの住所の地図を貼り付けてみましょう。

例：　　チャーガ健康園
　　　　福岡市東区箱崎5-4-12
　　　　http://www.shop-chaga.com/

▼Google Mapsの結果表示


結果を表示した後、右上の『リンク』をクリックします。

▼HTMLコードの出力


小さいウインドウが出てきて、
①このページのURL、②この地図のHTMLコード、を出力できます。

ここでは、②のHTMLコードが必要になります。
このままコピーして、記事投稿の本文へペーストすればOKです。
地図のサイズなどを変更したい方は、
「埋め込み地図のカスタマイズとプレビュー」をクリックして、
好きなようにカスタマイズしてください。
この場合はカスタマイズ画面の最後にあるHTMLコードを
コピー&ペーストして下さい。

▼HTMLコードを貼り付け(コピー&ペースト)


本文中に、HTMLコードをコピー&ペーストします。
手順1.のように自動でペーストはされませんのでご注意を。

▼プレビュー画面


最後に結果をプレビューしてみましょう。
上手く表示されましたか？気に入らなければ、
何度でもやり直してください。

尚、地図左下にある「大きな地図で見る」をクリックすると
Google Mapsが起動し、検索結果が表示されます。

以上で、2.の手順は終わりです。

ちょっと難しかったかもしれませんが、慣れれば簡単です。


お役に立てれば幸いです。

>チャーガ健康園さん
もし、分からないことがあれば遠慮なく連絡下さい！