私もたくさんの海外在住のブロガーさんの現地情報にお世話になりました。
ガイドブックには載っていないような、地元の人しかわからない美味しくて安いレストランをたくさん利用させてもらっています。
さて、マップのリンクは大きく分けて２種類あります。
昨日ランチで食べた新宿の安くて美味しいカレー食べ放題のお店を参考に説明します。
【Aタイプ】 文字へのリンクする方法
インド料理レストラン- HATTI - ※場所はこちら
↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
レストラン名には、レストランのHPのアドレスをリンクしています。
「こちら」には、GoogleMapのアドレスをリンクしています。クリックして確かめてみましょう。
 |
| 画像１：Bloggerのリンク編集ウィンドウ |
指定の文字列（お店の名前など）を選択して、［リンク］メニューをクリックすれば上の画像のようにリンクを編集するウィンドウが立ち上がります。
【２】リンク先のURLをコピペします。
【３】読者のことを考えて、［このリンクを新しいウィンドウで開く］にチェックを入れておきましょう。そうしないと、読んでいたブログページがリンク先のページになってしまうため、元に戻るのが面倒くさいですよね。
GoogleMapのリンクURLを調べよう
リンクのやり方がわかったら、GoogleMapのURLをコピーのやり方を学びましょう。
GoogleMapでは、リンクのURLをコピーしやすい仕様になっています。ありがたいですね。
 |
| 画像２：GoogleMapのリンクURLの調べ方 |
【１】赤丸で囲まれた部分が、現在開いているページのリンクの表示アイコンです。
【２】2列ありますが、上の列が［メールやチャット用のリンク］。つまり今回のテキストデータでリンクするやり方にはこちらを使います。
https://maps.google.com/maps?q=%E6%97%A5%E6%9C%AC,+%E6%9D%B1%E4%BA%AC%E9%83%BD%E6%96%B0%E5%AE%BF%E5%8C%BA%E8%A5%BF%E6%96%B0%E5%AE%BF%EF%BC%97%E4%B8%81%E7%9B%AE%EF%BC%95%E2%88%92%EF%BC%95+%E3%83%8F%E3%83%83%E3%83%86%E3%82%A3%E3%83%BC%EF%BC%88%EF%BC%A8%EF%BC%A1%EF%BC%B4%EF%BC%B4%EF%BC%A9%EF%BC%89&hl=ja&ie=UTF8&ll=35.695826,139.70246&spn=0.007807,0.016512&sll=35.506611,139.44169&sspn=0.061206,0.082312&oq=+%E3%83%8F%E3%83%83%E3%83%86%E3%82%A3%E3%83%BC&hq=%E3%83%8F%E3%83%83%E3%83%86%E3%82%A3%E3%83%BC(HATTI)&hnear=%E6%97%A5%E6%9C%AC,+%E6%9D%B1%E4%BA%AC%E9%83%BD%E6%96%B0%E5%AE%BF%E5%8C%BA%E8%A5%BF%E6%96%B0%E5%AE%BF%EF%BC%97%E4%B8%81%E7%9B%AE%EF%BC%95%E2%88%92%EF%BC%95&t=m&z=17
わ～URL長すぎ！
と、コピーすると上のようにものすごく長くて驚いちゃいますが、今回はブログの文字列そのものにリンクをするので、長くてもいっこうにかまいません。これは画面では表示されないからです。
※もし文字にリンクせず、そのままURLを貼り付けるのであれば、□短縮URL詳細 を使用しましょう。
次はGoogleMapそのものを、ブログに小さく埋め込むやり方です。
大きな地図で見る
さて、ではこれをどのように設置するかです。
HTMLを使用しますが、え？なにそれ？って人には敷居が高く感じるかもしれません。
wikiによると「HTML（エイチティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。」だそうです。
どう作るかわからなくても、みなさんが書いているブログそのものも、HTMLではどのように書かれているか見ることができます。※後で見てみましょう。
私はHTMLを詳しく教える技術はないので、今回はGoogleMapをBloggerに配置するやり方だけを教えますね。
【１】先ほどのGoogleMapのリンクのURLを見てください。上の列が[メールやチャット用のリンク]、そして下の列が［ウェブサイトへの地図埋め込み用HTMLコード］になります。
【２】コピーするURLはこれ（赤丸）でよいのですが、サイズ等をきちんと設定するために、［埋込み地図のカスタマイズとプレビュー]をクリックして開きましょう。
そこでサイズ指定ができます。
カスタムでサイズを指定すれば、横長にすることもできます。
画像４の一番下に［サイトに地図を埋め込むにはこのHTMLをコピーして貼り付けます］と書いてありますが、投稿ページそのものに貼り付けても意味がありません。それではこのへんな文字列がそのまま文字として投稿されるだけです。
【３】Bloggerの投稿ページをHTMLで開きましょう。
投稿している記事のメニュー部分に[HTML］というボタン（赤丸箇所）があります。
そこをクリックすると、今書いている記事をHTMLで表示・編集することができます。
GoogleMapを埋め込みたい箇所（行）に、先ほどのGoogleマップの埋込みHTMLコードをコピペしましょう。
これで、ブログにマップを埋め込むことができました。
ちなみに<br />とは改行のタグです。HTMLも勉強するといろいろ出来て面白いですよ。
いかがでしたか？
これからは、お気に入りのスポットやレストランの場所をたくさんの人にブログで教えてあげられますね。
と、コピーすると上のようにものすごく長くて驚いちゃいますが、今回はブログの文字列そのものにリンクをするので、長くてもいっこうにかまいません。これは画面では表示されないからです。
※もし文字にリンクせず、そのままURLを貼り付けるのであれば、□短縮URL詳細 を使用しましょう。
【Bタイプ】 GoogleMapをブログに埋め込む方法
次はGoogleMapそのものを、ブログに小さく埋め込むやり方です。
画像として配置するのではなく、GoogleMapそのものなのです。
なので、小さなウィンドウの中でGoogleMapが機能しています。試しに下のGoogleMapを動かしてみてください。小さくてもちゃんとGoogleMapです。
みなさんもどこかのサイトで使ったことありますよね。
みなさんもどこかのサイトで使ったことありますよね。
大きな地図で見る
さて、ではこれをどのように設置するかです。
HTMLを使用しますが、え？なにそれ？って人には敷居が高く感じるかもしれません。
wikiによると「HTML（エイチティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。」だそうです。
どう作るかわからなくても、みなさんが書いているブログそのものも、HTMLではどのように書かれているか見ることができます。※後で見てみましょう。
私はHTMLを詳しく教える技術はないので、今回はGoogleMapをBloggerに配置するやり方だけを教えますね。
【１】先ほどのGoogleMapのリンクのURLを見てください。上の列が[メールやチャット用のリンク]、そして下の列が［ウェブサイトへの地図埋め込み用HTMLコード］になります。
 |
| 画像3：GoogleMapのリンクURLウィンドウ |
【２】コピーするURLはこれ（赤丸）でよいのですが、サイズ等をきちんと設定するために、［埋込み地図のカスタマイズとプレビュー]をクリックして開きましょう。
そこでサイズ指定ができます。
 |
| 画像４：埋込みマップのサイズ指定 |
画像４の一番下に［サイトに地図を埋め込むにはこのHTMLをコピーして貼り付けます］と書いてありますが、投稿ページそのものに貼り付けても意味がありません。それではこのへんな文字列がそのまま文字として投稿されるだけです。
【３】Bloggerの投稿ページをHTMLで開きましょう。
投稿している記事のメニュー部分に[HTML］というボタン（赤丸箇所）があります。
そこをクリックすると、今書いている記事をHTMLで表示・編集することができます。
GoogleMapを埋め込みたい箇所（行）に、先ほどのGoogleマップの埋込みHTMLコードをコピペしましょう。
これで、ブログにマップを埋め込むことができました。
ちなみに<br />とは改行のタグです。HTMLも勉強するといろいろ出来て面白いですよ。
いかがでしたか？
これからは、お気に入りのスポットやレストランの場所をたくさんの人にブログで教えてあげられますね。
0 件のコメント:
コメントを投稿