ホームページの作り方(リンク用バナー)

ホームページが作れたらリンク用のバナーを作って、
色々なホームページにリンクをしてもらいましょう!

もちろんリンク用バナーも自分で作っちゃいましょうね!

リンク用バナー/ホームページの作り方です。

リンク用バナーを作ってあなたのホームページのリンクページに貼っておき、色々な人に持ち帰ってもらって、それぞれのホームページのリンク用ページに貼ってもらい、たくさんリンクをしてもらえるといいですね!
もちろんリンクはテキストリンク(文字でのリンク)が基本ですがリンク用バナーも用意しておく方がいいですね!

203.リンク用バナーを作ろう!
 

1.ペイントで作ろう!

バナーを作る道具(ソフト)をインターネットでさがしてこなくでも、あなたのパソコンの中のソフトでバナーは作れちゃいます!便利ですね!
「スタート」→「全てのプログラム」→「アクセサリー」→「ペイント」
この「ペイント」を使ってサンプルバナー ホームページの作り方リンク用バナー を作成していってみましょう。

1-1.台紙のサイズを88×31にしよう!

リンク用のバナーは88×31のサイズのものを作りましょう。
バナーの大きさは「広告企業団体」というところで国際標準規格というものを定めているそうです。
個人用のホームページでサイト内のリンク等に使うのであれば、別にどんなサイズのバナーでもかまわないのですが、他のサイトに掲載してもらう為のリンク用バナーの場合、多くのサイトが88×31のサイズのバナーを使用しているので、このサイズで作っておいた方が無難だと思いますよ。

上のサンプルのバナーも88×31の大きさです。ちなみに画像の上にカーソルを持っていって右クリックして「プロパティ」を見るとその画像の大きさ等を見ることが出来ますよ。

さて、ペイントの画面を見て見ましょう。
上の方に「ファイル(F)」「編集(E)」...とある欄の「変形(I)」をクリックして「キャンパスの色とサイズ」を選択しましょう。
ここで台紙(キャンパス)の大きさが設定できます。幅88、高さ31、単位をピクセルにして「OK」ボタンを押しましょう。

このままでは、小さくて作りにくいので「表示(V)」→「拡大(Z)」→「拡大率の指定(U)」から800%を選びましょう。
更に再度「表示(V)」→「拡大(Z)」から「グリッドを表示(G)」をクリックすると台紙に補助線(グリッド)が現れます。
これで、リンク用バナーを作る準備が出来ました。

1-2.枠とマークの部分を作ろう!

まずは、枠と アイコン の部分を作ってみましょう!

ペイントの画面の下のほうにあるカラーパレット

のうち、例えば緑色の四角をクリックすると左側の選択された色も緑色になります。
画面左の小さいアイコンのうち、「直線」 で枠を作っていきます。
枠の作成
(↑ここでは、スペースの関係で左半分しか表示していません。)

枠が出来たら「鉛筆」 等を使ってマークの部分を作っていきましょう。
もし、ずらして書いてしまったら「選択」(ファイル(F)の下の点線の□マーク)で範囲を指定して移動が出来ます。(下に方法をのせています。)
枠の作成

1-3.文字の部分を作ろう!

ペイントでは拡大表示中は文字を入れられないみたいなので、「表示(V)」→「拡大(Z)」→「標準に戻す(N)」で標準サイズに戻して文字を入れましょう。
書式は枠の中にカーソルを持っていき、右クリックをすると指定できる画面が出てきますよ! 文字の作成

文字を入れ終わった後は、再び拡大画面にして(グリッドも表示しておいた方が作業がしやすいですね!)位置のずれを直しましょう。
「選択」(ファイル(F)の下の点線の□マーク)をクリックしてずれを直す部分の左上にカーソルを持っていき(この時カーソルは このような形になっています。)マウスの左ボタンを押したまま、直す範囲の右下までカーソルを移動します。左ボタンを離すと範囲が確定され薄い点線の枠が現れます。

確定された範囲にカーソルを持っていくと、カーソルの形は こうなるので、マウスの左ボタンを押してそのまま移動した居場所に動かして、マウスのボタンを離してもう一度ファイル(F)の下の点線の□マーク を押すと移動完了です。

2.バナーが出来たらimgフォルダに保存しよう!

バナーが見事完成したらペイント画面のファイル(F)→名前をつけて保存(A)から 006ページ で作った「img」フォルダに保存しておきましょう。
ファイル(画像)の名前は何でもかまいませんが「英数字の小文字」でつけましょう。ファイルの種類は「gif」でいいと思います。

後は、リンクのページ等のお好きな場所に、

<img src="./img/○○.gif>

とかけばOKですね!
場所の指定は、007ページ にのっています。○○の部分はあなたが付けた名前を書いてくださいね!

あなたもあなたのホームページにあったオリジナルのバナーを作ってみましょうね!

豆知識

「ホームページの作り方」に出てくる画像の種類は、主に「jpg」と「gif」を使っています。これらの違いも色々とあるのですが、 まず大きな違いは表示できる色の数です。「gif」が256色なのに対して、「jpg」は約1600万色が表示できます。次に「gif」は、背景等の色を透明化できますが、「jpg」では出来ません。容量は「jpg」の方が大きいです。これらの特長から「jpg」は写真等の色を豊富に使っている画像、「gif」はイラスト等の画像に使用するのがいいようです。又、右下の「なわとびする羊」は「gif」で作られています。 牛飼いとアイコンの部屋 でお借りしているものです。使いたい方は、そちらに行って注意事項をよく読んで、お借りしましょう。

楽しいホームページを作ってネ!!
サイト紹介
サイト紹介
リンク

このページのトップへ 203 次のページ
 

Copyright(C)2008 @TESSHI-e. All rights reserved.