ポインタで差をつけよう！
ふつう、Windowsのポインタが初期設定のままであれば、一般的なブラウザでマウスをリンクのところへ当てると、矢印から人差指を伸ばした右手のポインタに換わります。それを、たとえば右図のような｢ファック･サイン｣、あるいは｢フライング･ライター｣や｢水着姿｣などのアニメーション･ポインタへ変更することが可能です(ためしに各下線部分へマウスを当ててみて下さい)。また、こうして一つ一つのポインタをばらばらに設定するのではなく、ページ全体でまとめて指定することも出来ます。
ポインタの変更 そこで、今月の｢ウィンドウズ裏技集｣でご紹介するのが、ブラウザのリンク選択ポインタを変更する具体的な方法です
ただし、インターネット･エクスプローラのみでしか機能せず、ネットスケープなどでは設定したはずのポインタが表示されませんので、ご注意ください順序として、本題へ入る前にまずWindows自体のポインタの変更のし方からご紹介しておきます。これはいたって簡単で、｢コントロール パネル｣→｢マウス｣→｢ポインタ｣から変更したい任意のポインタを選び、｢参照(B)｣をクリックするだけです。もちろん、前もって用意しておかない限り、いくら｢参照(B)｣をクリックしても｢ファック･サイン｣のポインタが見つかるわけではありません。ポインタの作成方法が知りたいかたへは、とりあえず｢Microangelo｣というツールをご紹介しておきます。彼らのホームページを開けて、ツールバーの左から２番目の｢Download Trial Version｣→Version: 5.59の｢Download Now!｣→｢Download Now｣と進み、ダウンロードが終わったトライアル･バージョンをさっそくインストールして下さい。そして、ポインタやアイコンの作成や編集はいくつかあるツールの中から｢Microangelo Studio｣を立ち上げて行います。ちなみに、トライアル･バージョンの次のバージョン６は、今年の暮に発売される次期WindowsであるVistaへ全面的に対応している優れものです。
では、いよいよ本題へ入りますが、ＨＴＭＬ(ハイパーテキスト)でポインタの指定は｢スタイルシート(CSS)｣の機能を応用します。まず、次が冒頭の｢ファック･サイン｣の部分の記述例で、指定する対象が単語でなく文節全体であれば<span>タグの代わり<div>タグを使っても効果は同じです。また、下線が必要でなければ<u>タグはいりません。
｢<span style="cursor:url('w02c.cur')"><u>ファック･サイン</u></span>｣
いっぽう、文書全体で同じポインタが指定したいという場合、スクリプトはＨＴＭＬ文書の“ボディー”と呼ばれる本文の部分(<body>と</body>の間)だけでなく、ヘッダ”と呼ばれる最初の部分(<head>と</head>の間)へも次のように書き込みます。
<head>
<style type="text/css">
.pointer{cursor:url('w02c.cur');}
</style>
</head>
そして、本文のポインタを指定したい部分へ次のように書き込むと、最初の例とまったく同じ効果が獲られるわけです。ここで重要なことは、ヘッダ部とボディー部のスクリプトで｢pointer｣という指定を変更するなら、両方が同じ名前でないと機能しません。
｢<span class="pointer"><u>ファック･サイン</u></span>｣
上記のどちらの例であれ、｢../../images/cursor1.cur｣の部分へは、いうまでもなく指定したいポインタのURLをご記入ください。たとえば、｢../../images/cursor1.cur｣の代わり｢http://www.cybersaizensen.com/images/cursor1.cur｣と記入すると、この｢ハリウッド最前線｣のサイト内から直接｢ファック･サイン｣をご使用いただける他、同じく｢http://www.cybersaizensen.com/images/cursor2.ani｣なら｢フライング･ライター｣、｢http://www.cybersaizensen.com/images/cursor3.ani｣なら｢水着姿｣のアニメーション･ポインタとなります。
なお、上記の実例２つを比べると、後者はスクリプトをわざわざヘッダ部とボディー部へ分割し、一見面倒そうですが、本文中のポインタを指定したい箇所が増えれば増えるほど、その効率の良さはおわかりいただけることでしょう。加えて、実際にポインタを指定するとなれば、そこへリンクが発生したりフォントなども同時に指定するはずなので、どちらのパターンでいくかはそういった他の要素との絡みもあるわけです。
したがって、とりあえずＨＴＭＬ作成ツールで作ったご自分のホームページをWindowsのメモ帳などで開き、すでに｢スタイルシート(CSS)｣(つまり<style>タグや<span>タグ)が使われている箇所へ改造を施すのも一手かもしれません。ちなみに、スクリプトの中で｢cursor:hand｣という部分は、すべて｢cursor:url('ポインタのURL')｣へ変更が可能です。あとはご自分でいろいろと試してみて下さい。試行錯誤を続けるうち、すぐに核心が見えてくるでしょう。
＊興味があるかたは、｢Yokochinのハイパーテキスト･マニュアル｣の｢スタイルシート(CSS)｣も、ご参照いただけます。
|
お断り