GT-ONE 楽天タグ講座 パイプ奮闘記

【飾付VOL10】

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


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


【ホームページ上のカーソルを変えてみよう】カーソルアイコンのダウンロード&アップロード
    さあ!みなさん飾り付けはうまくいっていますか! 今回は、私のページでもところどころに表示していますが、カーソルアイコンについてお話していきましょうか!
    楽天広場でカーソルアイコンを表示するには、他のブラウザに表示する方法とは少し異なります。
    直接、編集ページに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 6 しか表示できません。

      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
    ここのサイトを使いまして、あとでダウンロードの仕方を説明します。

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



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



★ カーソルアイコンのDL(ダウンロード) ★

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

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

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

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

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


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

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

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



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

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

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

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

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



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

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

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

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

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

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

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

    例えば、私の「infoseek ISWEB」のURLアドレスは、

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

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

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

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



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

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

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

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



      日記の中にアニメーションカーソルなどを入れるには、TABLEなどを使ってSTYLEで指定します。
      ↓このように書いています。
      ------------------------------------------------
      <TABLE ALIGN="CENTER" BORDER="0" WIDTH="100%" HEIGHT="300" BGCOLOR="#E4FCFB" style="cursor:url(http://ここにアニメポインターのURL/butasan.ani);"><TR><TD ALIGN="left" valign=top><UL>
      ここに本文を書きます。
      TABLEが判るようにBGCOLOR(背景色)を入れてあります。
      高さ(HEGHT)は300PXにしています。
      </UL></TD></TR></TABLE>
      ------------------------------------------------

       




【飾りつけ教室 MENU】にもどる。






Copyright (c) 1997-2020 Rakuten, Inc. All Rights Reserved.