登山地図(GPSログ、標高グラフ)をブログに貼る方法:YAMAPとヤマレコ

2020/08/08

YAMAP ヤマレコ 地図 登山

t f B! P L

ブログに山の地図(GPSログや標高グラフ)を貼る方法。

こんにちは、今回はYAMAPヤマレコに登録した山行記録の地図(ルート)をブログに貼り付ける方法を紹介したいと思います。

今回はPCでブログに貼り付ける方法を紹介します。ブログはHTML編集が対応しているサービスを対象としています。私の場合はbloggerですね。スマホでは色々と厳しいと思います(操作性が)。

活動記録を登録して地図を出力しよう。

まずは、YAMAPでもヤマレコでも同様ですが、登山の活動記録を各サービスに登録しましょう。ヤマレコであれば実際の活動記録ではなく、活動計画で書いたルートでも問題ありません。今回は以下の山行を例に貼り付け方を紹介します。



YAMAPの場合

YAMAPではこんな感じで地図と該当する活動記録へのリンクを貼ることが出来ます。
ブログ上で地図自体を操作することはできません。地図画像に活動記録へのリンクを貼っているといった感じですね。ちょっとカッコいいYAMAPへのリンクを貼りたい時に活用するといいでしょう。




手順として、まずはYAMAPで貼りたい活動記録を開きます。少し下にスクロールすると左側にフローティングメニューが出てくるので</>をクリックします。注意点として、活動記録の公開範囲が”公開”でないとこの機能は使えません。非公開や限定公開になっている場合は利用できないので注意してください。

左メニューの一番下の</>を押す。

</>
をクリックすると、YAMAP Widgetというウィンドウが出てきます。そこで”地図を表示”を選んでください。するとHTMLタグが変更されますので、あとは”HTMLをコピー”を押してご自身のブログにHTML編集モードで貼り付けましょう。

地図を表示を押してHTMLをコピー。

地図を挿入したい箇所にHTMLを貼り付けます。

地図のサイズを変更したい場合はdata-width="100%"となっているところを変更しましょう。試しに50%に変更するとこんな具合になります。



ヤマレコの場合

ヤマレコでは標高グラフ付きで地図を貼ることができます。ヤマレコの地図はYAMAPと違い、ブログ上で動かしたりズームしたりすこともできるので私は専らこちらを使用しています。最近はこの地図を使うためだけにヤマレコにログを登録している節すらあります。もちろんこの地図は該当の山行記録にリンクされているので、クリックすることで山行記録ページに飛べます。


貼り付け方法ですが、まずはヤマレコの山行記録ページに行きましょう。普段ヤマレコを使用していない場合は、YAMAPなどからGPSログをとってきて使用するといいでしょう。YAMAPでGPSログをダウンロードする方法はこちらを参考にしてください。

GPSログを用意できたら山行記録を登録しましょう。ヤマレコの場合、場所やエリア、ジャンルなどが必須項目になっているので適当に選択しましょう。山行記録登録の3ページ目(ルート作成)でGPSログを登録を選択し、ログ種別をGPSログにしてGPSファイルを登録しましょう。

登録が出来たら山行記録ページに行き、地図が表示されるところまでスクロールします。地図の右上に”マップ機能”があるのでクリックしてください。クリックするとメニューが表示されるので、”ブログに貼付”を押してください。

地図右上のマップ機能からブログに貼付を選択。

ブログに貼付を押すとHTMLを出力するメニューが出てきます。コード生成!を押すと、HTMLが出力されるので、YAMAPと同様に、ブログの貼り付けたい箇所にHTMLをコピーしてください。

標高グラフにチェックを入れてコード生成!

以下は標高グラフ無しでサイズを300x200にしてみました。サイト上では最低サイズ300x200でないと出力できませんが、HTMLを直接編集すればそれ以下のサイズでも出力することができます。



以上、YAMAPとヤマレコの地図をブログに貼り付ける方法を紹介しました。登山ブログをされている方は是非参考に貼り付けてみてください。

以上、最後まで読んでいただきありがとうございました。少しでも面白い、タメになったと感じたら下記のバナーをポチっと押してもらえると、記事作成の励みになります!
にほんブログ村 アウトドアブログ 登山へ

がんちゃんねる@Youtube

山行形態別

活動年

2011年 (1) 2012年 (1) 2015年 (6) 2017年 (7) 2018年 (3) 2019年 (5) 2020年 (32) 2021年 (26) 2022年 (12) 2023年 (14)

QooQ