ＧＴ－ＯＮＥ　楽天タグ講座　パイプ奮闘記

【飾付VOL１０】

初心者のためのＨＰの飾りつけ教室VOL.10


【プチ講座】オリジナルアニメポインターの作り方（１）はこちらから


■【ホームページ上のカーソルを変えてみよう】カーソルアイコンのダウンロード＆アップロード
    さあ！みなさん飾り付けはうまくいっていますか！ 今回は、私のページでもところどころに表示していますが、カーソルアイコンについてお話していきましょうか！
    楽天広場でカーソルアイコンを表示するには、他のブラウザに表示する方法とは少し異なります。
    直接、編集ページにSTYLEで書き込まないといけません。
    カーソルのアイコンは、素材屋さんからDL（ダウンロード）してそれをアップロードしなければWEB上では表示できません。
    また、画像のように見えますが、アイコン独自の｢拡張子」を持っています。
    この、DLとアップロードの仕方については、あとで、詳しくお話しましょう。
    まずは、DLもアップロードも必要ない、カーソルの形状を変えることからやってみましょう！(￣m￣*)V
    では！始まり始まり・・・・（*^_^*）



    ★　カーソルの形状を変えてみる　★

    カーソルの形状を変える事をやってみましょう。
    まずは、テキストの部分だけカーソルの形状を変えて見ましょう。

    <font style="cursor:wait;">　これが砂時計です。</font>
    <font style="cursor:help;">　これは？マーク入り⇒です。</font>

    お判りでしょうか？(*^^)v
    ではいくつか属性のタグを乗せてみましょう。
    各属性にカーソルを当てて見て下さい。カーソルの形状が出ます。

    　　crosshair　　　　十字型形状
    　　pointer　　　　　アンカー上にある事を示します形状
    　　move　　　　　　対象が移動可能の形状
    　　e-resize　　　　 右方向にリサイズ可能を示す形状
    　　ne-resize　　　　右上方向にリサイズ可能を示す形状
    　　nw-resize　　　 左上方向にリサイズ可能を示す形状
    　　n-resize　　　　 上方向にリサイズ可能を示す形状
    　　se-resize　　　　右下方向にリサイズ可能を示す形状
    　　sw-resize　　　 左下方向にリサイズ可能を示す形状
    　　s-resize　　　 　下方向にリサイズ可能を示す形状
    　　w-resize　　　　 左方向にリサイズ可能を示す形状
    　　text　　　　　　文字を範囲指定できることを示す形状

    ここから下は、Internet Explorer ６　しか表示できません。

    　　all-scroll　　　　ページが上下左右スクロール可能を示す形状
    　　col-resize　　　 左右にリサイズ可能を示す形状
    　　no-drop　　　　ドラッグした対象がドロップできない領域を示す形状
    　　not-allowed　　 要求されたアクションが動作しない事を示す形状
    　　progress　　　　バックグラウンドで処理が行われている事を示す形状
    　　row-resize　　　上下にリサイズ可能を示す形状
    　　vertical-text　　縦書きテキストを範囲指定できることを示す形状
    　　url(～URL～/elogo.cur)　　拡張子が「cur」のみで表示します。
    　　この「elogo」は一度アップロードしないと表示しません。

    ページ全体、またはボックスの中全体の時は、編集ページの一番上に貼り付けます。
    このようにします。

    <font style="cursor:wait;">
    ここが本文とします。
    どんどん改行して書いていきます。
    </font>

    一番下に</font>を忘れないように！
    このタグは、fontにSTYLEで属性を指定していますから、テキストやスペースがないところでは、形状が出ないことをご承知おきください。
    FONTだけではなく他のタグで表示することも出来ます。
    <DIV>　　<UL>　　<CENTER>　などがあります。

    また、楽天でページすべてにカーソルの形状を出したい時には、そのページに背景色や背景画像を指定して、そのタグの中に、　style="cursor:wait;"　を入れ込みます。
    日記では、このやり方が出来ますが、各フリーページでは個々に背景色や背景画像が指定できません。
    しかし、TABLE　のタグで背景画像をフリーページに指定しその中に入れることは出来ます。
    私のプチ講座にそれは紹介しております。興味のある方は、いってみてくださいませ。



    ★　カーソルアイコンの素材について　★

    「カーソルアイコン」の素材は実にたくさん提供されています。
    皆さんも「カーソルアイコン　ホームページ素材」などで検索してみてください。
    たくさんの素材屋さんが見つかると思います。
    一つ紹介しておきましょう。http://www.asahi-net.or.jp/~cb9i-kn/index.htm
    ここのサイトを使いまして、あとでダウンロードの仕方を説明します。

    まず、皆さんに知って置いていただきたいのは、カーソルアイコン素材は、画像のファイルとは違うということです。
    画像はＪＰＧ．ＧＩＦ．ＰＮＧ．ＢＭＰ．などの「拡張子」で表されます。
    しかし、カーソルアイコンの「拡張子」はＡＮＩ．ＣＵＲ．などです。
    画像とはまったく別なものです。そのことをまずご理解ください。
    素材屋さんからのＤＬも、普通の画像のＤＬと違います。
    ほとんどが　exe. ファイルになっています。圧縮ファイルです。
    素材屋さんのところに表示してある雛形はみなＧＩＦなどに変換してあります。
    ですから、画像をＤＬするときのように右クリックで、「名前を付けて保存」してもカーソルアイコンとしては使えません。
    それはただの　GIFの「拡張子」を持った画像だからです。
    お判りでしょうか・・・・・お願いわかって(-_-;)


■【楽天的カーソルアイコンの使い方】「カーソルアイコン」のDLからUPまで！



★　カーソルアイコンのＤＬ（ダウンロード）　★

    先にも述べましたように素材屋さんからのＤＬは、普通の画像のＤＬと違います。 ほとんどが　exe. ファイルになっています。圧縮ファイルです。
    では、具体的にやって見ましょうか。

    一つ例を出して、サイトからダウンロードしてみましょう。
    http://www.asahi-net.or.jp/~cb9i-kn/index.htm
    ↑このサイトでカーソルアイコンをＤＬして見ましょう。

    まずは、アニメカーソルその１　アニメカーソルその２　とありますが、それをクリックしますと、ＤＬ用のページに飛びます。
    そうすると雛形がいっぱいありますが、それはみなＧＩＦ画像です。
    それを右クリックで保存しても、カーソルとしては使えません。
    画像の右端に「ファイル名」＊＊＊＊＊.exe　というのがあり、圧縮ファイルへのリンクが張ってあります。
    それをクリックしますと、「ファイルのダウンロード」というフロートパネルが出てきます。
    「保存」を押しますと、また、「名前を付けて保存」というパネルが出てきます。
    そこでデスクトップにでも保存先を指定し保存します。

    そうしますと、デスクトップにレンジのアイコンが出来ると思います。
    それがカーソルアイコンの入っている圧縮ファイルです。自動解凍になっていますから
    そのアイコンをダブルクリックしますと、また、フロートパネルが出てきまして、解凍先を聞いてきます。
    「参照」からマイドキュメントなどを選びまして、「ＯＫ」を押します。
    そうすれば、カーソルアイコンが指定したところに現れるはずです。

    DLしたアイコンをダブルクリックしてみてください、「表示できません」といってくると思います。
    それがカーソル用のアイコンなのです。

    　 あとは、カーソルアイコンの「拡張子」である　ANI.　や　CUR.　をアップできるサーバーにそのアイコンを指定しまして、アップロードすればいいのです。

    ＤＬしたこの「カーソルアイコン」はそのままですと貴方のＰＣでしか、表示することが出来ません。
    みなさんのWEB画面で見てもらうには、この「カーソルアイコン」のファイルをＷＥＢ上に、「アップロード」しないといけません。

    どういう事かといいますと、みなさんは、楽天の「画像の倉庫」から自分のフォルダにある画像を、楽天のサーバーで、ＷＥＢ上に乗っけていますよね。ＷＥＢ上に画像をアップしているから、みなさんに、貴方の画像が見てもらえるのです。しかし、楽天には画像をアップする「アップローダー」しかありません。
    ANIやCURの拡張子をアップすることは出来ないのです。



    ★　「カーソルアイコン」をアップするための無料サイトの登録　★

    じゃあどうするかといいますと、「カーソルアイコン」の拡張子である　ANIやCURをアップできる、他の無料のサーバーを登録しまして、
    そこから、「カーソルアイコン」のＵＲＬを貰い、楽天上からリンクを貼り、表示するのです。
    簡単に言えば、楽天上に「カーソルアイコン」を表示するために、他のサーバーに間借りするのです。

    では、具体的に他のサーバーを紹介しましょう。
    楽天サイトにも繋がりの深い関連会社の「infoseek ISWEB」です。

    http://isweb.www.infoseek.co.jp/Icont?pg=iw_top.html&sv=IW

    他にも無料のＨＰサイトは、たくさんあります。
    私の【アップロードとは？】のページに２～３サイトを紹介しておりますから、興味のある人はいって見てください。



    ★　「カーソルアイコン」をアップロードしてみよう　★

    さあ！みなさん登録はできましたでしょうか？

    では、「infoseek ISWEB」のトップページの左上に｛iswebライト管理画面｝というのがあると思います。
    それをクリックしますと、ログイン画面に飛ぶと思います。
    IDとパスワードを入れまして、ログインします。左に管理メニュー というのがありますね。そこの一番上に、「ファイルマネージャー」というのがあると思います。
    これが、「アップローダー」です。ＷＥＢ上に「画像」「ＨＴＭＬテキスト」「音楽」「カーソルアイコン」等などを、アップロードしてくれます。

    一番下に　●　ファイルのアップロード　というのがあると思います。それがアップローダーです。
    楽天の画像のアップローダーと同じものです。一度に５つのファイルがアップロードできます。

    [参照］をクリックしますと、「ファイルの選択」というフロートパネルが出てきます。
    貴方がＤＬした「カーソルアイコン」のファイルを出しまして、アップするアイコンをクリックで指定して「開く」を押します。
    ファイルマネージャーの「ファイル１」にファイル名が入ります。
    その下にある、[アップロード開始]をクリックしますと、アップロードは終了です。

    ファイルマネージャーの上に「ファイルの一覧の表」がありますが、そこにアップした、「ファイル名」が載っているはずです。

    例えば私の場合では、「manma04.ani」という風に！
    あとは、貴方の「infoseek ISWEB」のＵＲＬアドレスにこの「カーソルアイコン」のファイルの名前を継ぎ足せばいいのです。

    例えば、私の「infoseek ISWEB」のＵＲＬアドレスは、

    http://gtone.hp.infoseek.co.jp/

    とします。これに先ほどアップした、「カーソルアイコン」ファイルの名前、「manma04.ani」 を入れます。
    そうすると、こうなりますね。

    http://gtone.hp.infoseek.co.jp/manma04.ani

    これが、アップロードした「カーソルアイコン」ファイルのＵＲＬになります。
    お分かりでしょうか・・・・(-_-;)・・・お願い分かって・・・・・（*^_^*）


    ★　楽天にカーソルアイコンを貼り付けて見ましょう　★

    URLの出し方は分かりましたか？
    まずは、上で紹介しましたように　FONT　にSTYLEシートでアイコンを表示してみましょう！

    <FONT style="cursor:url(ここにカーソルアイコンのURL)">マンマちゃんを出してみましょう！</FONT>

    出ているでしょうか・・・・マンマちゃん！(￣m￣*)V



      日記の中にアニメーションカーソルなどを入れるには、ＴＡＢＬＥなどを使ってＳＴＹＬＥで指定します。
      ↓このように書いています。
      ------------------------------------------------
      <TABLE ALIGN="CENTER" BORDER="0" WIDTH="100%" HEIGHT="300" BGCOLOR="#E4FCFB" style="cursor:url(http://ここにアニメポインターのＵＲＬ/butasan.ani);"><TR><TD ALIGN="left" valign=top><UL>
      ここに本文を書きます。
      ＴＡＢＬＥが判るようにＢＧＣＯＬＯＲ（背景色）を入れてあります。
      高さ（ＨＥＧＨＴ）は３００ＰＸにしています。
      </UL></TD></TR></TABLE>
      ------------------------------------------------

      　



【飾りつけ教室　ＭＥＮＵ】にもどる。





© Rakuten Group, Inc.