ブログにインタラクティブな旅の地図を載せる方法
2026年11月10日 更新 · 4 分で読めます
行った場所を読者に伝えるには、地図がいちばんの近道です。静止画のスクリーンショットではなく、インタラクティブな地図を埋め込めば、読者はページ上で地図を動かし、旅を開き、写真をクリックできます。
埋め込みコードを取得する
- 1旅の写真をアップロードして、Trailroll で地図を作ります。
- 2地図を共有 を開き、公開リンクをオンにします。
- 3表示する旅を選び、正確な位置や日付を隠すかどうかを決めます。
- 4埋め込みコード をコピーします。短い iframe のコードです。
埋め込んだ地図は、共有リンクと同じ設定で表示されます。あとから旅やプライバシー設定を変えても、コードを触らずにブログの地図が更新されます。
すべての旅をひとつの地図に写真をアップロードすると、Trailroll が撮影した場所にそれぞれピンを立てます。最初の 500 枚まで無料です。
旅の地図を作るサイトに貼り付ける
- WordPress： カスタム HTML ブロックを追加して、コードを貼り付けます。
- Squarespace： コード ブロックを追加して、コードを貼り付けます。
- Wix： 埋め込みコード → HTML を埋め込む を追加して、コードを貼り付けます。
- Ghost： HTML カードを追加します。
- Webflow： Embed 要素を追加します。
- HTML を直接書く場合： 地図を表示したい位置に iframe を貼り付けます。
Medium や Substack など iframe を使えないプラットフォームでは、インタラクティブな地図は表示できません。代わりに共有リンクを載せれば、地図のプレビューカードが表示されます。
ブログの地図をうまく見せるコツ
- 旅行記ごとに 1 つ、プロフィールページに全体の地図を 1 つ。 共有設定で、記事に合う旅だけを含められます。
- 自宅や宿泊先などが含まれる場合は、正確な位置を隠す をオンにしましょう。
- 地図には十分なスペースを。 横幅いっぱい、高さ 500 ピクセル前後の埋め込みなら、パソコンでもスマホでも見やすく表示されます。
よくある質問
- 埋め込みは無料ですか？
- はい。共有と埋め込みは無料プランに含まれています。
- 埋め込むとページが重くなりませんか？
- 地図はページのあとに専用のフレームで読み込まれるので、文章や画像が先に表示されます。