■ はじめに！
2004/05/01
この日から「カツのＧＩＦアニメ」はGIFアニメ素材サイトとして運営を開始しました。
今から思えば何の準備もせず、思い立ってすぐ気のみ気のままに始めてしまったので、初めの頃の出来損ないＨＰに訪問してくださった方には大変ご迷惑をお掛けしたのではないかと、いまだに後悔しています。
タグの勉強と並行しながらこのサイト「カツのＧＩＦアニメ」を作っていきましたので、解らない事やうまくいかない事ばかりで何度も挫折しかけながらもなんとか今日までがんばっています。
ありがたい事に少しづつですが訪問していただける方が増えて来ています。その内訳は様々ですが、自分のホームページに使う素材を探している管理人の方々にも訪れていただける様になりました。ベテランの方、初心者の方、様々です。
特に私を含めて初心者の方は、GIFアニメ素材をお持ち帰りになって、自分のホームページに素材を貼り付ける時に「え～っと？？」と考え込んでしまい、お気に入りの素材を貼り付けるどころじゃなくなってしまう事ってありませんか？
私も、こんな事ばかりでした。（自分の素材が貼り付けられない(ToT)/~）
「こんなトラブルから少しでも解決への手助けが出来れば！」と、このページでは簡単ですが素材の
貼り付け方の解説をさせていただきますので、これから自分のＨＰを始めようと思っている方や、すでに始めている方も、どうぞ参考
までに覗いていってください。 あくまでカツ流 ～ですが…
■ ＧＩＦアニメ素材のお持ち帰り
はじめは、GIFアニメ素材のお持ち帰り方です。
お気に入りの素材を見つけたのに持ち帰り方が分からない？ 訪れた素材屋さんには必ず説明がありますから
こんな事にはならないでしょうが、ここはまず初心に返ってみましょう。
Windows と McIntosh では少し違う操作の様です。
Windows の場合。持ち帰りたい素材の上にマウスカーソルを重ねて～
「右クリック」→「名前を付けて画像を保存」→でお好きなフォルダに保存します。
ちなみに McIntosh の場合は。お気に入りの素材の上にマウスカーソルを重ねて～
マウス長押し→画像を名前をつけて保存→でお好きなフォルダに保存するそうです。
自分のPCに保存の時、ファイル名は自由に変更してもＯＫですが、拡張子（ファイル名の後にある. gifと記述されている所です。私の素材はほとんど.gifです。）は変更してはダメです。
.gifで保存できていないと、ＧＩＦアニメが動かなくなってしまいます。
■ 保存する時によくあるトラブル
GIFアニメ素材を持ち帰って自分のＨＰに貼り付けて表示させたら「ＧＩＦアニメが動かない？？」と言う問い合わせを受けます。
拡張子.gif のGIFアニメ素材をダウンロードしたはずなのに、自分のＰＣには .bmp で保存されてしまっていて、（ダウンロードする時に.bmp しか選べなくなってしまう）
気が付かず自分のHPで表示させると「動かない？？」素材になってしまっています。（.gif で保存出来ないと動きません）
こんな時は、あなたのＰＣの「インターネットキャッシュ」がいっぱいになっている可能性が大きいです。「インターネットキャッシュ」とは、
一度訪れたＨＰの表示した情報をＰＣ内に記録しておいて、もう一度訪問した時にその記録を使って表示を
早くさせる、と言うものなのです。インターネットをして色々なページを見ていれば必ず自分のＰＣの中に「インターネットキャッシュ」が貯まっていきます。容赦なくどんどん
どんどん…
この「インターネットキャッシュ」が貯まりすぎると、GIFアニメ素材のお持ち帰りの時に「トラブル発生！」になります。
ダイヤルアップでの接続では有効だったこの機能も、最近はブロードバンド（ＡＤＳＬや光回線）での接続の方がほとんどを占めて
きてますので、大容量の高速接続ではこの機能はあまり意味の無い物になっている様です。
「ツール」→「インターネット オプション」→「インターネット一時ファイル」の「ファイルの削除」で削除できます。
最近のPCでは、「ツール」→「インターネット オプション」→「閲覧の履歴」→「削除」に変わっています。
例外もありますが、これでほとんどの場合は持ち帰ったGIFアニメ素材が動かない問題は解決すると思います。インターネットキャッシュがたくさん貯まっていると削除に少し時間がかかります。こまめに削除する様に心掛けていれば安心ですね！
新しいPCではインターネットを終了するたびにインターネットキャッシュを削除する設定もあるみたいですからこれを利用すれば問題はありませんね。
■ ＧＩＦアニメ素材の貼り付け方
さて、本題のＧＩＦアニメ素材の貼り付け方です。
タグの基本が習得されているという前提で解説を進めさせてもらいますね。
ＨＰにＧＩＦアニメ素材を表示させるには <img> タグを使います。
<body>～</body>の間のＧＩＦアニメ素材を表示させたい所に
この <img> タグを使って表示させます。
タグを記述する前に、持ち帰ったＧＩＦアニメ素材を自分のHP用サーバーにアップロードしておくのを忘れないでください。
アップロードした場所によってタグの記述が変わってきますのでどこにアップロードしたか覚えておきます。
私の場合素材屋さんを運営していてたくさんのGIFアニメ素材や写真など表示させたい素材がありますので「img」と言うフォルダを作ってこのフォルダの中に
素材を格納しています。
これからの解説に「img」が出てきますので覚えておいてくださいね。
それでは順を追って説明していきます。
inu01.gif
<IMG src="img/inu01.gif" width="40" height="46">
上の犬「inu01.gif」 の素材を表示させているタグが下の赤く表示してあるタグです。
このタグを記述することでHPに素材を表示させることができます。パーツごとに解説していきましょう。
<IMG ～ >
この
< ～ >
の中に呼び出す素材の表示させる情報を記述します。そうです、「貼り付け」と言っていますが本当は「呼び出す」のです。
src="img/inu01.gif"
この " " の間に「呼び出す」ファイル名を記述します。
ファイル名の前にある / （スラッシュ）の前には、そのファイルが保管されている場所を記述します。
最初は「ファイルの保管されている場所」を指定するのが分かりづらいのですが（私だけか？）理屈さえ解ってしまえば難しいことはないです。
上のタグでは、img/inu01.gif と記述しています。
これは、サーバー上の img と言うフォルダの中にinu01.gif
が置いてあるからです。
フォルダに入れずHTMLファイルと同じ場所にＧＩＦアニメ素材を置いた場合は、inu01.gif だけの記述にします。フォルダの中に素材を置いた場合には、表示するファイル名の前に/ （スラッシュ）を付けてそのフォルダ名を指定します。
img と言うフォルダの中にある
inu01.gif と言うファイルを表示したください！となるワケです。
/ （スラッシュ）は、～の中にある、と言う意味だと覚えておけばいいと思います。
img と言うフォルダの中にまた img と言うフォルダ
を作ってその中に置いてあるならば、img/img/inu01.gif と、～の中にある
/ （スラッシュ）を増やしていけばいいのです。
サーバー会社によっては、ＵＲＬで指定する場合もありますので、うまく行かない時はサーバー会社のヘルプを読んでみてください。
width="40"・height="46"
このふたつは、ＨＰ上に素材を表示させるサイズを指定します。
width="40"は、素材の横幅。height="46"は、素材の高さ。
これも " " の間に数字で指定します。単位はピクセルです。
表示させるＧＩＦアニメ素材の元サイズに合わせて数字を指定します。ＧＩＦアニメ素材のサイズを確認する
には、「素材を右クリック」→「プロパティー」で確認できます。基本的には同サイズで指定しますが、数字を変える事で拡大したり、縮小したりできます。この場合あまり綺麗に表示されません。やはり一番綺麗に表示さ
せるなら、同じサイズで指定する事をおすすめします。
この「width」と「height」タグは、記述しなくてもＨＰ上には表示されます。その場合は元のサイズ（プロパティーで指定してある
数値）になりますが、記述はしてあげた方がいいでしょう。記述が無いとＰＣが考えてから表示しますので、ＰＣの負担を減らしてあげる
意味でも親切な事です。
これで素材（画像）ＧＩＦアニメ素材表示用のタグが出来上がりました。あとは自分のＨＰの好きな場所（表示させたい場所）に、このタグを記述すればＯＫです。
※ ＧＩＦアニメ素材表示用と解説していますが、画像全般の表示用タグですのでＧＩＦアニメ素材だけでなく他の画像表示にも使えますので色々な画像表示にご利用ください。
■ 素材にリンクを貼り付ける
ＧＩＦアニメ素材の貼り付け方に続いて、表示した素材にリンクを付ける方法も解説します。
バナーにリンクを付けて、そのバナーをクリックするとリンクされたＨＰにジャンプする。ＨＰに訪問するとあたりまえのように
使われています。上で紹介した素材を表示するタグと同じで、リンクするにも専用のタグがあります。
<IMG src="img/banar-ani.gif" width="88" height="31">
上に表示されているのが「カツのＧＩＦアニメ」のバナーです。下のタグを使って表示しています。このバナーをクリックすると
「カツのＧＩＦアニメ」のトップページにジャンプする様にします。
<A href="http://katus-gifani.sakura.ne.jp/" target="_blank"> </A>
上のタグが、リンク用のタグです。これもパーツごとに解説していきます。
<A ～ > </A>
この
<A ～ > </A>
の中にリンクの情報や表示させる情報を記述します。
おしりに付いている
</A> は、ここまでが<A ～ >で記述したリンクの範囲です。と、範囲の終了を意味します。
<A ～ > この間 </A>
に挟まれた文字や画像がクリックされるリンクの対象になります。
src="
URL
"
の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>
こうなります。画像の代わりに文字を挟めば挟んだ文字がリンクされた文字となります。
バナーをクリックしてみてください。上のタグを使ってで表示してますのでクリックすると「カツのＧＩＦアニメ」のトップページが別窓で開きます。
もしかしてバナーの周りに青い枠が付いてしまっていませんか？使っているエクスプローラーによっては画像リンクをすると枠が付いてしまう場合があります。
気になる時はborder="0"を<IMG ～ >
タグに書き込めば枠は消えます。
<A href="http://katus-gifani.sakura.ne.jp/" target="_blank">
<IMG src="img/banar-ani.gif" width="88" height="31" border="0"> </A>
※ 2016年8月現在の最新PCでは、バナー周りの青い枠は表示されない仕様に変更されたようです。
消えました。これで完成です！
■ あとがき
いかがでしたか？わかりやすく説明出来ていたでしょうか。できるだけ解りやすく説明したつもりです。
必要最低限のタグで説明してますので、実際にはもっとタグの種類はあります。付け足せば役に立つタグもあります。
もっと知りたい、勉強したい方はネット上に様々な解説サイトが存在しますので検索してみてください。たくさんヒットします。
長々とお付き合いありがとうございました。
こちらのページも参考にしてくださいね！
■
カツ流～ 素材の貼り付け方！②
■
カツ流～ 素材（ＧＩＦアニメ）の作り方！
