またまたすごいマイナーなこと書く記事です。
ただ、自分の中ではずーっとやりたくてできなかったことができた！からまとめておく。
たぶんもっと詳しい人がやったら、こんな面倒な方法じゃなくてもできるんかもしれんけど、
自分の見た限りネット上には載ってなかったから、とりあえず載せておく。
写真もスクリーンショットもなんもしてない… いつか写真載せよーっと。
●おおまかな手順
1. ルートラボ
で作ったマップのページから、ちょっと手順を踏んでiframeタグを抽出
2. アメブロでiframeタグは禁止タグになってるけど、それを使えるようにする
3. ブログ本文にiframeタグを載せて完成
●詳細手順
| 1. iframeタグの抽出方法 |
① ルートラボ でマップを作成
② 作成したマップのページ下部 「ルートをブログなどに貼り付ける」 の 「HTMLコード」 部分をコピー
さらに、抜き出したコードの中の 「src="http://～"」 の部分の 「http://～」 部分だけをコピー
例）
抜き出したコードが以下の場合なら、黄色の文字の部分のみをコピー
<script type="text/javascript" encoding="UTF-8" src="http://latlonglab.yahoo.co.jp/route/paste?id=0c55ced96c86cd89d192babe3ba33f0a&width=320&height=480"></script>
③ ウェブブラウザ（Internet Explorerとか…）の上部URL入力窓にコピーした文字列を貼り付けてEnterボタン
→Internet Explorerなら…
ポップアップで 「このファイルを保存しますか…」みたいなんが出てくるから、それを保存
保存できたらダブルクリックして開く → 「ファイルを開くプログラムを指定」 の画面でメモ帳を指定
これで文字列が出てくる
→Google Chromeなら…
そのままウィンドウ上に文字列が出てくる
④ 出てきた文字列の中のiframeタグ部分をコピー → これで抽出完了
例）
document.writeln('<iframe scrolling="no" frameborder="0" src="http://latlonglab.yahoo.co.jp/route/watch?id=e011002e0a7690e4fb7a700d19721aa9&mode=paste&graph=true&url='+encodeURIComponent(location.href)+'" style="border:solid 1px #999; width:320px; height:480px; margin:0; padding:0;"></iframe>');
| 2. アメブロでiframeタグを使えるようにする方法 |
→ まるまる下記サイトを参考にさせて頂き増した。ありがとうございます。
参照したサイト → アメブロの禁止タグを使う方法
やってることは、アメブロ内のフリープラグインに文字を貼りつけることでiframeタグを使えるようにしてる。
この部分は、自分が説明するより上のサイト参照してもらった方が断然分かりやすいと思うので上のサイトを見てください。
| 3. ブログに貼りつける方法 |
上のリンクを見た後なら、もう説明する必要はないと思うけど例をあげておく。
例）
<div class="createTag"><!--
<[iframe scrolling="no" frameborder="0" src="http://latlonglab.yahoo.co.jp/route/watch?id=e011002e0a7690e4fb7a700d19721aa9&mode=paste&graph=true&url='+encodeURIComponent(location.href)+'" style="border:solid 1px #999; width:320px; height:480px; margin:0; padding:0;"]><[/iframe]>
--></div>
こんな感じにして張り付ければ表示されるはず
具体的には、
① iframeタグの前に<div class="createTag"><!--を追加
② iframeタグの後に--></div>を追加
③ iframeタグにある < を <[ に。 > を ]> に書き換える。
ちなみにピンクの文字部分 widthは横幅、heightは高さを表してるから、ここの数字をいじればサイズが変えられる。
下のサンプルはwidth:600px; height:400pxにしています。
●サンプル
おわりー