BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» gooブログカスタマイズ google地図をブログ記事に設定する方法

このエントリーをはてなブックマークに追加

gooブログカスタマイズ google地図をブログ記事に設定する方法

   投稿日: 2017/08/25    投稿者:webコラム

c6ed4c12de971103c29bd79861023ed9_s.jpg

こんにちは! ライターのモモタロウです。

今回は、gooブログカスタマイズ google地図をブログ記事に設定する方法をお伝えします。

google地図のコードを入手しよう


 googleマップを開き、ブログに表示させたい場所を検索します。

https://www.google.co.jp/maps?hl=ja&tab=wl ←Googleマップ

バージョンによってコードを入手できる操作が変わります。
旧バージョンの場合
1.googleマップにて、貼り付けたい地図を表示する
2.画面右下にある歯車のようなアイコンをクリック
3.「地図を共有/埋め込む」をクリック
4.「地図を埋め込む」タブをクリックし、表示されたコードをコピー

以前のバージョンの場合
1.以前のバージョンのgoogleマップを表示し、貼り付けたい地図を表示する
2.画面左上にある「リンク」アイコンをクリック
3.表示された画面の上から2つ目「ウェブサイトへの地図埋め込み用 HTML コード」欄に表示されたコードをコピー

最新バージョンの場合を画像で表すと以下の通りです。
20170730-3.jpg
左上をクリックしてメニューリストを表示させます。
「地図を共有または埋め込む」をクリックします。

小ウィンドウが開き、「リンクを共有」タブと「地図を埋め込む」タブが上にあるので「地図を埋め込む」タブをクリックします。
20170730-3-1.jpg
表示されているコードをコピーします。四角で囲った部分です。

gooブログにgoogle地図を設定するには?


googleマップのコードを取得したら、gooブログにログインします。

その後、メニューバーにある「モジュール」の「ブログパーツ」をクリックします。
下の画像で四角く囲った部分です。

20170730-4.jpg

「ブログパーツ」画面の項目「gooブログパーツに変換」で、「変換元タグ」四角枠部分に先ほどコピーしたコードを貼り付けます。

20170730-5.jpg
貼り付け後、「gooブログパーツに変換」ボタンをクリックします。

gooブログパーツに「変換が完了しました」画面に変わります。

下にボタンが3つ並んでいます。「記事に貼る」をクリックします。
20170730-5-2.jpg


新規で記事を編集する画面に遷移します。


そのままプレビューすると・・・


20170730-7.jpg

地図がブログ記事に表示されました。


記事に文章を書き込みこんでもよいので、その場合、「HTMLエディタ」タブを「TEXTエディタ」タブに変更して編集するとよいでしょう。


20170730-6-3.jpg



ブログ記事を確認すると・・・


20170730-7-1.jpg


まとめ


いかがでしたか?

ショップの場所などを特定するときに威力を発揮するgoogleマップ。

用途に合ったブログカスタマイズでより充実したブログを作成してみよう。





カテゴリ:

TOPへ