ホームページを無料で作りたい方必見！メモ帳で簡単に作れるギャグwebデザイン講座☆ 　
対話でわかる！？ギャグwebデザイン講座！*6日目*
☆画像をはってみよ〜う！！
TOP > 6日目
　
　
「昨日（5日目に）やったことを下に書きだしてみたぞ！」

■<a href="リンク先のURL">リンク先の名前</a>/*リンク先に移動する*/

　
「だけだな。思い出したかな？リンクは、非常に重要だから覚えておくようになっ！今回は、メガーネな大好きな画像だっ！」
「むひょ！ピンク画像っすか！萌えッすね★どきどき」
「今回は、こんな画像のページを作るぞ！」
こんなページ←クリックしてみそ★
「まぁピンク画像は置いておいて、画像のはり方をやるぞ！画像の入手の仕方は大まかに分けて、デジカメで取ったものをハードに取り込む方法と、自分で作る方法と、素材を提供しているサイトでもらってくる方法があるっ！」
「えー？そんなにあるんすか？大変そうですね。ぼくは、エロサイトで画像のダウンロードする時しか使わないっすけどね〜」
「メガーネは、とことんエロメガネだな」
「でへへ☆」
「そこで今回は、わたしが作った画像を使って貼り付けてもらおう！」
「おー！いつの間に作ったんすねー！さすがっす！」
「その前に、昨日作った『index.html』を開くのだ！」
「ほーい！開きました」
「じゃー『<BODY>』に『<BODY background="image/megane.gif">』を追加してうってみそ！背景に画像が張り込まれるぞ！そして『<BODY bgcolor="pink">』も必要なくなるので削除しておけっ！」
「はいでやんす！」

<html>
<head>
　　　　<title>メガーネのお部屋。☆</title>
</head>
<body background="image/megane.gif">
 <font color="blue">
<center>
<h1>メガーネのお部屋。</h1>
</font>
<font size="3" color="blue">たっぷりじっくり不埒なボクを鑑賞してくださいね☆</font>
<br><br><br>
<a href="profile.html">ぷろふぃーる</a><br><br>
<a href="diary.html">みちゃいやん日記</a><br><br>
<a href="bbs.html">あっはん掲示板</a><br><br>
<a href="link.html">メガーネ友達の輪</a><br><br>
<a href="top.html">TOPに戻る</a>
</center>
</body>
</html>

「あれ？背景が真っ白ですよ！うまくいかないっす！」
「うむ！まだ画像をフォルダにいれてないからなぁ！！」
「えー！！？またっすか！？困りますよ〜！」
「だははっ！すまんすまん！メガ−ネをからかうのは面白くてなぁ〜！それならしたの画像を自分の『myhome』フォルダの中に『image』というフォルダを作って入れてみろっ！」

☆背景画像ダウンロードしてみそ♪→

「ダウンロードの仕方はわかるよな？winの場合は、右クリックで名前を付けて保存だっ！macの場合は、左クリックを押したままにすれば『画像をディスクにダウンロード』と出てくるので、『megane.gif』という名前を付けて、『image』の中に保存してみそ！」
「ほーい！ダウンロードして入れましたよ！」
「では、『index.html』を開いてみよ！それでも上手く表示されなかったら 、ブラウザを一度終了させてもう一度開くのだっ！！」
………
「おぁっ…！？なんか背景にめがねが沢山入ってますよ！？」
「むふふ。これぞメガネマジック」
「メガネマジック？」
「メガネの大いなるパワーにより神の恩恵を受け背景メガネとなったのだよぉぉ〜！おわかりぃぃ？？！」
「へー…メガネ神って偉大なんすねー」
「たまには、つっこんでくれよ！」
「え？今のボケだったんですかぁ？あんまり笑えないですよ〜」
「ご、ごほん…じゃーつぎ行くぞ！今度は、メニューを画像に変えるぞ！！」
「えー？メニューを画像に変えるの？なんかめんどそうですよ！このままでもいいんじゃないすか？」
「まあこのままでも、問題はないんだが、見栄えがよろしくないからなぁもっとイイ感じになるようにするんだ！」
「ちっ！」
「ん？！なんか言ったか？？」
「いえべつに…」
「さっきと同じように下の画像を全部ダウンロードして、『image』フォルダにいれるのだっ！ 名前は、上の画像から」

☆メガネ画像→『frame_megane.gif』
☆プロフィール→『bu_pro_ao.gif』
☆日記→『bu_iyan_ao.gif』
☆掲示板→『bu_keijiban_ao.gif』
☆リンク→『bu_link_ao.gif』

「という名前をつけて、保存をしてみろっ！」

☆メガネ画像→
☆プロフィール→
☆日記→
☆掲示板→
☆リンク→

「なんか画像がたくさんあるけど全部『image』に入れていいんですか？」
「ああいいともさ！メガネだらけのページにしちゃる！」
「いかがわしいメガネ屋さんみたいだな…」
「なんか言ったか？」
「いえ別に…」
「今度は、画像を入れていくぞ！前の文書に『<img src="image/frame_megane.gif">』を追加するのだっ！」
「ふぁーい！」

<html>
<head>
　　　　<title>メガーネのお部屋。☆</title>
</head>
<body background="image/megane.gif">
<font color="blue">
<center>
<h1>メガーネのお部屋。</h1>
</font>
<font size="3" color="blue">たっぷりじっくり不埒なボクを鑑賞してくださいね☆</font>
<br><br><br>
<img src="image/frame_megane.gif">
 <a href="profile.html">ぷろふぃーる</a><br><br>
<a href="diary.html">みちゃいやん日記</a><br><br>
<a href="bbs.html">あっはん掲示板</a><br><br>
<a href="link.html">メガーネ友達の輪</a><br><br>
<a href="top.html">TOPに戻る</a>
</center>
</body>
</html>

「おおーっ！メガネだっ！！メガネが入りましたよ〜！なんかそれっぽくなってきたっす！」
「ふふーん！じゃ次は、メニューの部分を、全部画像にするぞ！」

<html>
<head>
　　　　<title>メガーネのお部屋。☆</title>
</head>
<body background="image/megane.gif">
<font color="blue">
<center>
<h1>メガーネのお部屋。</h1>
</font>
<font size="3" color="blue">たっぷりじっくり不埒なボクを鑑賞してくださいね☆</font>
<br><br><br>
<img src="image/frame_megane.gif">
<a href="profile.html"><img src="image/bu_pro_ao.gif"></a><br><br>
 <a href="diary.html"><img src="image/bu_iyan_ao.gif"></a><br><br>
 <a href="bbs.html"><img src="image/bu_keijiban_ao.gif"></a><br><br>
 <a href="link.html"><img src="image/bu_link_ao.gif"></a><br><br>
 <a href="top.html">TOPに戻る</a>
</center>
</body>
</html>

「あっ！メニューが全部変わりましたよ！でも『ぷろふぃーる』だけめがねの横いっていてなんか変です！」
「うむ！では、メニューをメガネ画像の右側に回り込ませるぞ！ 『<img src="image/frame_megane.gif">』に『align="left"』を付け足すのだ！」
「らじゃ！」

<html>
<head>
　　　　<title>メガーネのお部屋。☆</title>
</head>
<body background="image/megane.gif">
<font color="blue">
<center>
<h1>メガーネのお部屋。</h1>
</font>
<font size="3" color="blue">たっぷりじっくり不埒なボクを鑑賞してくださいね☆</font>
<br><br><br>
<img src="image/frame_megane.gif" align="left">
<a href="profile.html"><img src="image/bu_pro_ao.gif"></a><br><br>
<a href="diary.html"><img src="image/bu_iyan_ao.gif"></a><br><br>
<a href="bbs.html"><img src="image/bu_keijiban_ao.gif"></a><br><br>
<a href="link.html"><img src="image/bu_link_ao.gif"></a><br><br>
<a href="top.html">TOPに戻る</a>
</center>
</body>
</html>

「打てたか？ついでに、TOPページに戻るリンクも追加しておくぞ！『<a href="index.html">TOP</a><br><br>』『"diary.html"』の方にも、『<a href="index.html">TOP</a><br><br>』を追加しておくと、TOPページに戻れるようになるぞっ！じゃーブラウザで確認してみろっ！」
「ひぁ〜！できました！ホームページっぽいっす！」
「うむ！今のが『回り込み」というものだっ！『align="×××"』属性で文字を回り込ませることができるのだっ！！ 回り込みの方法は以下の通りだっ！」

『align="left"』 　/*右に回り込ませる*/
『align="right"』 /*左に回り込ませる*/
『align="center"』 /*中央揃え*/

「へー！でもまだ「リンクファイルが見つからない」って言ってますよ！」
「まだ作ってないから当たり前だッ！今度作るから待つのだっ！」 疲れたようだから今日はここまでにしとくぞ！」
「ほーい！。。今日はメガネ三昧で長かったなぁ…。ちかれたぁ…。。。」
「明日は、ぷろふぃーるのページを『表』を使って作るからなっ！」
「うひょ〜」
「その前に、ちょっと補習授業だっ！」
「ええ〜？？」
「今回は、わたしが画像を用意したが、自分でもゲットできる素材屋さんをいくつか紹介しておこう！」
「素材やさんってなんすか？？」
「うむ！素材屋さんとは、ネットで検索してみると「フリー素材」として、背景、ボタン、アイコンなどの画像を、無料で配布しているサイトが結構あるのだ、その中でもおオススメの素材屋さんをいくつか紹介しておこう！」
「ふ〜ん！」
「うむ！その前に、各素材屋さんにでの注意事項を必ず守ることが最低限のルールだっ！素材屋さんには必ず「利用規約」があり、それにしたがうように！！」
「利用規約う？どんなのあるんすか？」
「うむ！例えば、使用するのに何か断りが必要かどうか必ず確認して、断りが必要な場合は、 その素材屋さんのアドレスをメモっておかなければいかん！」
「ええ？アドレスをなんのためにメモるんすか？」
「うむ！メガーネがその素材を使ってホームページを作った時に、「ご協力いただいたサイト」として、リンクを貼るために、アドレスが必要なのだっ！また自分のペ−ジができてからその素材屋さんの掲示板に感謝の気持ちを書くことも大事だっ！そのようなリンクを条件に配布されている素材を「リンクウェア」というぞっ！」
「リンクウェア〜！？ほえ〜！結構借りるのにも色々しなきャいけないんすね〜」
「何ごとも失礼のないようにやることが大事なのだ！」
「了解っす！」
「てなわけで、オススメ素材屋を紹介するぞっ！」

Material Quest
無料素材検索エンジン
素材の森

「ふぁ〜い」

これで、またwebマスターに一歩近づいた…ざぶーん

topに戻る
10日でできる？ホームページ
1日目| 2日目| 3日目| 4日目| 5日目| 6日目| 7日目| 8日目| 9日目| 10日目|
教子先生の！webテク講座！
〜テクその１〜| 〜テクその2〜| 〜テクその3〜| 〜テクその4〜|
Copyright (C)2006.01 duyopon
http://www16.plala.or.jp/duyopon_dayo/