「サイト運営の話」カテゴリーアーカイブ

VALUE-DOMAIN,XREA.COMがGMOの子会社に

「きまっし金沢」及び関連サイトはドメイン管理はVALUE-DOMAIN,WEBサーバーはXREA.COMを利用していたのですが，VALUE-DOMAIN,XREA.COMを運営していた株式会社デジロックが知らないうちに２０１１年７月４日、GMOインターネット株式会社と資本・業務提携を行い、連結子会社になっていました。
株式会社デジロック自体，実態をよく知らない会社だったのですが，GMOインターネット株式会社ってあまり良い印象を持っていないので心配です。
料金の値上や，制約が多くなったり，ユーザーの不利益が増えそうな予感がします。

スクロール地図（スクロールマップ）を導入したい

コメントを残す

きまっし金沢で使っている大きな地図は，インラインフレームを利用してスクロールバーで上下左右に移動させていたのですが，フレームの窓を大きくとろうとするとスクロールバーが隠れてしまい使いにくいので，マウスの動きに合わせて地図も移動できるスクロール地図（スクロールマップ）を導入したいと思っていたのです。
ネットや本で，スクロール地図（スクロールマップ）の導入方法を調べたのですが，それほど情報がなく，やっとみつけたサイトや本を参考に試してみても，なかなかうまくいきません。
「スクロール地図を作ろう」というページを見つけてこれぞ探していたページと喜んでいたのですが，ホームページ製作の会社が昔作ったページで，ページこそは残っているのですが，トップページからはつながっていなく，説明も決して判りやすくなく，いろいろファイル構造とか探してみたのですがＪａｖａＳｃｒｉｐｔの知識が無い事もあって，自分のページ上で再現できませんでした。これを使えれば，思い通りの事ができたのですけど。
http://www.jmixnet.co.jp/map/info/c1-1.html
http://www.jmixnet.co.jp/map/info/c2-1.html
http://www.jmixnet.co.jp/map/info/c2-2.html
http://www.jmixnet.co.jp/map/info/c2-3.html
http://www.jmixnet.co.jp/map/info/c2-4.html
http://www.jmixnet.co.jp/map/info/c2-5.html
ただ，文字情報だけを動かす事はホームページ上で再現できました。
https://kimassi.net/mapscroll1/mapscroll1.html

スクロール地図（スクロールマップ）を製作するについて，基本的にはインラインフレームを使うのは同じですが，フレームの中に画像を入れるのではなくて，フレームの中に別のページを入れて，フレーム内のページの地図画像をマウスの動きに同期させる手法をとります。本格的なスクロール地図（スクロールマップ）は分割された地図の画像を使っているようですが，きまっし金沢では，そんなに本格的なスクロール地図（スクロールマップ）までは必要ないので，とりあえずマウスで地図画像を上下左右にスクロールする方法を調べました。
インラインフレームはページ内に
<center><iframe src=”scroll.htm” style=”width:900; height:480;” frameborder=0 ></iframe></center>
を入れます。
scroll.htmは任意のページ名で良いですし，width:900; height:480は使用したいインラインフレームの窓の大きさに合わせます。スクロールバーを消したい場合は
scrolling=”no”を入れます。
<center><iframe src=”scroll.htm” style=”width:900; height:480;” frameborder=0 scrolling=”no”></iframe></center>

画像をマウスの動きに合わせて画像をスクロールする方法を根気良く探したら説明も親切で簡単に使えるページが見つかりました。
http://www.pat.hi-ho.ne.jp/oka_tosho/drag_drop1/drag_drop1.htm
を参考にやっとスクロール地図（スクロールマップ）っぽいものができるようになりました。

外からリンクするページ（ページ本体）
————————————————————————————————-
<html>
<head>
<META http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>
<META http-equiv=”Content-Style-Type” content=”text/css”>
</head>
<body>
<center><iframe src=”scroll.htm” style=”width:900; height:480;” frameborder=0 ></iframe></center>
</body>
</html>
————————————————————————————————

インラインフレーム内のページscroll.htmの内容は
————————————————————————————————
<html>
<head>
<meta http-equiv=”Content-Language” content=”ja”>
<META http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>
<META http-equiv=”Content-Style-Type” content=”text/css”>
<script language=”JavaScript” src=”https://kimassi.net/mapscroll3/scroll.js”></script>
<style type=”text/css”>
<!–
.dragme{position:relative;}
–>
</style>
</head>
<body>
<img src=”yasuimisemap.gif” width=”3059″ height=”3421″ class=”dragme”>
</body>
</html>
——————————————————————————————-
“yasuimisemap.gif” width=”3059″ height=”3421″ の内容は地図の画像の名称，大きさに合わせて変更します。
“https://kimassi.net/mapscroll3/scroll.js”はscroll.jsのある位置のアドレスに合わせて変更します。

scroll.jsの内容は
——————————————————————————————-
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX – x : tx + event.clientX – x;
dobj.style.top = nn6 ? ty + e.clientY – y : ty + event.clientY – y;
return false;
}
}
function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? “HTML” : “BODY”;
while (fobj.tagName != topelement && fobj.className != “dragme”)
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className==”dragme”)
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function(“isdrag=false”);
——————————————————————————–
です。

できた今回導入したスクロール地図のサンプルはhttps://kimassi.net/mapscroll3/mapscroll.htmlです。
一応スクロールバーも利用できるようにしておきました。本当は地図画像の端っこに行くと，それ以上はスクロールしないようにすれば良かったのですが，スキル不足で，そこまではできませんでした。とりあえずは現状で満足しています。

次は，地図上からリンクを入れました。上記の例で言うとmapscroll.htmlと同じフォルダに地図の画像を設置してホームページビルダーのイメージマップ編集で通常通りリンクを入れれば良いです。

地図にマウスを乗せると説明文が入るというのにしたいということで，いろいろ調べてみました。
なかなか方法が見つからなかったのですが，意外と基本的な方法で実現しました。
ホームページビルダーの画像編集のイメージマップの編集を利用してエリアを指定して地図からのリンクを入れます。タイトルというボタンをクリックして説明文を入れてＯＫボタンを押すだけです。極めて簡単にできました。タイトルに説明文を入れておけば後からリンク先を変更する時にも簡単に修正できます。

WordPressのリンクの表示順序の変更

コメントを残す

きまっし金沢の雑記帖でサイドバーのリンクの表示順が気に入らなくなって，いろいろ検索したら，My Link Orderというプラグインを使えば良いとわかりました。
http://wordpress.org/extend/plugins/my-link-order/
でダウンロードして解凍します。
/wp-content/plugins/にフォルダごとアップロードした後プラグインMy Link Orderを有効にします。
でも，このままでは正常に動作しなかったので再び検索したら，sidebar.phpを書き換えてアップロードしなければいけないということでした。
/wp-content/themes/*********/ （ **********はサイトによって違う）
にあるsidebar.phpを書き換えます。
<?php get_links_list(); ?>を
<?php wp_list_bookmarks(‘orderby=order&category_orderby=order’); ?>
に書き換えてアップロードすると正常に動作するようになりました。

並び替えの操作は管理画面のリンクの項目でMy Link Orderを選択して並べたい項目を選びます。リンクはドラッグで順番を並び替えClick to Order Linksのボタンをクリックして完了です。

地図にマウスを乗せると画像が表示する

コメントを残す

兼六園の地図と金沢城の地図は名所の文字をクリックすると小さなウインドウが開いて画像と名前を表示するようになっていたのですが，地図を変更したついでに地図上の名所の文字にマウスを乗せるだけで，その名所の画像が出るように変えようと，試行錯誤してみました。

最初，地図は名所の文字をクリックすると小さなウインドウが開いて画像と名前を表示するようにしていたのですが，これはホームページビルダーのイメージマップの編集を利用してリンクを作成してから，ちょっと書き換えます。
ホームページビルダーのイメージマップの編集を利用してkyokusui.htmlというページにリンクするようにすると
<IMG src=”kenrokumei.gif” alt=”兼六園の園内の地図” width=”893″ height=”800″ border=”0″ ” >
という行が<IMG src=”kenrokumei.gif” alt=”兼六園の園内の地図” width=”893″ height=”800″ border=”0″ ” usemap=”#kenrokumei”>
という行に書き換えられ
<MAP name=”kenrokumei”>
<AREA href=”https://kimassi.net/kenrokumei/kyokusui.html” target=”_blank” shape=”rect” coords=”655,459,712,482″>
<AREA shape=”default” nohref>
</MAP>
という文が挿入されます。
新しい小さなウインドウを開く場合はＪａｖａスクリプトを利用するために</HEAD>より上の行に
<script language=”JavaScript”>
<!–
function opgazou(url,winname,size) { window.open(url,winname,size);
}
//–>
</script>
という文を挿入し
<MAP name=”kenrokumei”>
<AREA href=”https://kimassi.net/kenrokumei/kyokusui.html” target=”_blank” shape=”rect” coords=”655,459,712,482″>
<AREA shape=”default” nohref>
</MAP>
を
<MAP name=”kenrokumei”>
<AREA href=”#” onclick=”opgazou(‘https://kimassi.net/kenrokumei/kyokusui.html’,”,’width=240,height=220′);return false;” shape=”rect” coords=”655,459,712,482″>
<AREA shape=”default” nohref>
</MAP>
という具合に変更します。

次にマウスを地図上の文字にのせると小さい画像を表示するようにするには
<AREA href=”#” onclick=”opgazou(‘https://kimassi.net/kenrokumei/kyokusui.html’,”,’width=240,height=220′);return false;” shape=”rect” coords=”655,459,712,482″>
の部分を
<AREA href=”#” onMouseOver=”opgazou(‘https://kimassi.net/kenrokumei/kyokusui.html’,”,’width=240,height=220′);return false;” shape=”rect” coords=”655,459,712,482″>
に変更しました。これによってマウスを乗せることにより小さなウインドウが開いて画像と名前を表示するようになります。
でもポップアップブロッカーがオンになっていると表示されませんし，マウスを乗せる度に，新しいウインドウが開いて，閉じるには，ひとつずつ閉じないのといけないので面倒です。
そこでとりあえずマウスが離れるとウインドウが閉じるようにしようとしました。
<script language=”JavaScript”>
<!–
function opgazou(url,winname,size) { window.open(url,winname,size);
}
//–>
</script>
の部分にウインドウを閉じる命令を追加して
<script language=”JavaScript”>
<!–
function opgazou(url,winname,size) { window.open(url,winname,size);
}
function clgazou() { window.close();
}
//–>
</script>
にします。
<AREA href=”#” onMouseOver=”opgazou(‘https://kimassi.net/kenrokumei/kyokusui.html’,”,’width=240,height=220′);return false;” shape=”rect” coords=”655,459,712,482″>
の部分は
<AREA href=”#” onMouseOver=”opgazou(‘https://kimassi.net/kenrokumei/kyokusui.html’,”,’width=240,height=220′);return false;” shape=”rect” coords=”655,459,712,482″ onmouseout=”clgazou();”>
にしました。
ところがウインドウを閉じますかのコメントが表示されて，閉じるのボタンを押すと地図のページが閉じてしまいました。こりゃあかん！
これでは都合が悪いので，onmouseoutを使うのはやめて，新しく開いたウインドウが一定時間たつと自動的に閉じるようにしました。これでウインドウを閉じる必要が無くなります。
kyokusui.htmlの
<BODY>を
<BODY onLoad=”setTimeout(‘window.close()’,10000)”>
に変えると１０秒後に自動的に閉じるようになりました。５秒後に閉じるようにするには
<BODY onLoad=”setTimeout(‘window.close()’,5000)”>
にすれば良いです。

どちらにしても，ポップアップブロッカーがオンになっていると表示されないので，何か良い方法がないか調べてみるとＪａｖａスクリプトを使わずにタグを利用してマウスを乗せたときに画像が表示してマウスを離した時に画像が消える方法があることを知りました。

http://netneko.jp/homepage/textgazou.html
を参考に，いろいろ試行錯誤して遂に思い通りのページにすることができました。ただ，偶然に思い通りの動作するようになったので，実際にどういう文法でどういう動作をしているのかは理解していません。
まずスタイルシートを利用して地図の重要でない部分に画像を表示するスペースを設けて基本になる画像を表示させます。今回は地図にマウスを乗せると画像が表示しますよという説明文の画像を表示するようにしました。下記のwidth : 240px;height : 220pxが画像を表示する大きさで，top : 800px;left : 670pxは画像を表示する位置でwindow.gif は最初に表示する基本になる画像です。img1　は特に意識しないでそのまま使えば良いと思います。
幅２４０高さ２２０の大きさの画像の中に名所の画像と名所の名前や説明文も一緒に入れてしまえば良いです。
下記の文を地図を表示した行の後ろの行に挿入しておきます。
<DIV style=”width : 240px;height : 220px;top : 800px;left : 670px;
position : absolute;
z-index : 1;
visibility : visible;
” id=”Layer1″><span id=”img1″><img src=window.gif></span></DIV>
地図の上に基本になる画像が表示したと思います。
地図上のリンクの部分を
<AREA href=”#” onmouseover=”img1.innerHTML='<img src=kyokusui.jpg>'” onmouseout=”img1.innerHTML='<img src=window.gif>'” shape=”rect” coords=”655,459,712,482″>
に変更すればＯＫです。
実際には兼六園の地図で利用したのですがサクサクとてきぱきと表示されるし，ポッポアップ禁止の設定にしてあっても表示できるし満足しています。
https://kimassi.net/kenrokumei/index.html
久しぶりに投稿にタグ（<や>入りのソースファイル）を挿入したらタグが文字扱いにならなくて当惑したのですが，ＨＴＭＬ扱いでなくビジュアルモードで投稿すれば良かったのでした。なんでもすぐに忘れてしまって困ります。

MovableType 3.3でコメントが迷惑扱いされていた

コメントを残す

「石川の食　美味しいもの食べたい」「福井の食　美味しいもの食べたい」「おじさんのダイエット作戦」「ライオンドワーフ（うさぎ）の飼育記」「交通事故の賠償請求」「金沢のお葬式情報　父親の葬儀」はMovableType 3.3を使っているのですが，１０月より調子が悪くて，コメントを勝手に迷惑コメントに割り振られていました。自分のコメントも迷惑コメントになってしまう状態でした。ついさっき気づいて設定を変更しました。

せっかくコメントしていただいたのに，すぐに返事できなくてがっかりしました。