Endless Dream!-超〜簡単ＨＰ作り １０．画像 画像でおしゃれに！

このページでは画像について書きます。文字だけでもいいんだけど、画像をうまく使うとおしゃれなページにぐっとレベルアップできるので、このページを参考にしよう！

＜画像の種類！＞

ＨＰは文章による内容も重要だけど、見た目も重要なポイント。そこで画像を使って、おしゃれなページを作ろう！ 　画像にはいろいろな種類があるけど、大きく分けて写真とイラストの素材がある。 　写真はデジカメで写真を取ったり、普通の写真をスキャナーで撮り込んで使う、いわゆる普通の写真のこと。例えば僕のＨＰなら旅行の写真とかはちの写真とか僕の写真とかね。 　イラストの画像は、背景・ライン・アイコンなど、ページをおしゃれにかわいく飾るもの。例えばこのページなら背景は水玉、ラインは一番上のタイトルの上下にある青い丸の横線、アイコンは一番下の犬ものね。 　これらを使うことで一気におしゃれなＨＰになるので、うまく利用しよう！

＜画像のタグ！＞

画像のタグもよく使うので覚えちゃおう！ 　　　<img src="画像の名前"> 　画像の名前は、"○○.jpg" や、 "○○.gif" などになる。この名前を間違えると画像が表示されないので注意しよう！！ 　ここにある"jpg"や"gif"というのは説明すると長くなるし覚えなくても別に問題ないので、とりあえず「"jpg"は写真、"gif"はイラスト」と理解しとけばＯＫ。 　写真もイラストもやり方は簡単。表示したい画像をＦＴＰでサーバーにＵＰし、上のタグでつなぐだけ！ページを作った後にちゃんと画像が表示されているかをチェックしよう！

＜写真の時つかえるテク！＞

写真は表示されるのにとても時間がかかる。だから写真だけのページの場合は、「９．リンク」のときに教えた「新しいウィンドウで開くリンクのタグ」を使うといい！ 　また、文章と写真が混ざっているページは、見やすい小さい写真を載せ、そこをクリックすると大きい（元の大きさの）写真が表示されるようにすると見やすいし、写真が表示されるまで待つのも楽。 　普通は画質の悪い小さいものをページに使い、クリックすると画質のよい大きいものが表示されるようにするパターンが多いけど、これだと写真を２パターン作るのが面倒だし難しい。ので僕は、大きさを調整するリンクのタグを使って一つの写真ですましてます。 　　　<a href="画像の名前" target="_blank"><img src="画像の名前" height="高さの数字" width="幅の数字" border="0"></a> 　ちょっとわかりにくいかもしれないけど、画像とリンクのタグを複合して使ってるんだ。だから画像の名前は同じのものに。あと高さと幅の数字は元の写真の大きさと比率が合うようにするのがポイント。あと border="0" は下のイラストでも使うけど、画像をリンクすると回りがラインで囲まれてしまい見にくいからそれを消すためのもの。難しいと思うから、このタグを貼り付けて使っちゃってね！ 　＊一番下にはちの写真を使った例があるので、それも参考にしてね！

＜イラストの画像のやり方！＞

イラストの画像は自分で作るのは大変。でもいろいな人が無料で使える画像を公開しているので、それを利用させてもらおう。僕のＨＰのリンク集を利用してもいいし、検索エンジンで「素材」をいれるといろいろとかわいいものが見つかるよ。 　使い方はそれぞれのサイトに注意書きがあるのでそれを利用すればいいけど、一般的なやり方を教えます。 　１．使いたい素材を見つけたら、その素材にマウスを合わせて右クリック。 　２．「名前をつけて画像を保存」をクリックし、自分のＰＣに画像取り込む。（分かりやすいように自分で名前を変えた方がいいよ。） 　３．その画像をＦＴＰで自分のサーバーに送る。 　４．画像のタグでつなぐ。 　簡単でしょ？とにかく素材を提供してくれているサイトに直接リンクするのは迷惑になるので絶対にやめよう！！ 　ただアイコンをリンクと複合させる場合（例えばこのページなら一番下のクリックするとトップページなどに飛べる犬のボタン）は、上の写真のこころにも書いたけどちょっと複雑になる。 　　　<a href="リンク先のページの名前"><img src="画像の名前"></a> 　　　　　　 　これだと回りが線で囲まれてカッコ悪いと思う人は、下のタグを使う。 　　　<a href="リンク先のページの名前"><img src="画像の名前" border="0"></a> 　　　　　　 　ちなみに上の犬のアイコンは、クリックすると「超〜簡単ＨＰ作り」のトップページに飛べるようになってます。好きなほうのタグを使ってね！

＜ポイント＞

自分で取った写真や作った素材は関係ないけど、他の人のものを使う場合は、著作権の問題があるので注意しよう。特に芸能人の写真を使うのはおすすめできません！ 　無料の素材集のＨＰは、加工はだめとかリンクをはることなどの注意事項があるから、取り込む前に注意書きをよく読もう！みなさんとても親切なのでそんなに気にしなくてもいいと思うけど、お礼のメールやリンクをするとお互い気持ちよく使えるよ。 　あと写真はあまりに大きいものや画質の良すぎるものだと、表示するのに時間がかかりすぎて見てくれて人を退屈させるし、ＨＰの容量も圧迫するので、適度なサイズにしよう！！

＜写真＋リンクの例＞

上でかいたはちの写真を使った例を作っておきます。感じもつかめると思うので、これを参考に自分の写真をきれいにのせてね！（中央寄せしてるよ。） 　　　<center><a href="hachiphoto.jpg" target="_blank"><img src="hachiphoto.jpg" height="150" width="200" border="0"></a></center> 　写真に合わせてクリックすると、新しいウィンドウで大きい写真が表示されるよ。ちなみにもとの写真は「高さが480、幅が640」なので、その比率を使って小さくしてみました。