≪ カツのGIFアニメ HOME   サイトマップ


 ■ カツ流 〜 GIFアニメ素材の貼り付け方 @

  【カツ流 〜 GIFアニメ素材の貼り付け方@
   メニュー!】


   ■ はじめに!
   ■ GIFアニメ素材のお持ち帰り
   ■ GIFアニメ素材の貼り付け方
   ■ 素材にリンクを貼り付ける
   ■ あとがき

























































67×15 245b

















































67×15 245b
















































67×15 245b





























































67×15 245b





















67×15 245b

   ■ はじめに!

 2004/05/01
この日から「カツのGIFアニメ」は素材サイトとして運営を開始しました。今から思えば何の準備もせず、思い立ってすぐに気のみ気のままに始めて しまい、初めの頃の出来損ないHPに訪問してくださった方には大変ご迷惑をお掛けしたのではないかと、いまだに後悔しています。
タグの勉強と並行しながらHPを作っていきましたが、解らない事やうまくいかない事ばかりで何度も挫折しかけながらもなんとか今日までがんばっています。

ありがたい事に少しづつですが訪問していただける方が増えて来ています。その内訳は様々ですが、 自分のホームページに使う素材を探して管理人の方々にも訪れていただける様になりました。ベテランの方、初心者の方、様々です。
特に初心者の方(私を含めて)は、GIFアニメ素材をお持ち帰りになって、自分のホームページに素材を貼り付ける時に貼り付け方を忘れ「え〜っと??」と考え込んでしまい、お気に入りの素材を貼り付けるどころじゃなくなってしまう事ってありませんか? 私も、こんな事ばかりでした。(自分の素材が貼り付けられない(ToT)/~)

こんなトラブルから少しでも解決への手助けが出来れば!と、ここでは簡単ですが素材の 貼り付け方の解説をさせていただきますので、これから自分のHPを始めようと思っている方や、すでに始めている方も、どうぞ参考 までに覗いていってください。 あくまでカツ流 〜ですが…


   ■ GIFアニメ素材のお持ち帰り

はじめは、GIFアニメ素材のお持ち帰り方です。
お気に入りの素材を見つけたのに持ち帰り方が分からない? 訪れた素材屋さんには必ず説明がありますから こんな事にはならないでしょうが、ここはまず初心に返ってみましょう。

  Windows と McIntosh では少し違う操作の様です。
  Windows の場合。持ち帰りたい素材の上にマウスカーソルを重ねて〜

  「右クリック」→「名前を付けて画像を保存」→でお好きなフォルダに保存します。

  ちなみに McIntosh の場合は。お気に入りの素材の上にマウスカーソルを重ねて〜
  マウス長押し→画像を名前をつけて保存→でお好きなフォルダに保存するそうです。

自分のPCに保存の時、ファイル名は自由に変更してもOKですが、拡張子(ファイル名の後にある. gifと記述されている所です。私の素材はほとんど.gifです。)は変更してはダメです。 .gifで保存できていないと、GIFアニメが動かなくなってしまいます。


   ■ 保存する時によくあるトラブル

GIFアニメ素材を持ち帰って自分のHPに貼り付けて表示させたら「GIFアニメが動かない??」と言う問い合わせを受けます。 .gif の素材をダウンロードしたはずなのに、自分のPCには .bmp で保存されていて、(自分のPCで.jpg や .gif ではなく.bmp しか選べなくなってしまう) 表示させると「動かない??」素材になってしまっています。  (.gif で保存出来ないと動きません)
こんな時は、あなたのPCの「インターネットキャッシュ」がいっぱいになっている可能性大です。 「インターネットキャッシュ」とは、 簡単に説明すると、一度訪れた事のあるHPの表示した情報をPC内に記録しておいて、もう一度訪問した時にその記録を使って表示を 早くさせる、と言うものなのです。インターネットをしていれば必ず自分のPCの中に貯まっていきます。容赦なくどんどん どんどん…
この「インターネットキャッシュ」が貯まりすぎると、素材のお持ち帰りの時に「トラブル発生!」になります。 ダイヤルアップでの接続では有効だったこの機能も、最近はブロードバンド(ADSLや光回線)での接続の方がほとんどを占めて きてますので、大容量の高速接続ではこの機能はあまり意味の無い物になっている様です。

  「ツール」→「インターネット オプション」→「インターネット一時ファイル」の
  「ファイルの削除」で削除できます。

  最近のPCでは、「ツール」→「インターネット オプション」→「閲覧の履歴」→
  「削除」に変わっています。


例外もありますが、これでほとんどの場合は解決すると思います。インターネットキャッシュがたくさん貯まっていると削除に少し時間がかかります。 こまめに削除する様に心掛けていれば安心ですね! ハードディスクに余裕のある方は[設定]ボタンで一時ファイルの記憶領域のサイズを増やすのもひとつの手です。


   ■ GIFアニメ素材の貼り付け方

さて、本題のGIFアニメ素材の貼り付け方です。タグの基本が習得されているという前提で解説を進めさせてもらいます。
HP上にGIFアニメ素材を表示させるには <img> タグを使います。 <body>〜</body>の間のGIFアニメ素材を表示させたい所に この <img> タグを使って表示させます。

タグを記述する前に、持ち帰ったGIFアニメ素材を自分のHP用サーバーにアップロードしておいてください。アップロードした 場所によってタグの記述が変わってきますのでどこにアップロードしたか覚えておきます。それでは順を追って説明していきます。

40×46 538b      <IMG src="img/inu01.gif" width="40" height="46">
inu01.gif

上の inu01.gif の素材を表示しているタグが右の赤く表示してあるタグです。パーツごとに解説していきましょう。
<IMG 〜 > この < 〜 > の中に呼び出す素材の情報や表示させる情報を記述します。そうです、「貼り付け」と言っていますが本当は「呼び出す」のです。

src="img/inu01.gif"   この " " の間に「呼び出す」ファイル名を記述します。ファイル名の前の / (スラッシュ)の前には、そのファイルがサーバーに保管されている場所を記述します。
「ファイルの保管されている場所」が最初は指定するのが分かりづらいのですが(私だけか?)理屈さえ解ってしまえば難しくはないです。 上のタグでは、img/inu01.gif と記述しています。 これは、サーバー上の img と言うフォルダの中にinu01.gif が置いてあるためです。 フォルダを使わずHTML ファイルをアップロードしてある場所にそのままGIFアニメ素材を置いてある場合は、inu01.gif だけの記述にします。フォルダを作ってその中に素材を置いてある時には、表示するファイル名の前にそのフォルダ名を指定するのです。
img と言うフォルダの中にある /inu01.gif と言うファイルを表示! こうなるワケです。 / (スラッシュ)は、〜の中にある、と言う意味だと覚えておけばいいと思います。 img と言うフォルダの中にまた img と言うフォルダ を作ってその中に置いてあるならば、img/img/inu01.gif と、〜の中にある / (スラッシュ)を増やしていけばいいのです。

サーバーの会社によっては、この中にURLで指定する場合もありますので、うまく行かない時はサーバー会社のヘルプを読んでみてください。

width="40"        このふたつは、HPに素材を表示させるサイズを指定します。 width="40"は、
height="46"       横幅。 height="46"は、高さ。 これも " " の間に数字で指定します。単位は
               ピクセルです。表示させるGIFアニメ素材のサイズに合わせて数字を指定します。GIFアニメ素材のサイズを確認する には、「素材を右クリック」→「プロパティー」で確認できます。基本的には同じサイズで 指定しますが、数字を変える事で拡大したり、縮小したりできます。この場合あまり綺麗に表示されません。やはり一番綺麗に表示さ せるなら、同じサイズで指定する事をおすすめします。
この「width」と「height」タグは、記述しなくてもHP上には表示されます。その場合は同じサイズ(プロパティーで指定してある 数値)になりますが、記述してあげた方がいいでしょう。記述が無いとPCが考えてから表示しますので、PCの負担を減らしてあげる 意味でも親切な事です。

これで素材(画像)GIFアニメ素材表示用のタグが出来上がりました。あとは自分のHPの好きな場所(表示させたい場所)に、このタグを記述すればOKです。

※ GIFアニメ素材表示用と解説していますが、画像全般の表示用タグですのでGIFアニメ素材だけでなく他の画像表示にも使えますので色々な画像表示にご利用ください。


   ■ 素材にリンクを貼り付ける

GIFアニメ素材の貼り付け方に続いて、素材にリンクを付ける方法も解説しましょう。
バナーにリンクを付けて、そのバナーをクリックするとリンクされたHPにジャンプする。HPに訪問するとあたりまえのように 使われています。上で紹介したの素材表示のタグと同じで、リンクするにも専用のタグがあります。

88×31 722b      <IMG src="img/banar-ani.gif" width="88" height="31">

上に表示されているのが「カツのGIFアニメ」のバナーです。右のタグを使って表示しています。このバナーをクリックすると 「カツのGIFアニメ」のトップページにジャンプする様にします。

     <A href="http://katus-gifani.sakura.ne.jp/" target="_blank"> </A>

上のタグが、リンク用のタグです。これもパーツごとに解説していきます。
<A 〜 > </A> この <A 〜 > </A> の中にリンクの情報や表示させる情報を記述します。おしりに付いている </A> は、ここまでが<A 〜 >で記述したリンクの範囲です。と、範囲の終了を意味します。
<A 〜 > この間 </A> に挟まれた文字や画像がリンクの対象になります。

src=" URL " この " " の間にジャンプ先の URL を記述します。

target="_blank" これは、リンク先のページを新しいウインドウで表示させるタグです。記述しなければ現在表示しているページで表示されます。

上のリンクタグの<A 〜 > </A>と、画像のタグ <IMG 〜 >を組み合わせタグを完成させます。
リンクタグ<A 〜 >この間に画像のタグ <IMG 〜 >を挟みます、</A> もうお解りですね!

     <A href="http://katus-gifani.sakura.ne.jp/" target="_blank">
     <IMG src="img/banar-ani.gif" width="88" height="31"> </A>


こうなります。画像のタグの代わりに文字を挟めば挟んだ範囲の文字がリンクされた文字となります。

88×31 642b HP・メール素材 カツのGIFアニメ HOMEへ      ←バナーをクリックしてみてください。上のタグで表示してますので「カツのGIF
               アニメ」のトップページが別窓で開きます。お気づきですか? バナーの周りに青い枠があります。 画像リンクをすると枠が付いてしまいます。気になる時は border="0" <IMG 〜 > タグに書き込めば枠は消えます。

     <A href="http://babu.com/~katus-gani/" target="_blank">
     <IMG src="img/banar-ani.gif" width="88" height="31" border="0"> </A>


※ 2016年8月現在の最新PCでは、バナー周りの青い枠は表示されない仕様に変更されたようです。

88×31 642b HP・メール素材 カツのGIFアニメ HOMEへ      消えました。これで完成です!


   ■ あとがき

いかがでしたか?わかりやすく説明出来ていたでしょうか。できるだけ解りやすく説明したつもりです。 
必要最低限のタグで説明してますので、実際にはもっとタグの種類はあります。付け足せば役に立つタグもあります。 もっと知りたい、勉強したい方はネット上に様々な解説サイトが存在しますので検索してみてください。たくさんヒットします。

長々とお付き合いありがとうございました。

こちらのページも参考にしてくださいね!

 カツ流〜 素材の貼り付け方!A
 カツ流〜 素材(GIFアニメ)の作り方! 





51×44 642b HP・メール素材 カツのGIFアニメ HOMEへ
KATU`S GIF ANIMATION
Copyright©2004 katu All right reserved.