ブログでお勧めポイントとか、ココ行ってきたとかの紹介で
そのポイントの地図をブログに表示できる無料ツール「ちず窓」が出来たそうです。
で、説明を見る限りは、選んだポイントの地図表示用のHTMLを自分のブログの
記事に貼り付ければいいみたいだが、BLOCKBLOGは記事内にはHTMLは貼れないので、
その場合は、何かリンクURLを貼り付ければいいみたい??
なんか、説明を見てもよくわからない。
ただ、どんなブログでも出来ると書いてあるが、できるんだろうか???
単にリンクを貼っただけじゃやる意味無いのでね。。。
ということで、まずは会員登録して、使ってみることに。
ところが、サーバの不調(なんかアクセスが集中しすぎたみたい)で
登録が出来ず、後から登録しておきましたと。。。
でも、待て。この記事では、どこのポイントを紹介すればいいのだ????
ううーーーーん。。。。。
そうだ、この記事では例を示せばいいじゃないのか。
ということで、今は冬ですね。
これからはスキーシーズン。
じゃ、自分が今までに行った日本のスキー場で一番のお勧めなどを。
ここは、山の山頂から、コースが山麓まで沢山あり、
斜度も中級者向きコースが長く(1.5km)あって、
滑り甲斐がある。コブもあるし、いいです。
なにしろ、沢山滑って練習したい人にはお勧め。
問題は、強風が吹くとリフトが止まることだったが
最近は行ってないので、どうだか判らないが。。。
と書いたけど、実際に登録して地図のポイントを作成して
作成されたHTMLタグを見ると、IMGタグで地図画像を表示し、
それをAタグでリンクを貼ってある。
もしHTMLタグが貼れない場合は、単なる地図へのリンクになってます。
ということで、BLOCKBLOGでは地図画像のURLを書けば表示はできるはず
だけど、このURLは画像ではないので、まともにやっては無理そうですね。^^);;
●2005/12/24 ということで、DOMで記事本文中に無理やりIMGタグを挿入しました。
心配は地図の大きさだったが、さすがにブログを意識して小さ目だったのでOK。
○考え方
?BLOCKBLOGの記事には、以下のように記載する。
すなわち、ちず窓で作成されたHTMLタグの
Aタグ内の HREF=”***”
IMGタグ内のSRC=”。。。”
の***と。。。を地図を表示したい部分に以下のように記載する。
[[。。。:***]]
?jsファイルを作成する。
考え方は、上記の結果、記事内では以下のHTMLに変換されるので、
<A HREF=”***”>。。。<A>
ここで、***と。。。の先頭のURLは、ちず窓を表示させる専用のURL
なので、この部分を記事内で検索してIMGタグに置き換える。
すなわち、
・記事内でAタグを見つけ、そのHREFが***部分の
先頭数文字と同じかを見つける。
・さらに、その子ノード内のテキストが。。。の先頭数文字
同じかを判断し、同じであれば
・IMGタグをcreateTagで作り、もとの子ノードと
replaceChildすればよい。
?上記のjsファイルを各ページのペイン:footerに「どこのもブロック」で登録する。
●以下はjsファイルのソースです。
<!-- <![CDATA[//************************************************************** // display map window for BLOCKBLOG (Copyright-free) // 2005.12.24 V1.0 : 7maru JavaScript tool //************************************************************** function js7DisplayMapWindow(){ var i,j,src,obj,t; var tagList = getTagObj("A"); for(i=0; i<tagList.length; i++){ if(getHref(obj=tagList[i]).indexOf( "http://chizumado.jp/view?position_id=") != -1){ if((t=getTextValue(obj)).indexOf( "http://chizumado.jp/RasterMap?position_id=") != -1){ setImgTag(obj,t,"ちず窓"); } break; } } } function getTagObj(tag){ if (document.all){ return document.all.tags(tag); } else if (document.getElementById){ return document.getElementsByTagName(tag); } } function getHref(obj){ if (document.all){ return obj.href; } else if (document.getElementById){ return obj.attributes.getNamedItem("href").value; } } function setImgTag(obj,src,title){ var iobj; if (document.all){ obj.innerHTML = "<img src='"+src+"' title='"+ title+"'>"; } else if (document.getElementById){ iobj=createTag(obj,"","IMG"); obj.replaceChild(iobj,obj.firstChild); iobj.setAttribute("SRC", src); iobj.setAttribute("TITLE", title); } } function getTextValue(obj){ if (document.all){ return obj.innerText; } else if (document.getElementById){ return obj.firstChild.nodeValue; } } function createTag(parentObj,createid,createtag){ var obj=document.createElement(createtag); obj.setAttribute("id",createid); parentObj.appendChild(obj); return obj; } js7DisplayMapWindow(); // ]]> -->