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