おこづかいバナーの挿入方法の解説で。
子育てママののほほんおこづかい稼ぎマニュアル

TOP初心者向けアフィリエイトホームページ作成講座 >おこづかいバナーの挿入方法
おこづかいサイトのバナー挿入の方法

ここからは画像に応用を加え、バナー挿入について解説していきます。バナーとは、バナー広告のコトを指し、インターネット上の画像広告のコトを言います。

おこづかいサイトを作るにあたっておこづかいサイトのバナー挿入ができないことには話になりません。これにあたってはHTMLの知識をもろに必要とします。でもそれさえ理解すれば、後は簡単。どんなバナー広告も、手こずらすに挿入できます。

バナー広告を提供してくれるアフィリエイトの広告代理店や広告主のサイトでも、おこづかいサイトにもバナー挿入のしかたは基本的に掲載されています。ですが、いまいちホームページ作成初心者の方には難しいよう…。そこでココでは特別に手取り足取り解説しちゃいます。

基本的なバナーの挿入方法

バナー広告は、画像にリンクが貼られているため、『画像を挿入する』タグと『リンクを貼る』タグを、つなげて作成します。

  • <a href=”…”>はリンクを貼るタグ
  • <img src=”…”>は画像を挿入するタグ

<a href=”リンク先のページのアドレス”><img src=”画像のアドレス”>

上のように入力すると、バナーの挿入をすることができます。

リンクとは、今のページを他のページにつなげるコトを言います。インターネットでよく見かける、他のページに飛ぶことができる場所をリンクと言います。

広告主から紹介用URLが用意されている場合

まずはホームページのHTMLを表示してください。HTML画面を表示したら下と同じように入力していきます。

ここではより分かりやすく解説するため、例としてアンケートモニターサイト『Prize-Prize』を使って解説します。

<a href=”    @    ”>
<img src=”AかBのどちらか”></a>
@ 広告主が発行した、個人を特定できるIDなどを盛り込んだ広告主のサイトへリンクするアドレス
AB バナーのアドレス

@のアドレス

ここは、広告主が紹介用URLなどと言う形で発行してくれる場合がほとんど。ですのでそのアドレスをそのまま入力します。間違いを防ぐためにコピーで入力してもOKです。

バナー広告の挿入方法1
Aのアドレス

ここはホームページに挿入したいバナーの上で『右クリック』→『プロパティ』で出てきたページの中に『アドレス(URL)』とありますのでそれを入力してください。

HTMLを入力するときは小文字で入力しましょう。

まずバナー画像をパソコンに保存する
バナー広告の挿入方法2

挿入したいバナー画像の上で右クリックします。すると、下のメニューが表示されます。

バナー広告の挿入方法3

『プロパティ』をクリックします。すると『プロパティ』ダイアログボックスが表示されます。

バナー広告の挿入方法4

その中の『アドレス:(URL)』のアドレスをそのままコピーして入力します。

Bのアドレス

広告主によっては『直リンクは禁止します』と書かれているサイトがあります。直リンクが禁止されているバナーの場合は、Aのアドレスを使わず、新規に自分のパソコンにバナー画像を保存して、バナーを作り直し、これを使います。これがBです。その方法をここで解説します。

まずバナー画像をパソコンに保存する
バナー広告の挿入方法2

挿入したいバナー画像の上で右クリックします。すると、下のメニューが表示されます。

バナー広告の挿入方法5

『名前を付けて画像を保存』をクリックします。すると、下の『画像の保存』ダイアログボックスが表示されます。

バナー広告の挿入方法6

『ライブラリ』内から、ホームページを保存してあるフォルダを探します。(どのフォルダでも構いませんが、わかりやすくするためには同じフォルダが望ましいでしょう。)

バナー広告の挿入方法7

私はホームページを『ドキュメント』の中にに保存してあります。ですので『ドキュメント』をクリックして、『ドキュメント』を開きます。

『ドキュメント』にはこれだけのファイルが入っています。このように『画像の保存』ダイアログボックス左側には、パソコン内のさまざまなファイルを開けるように、項目が設けられています。

バナー広告の挿入方法8

特別な決まりはありませんが、『ドキュメント』は一般的に自分で作成したファイルを保存するための場所です。

ホームページを保存してあるファイルを開きます。『ドキュメント』内の『Webpage』にホームページが保存されているのでここををクリックします。

バナー広告の挿入方法9

すると『Webpage』を開くことができました。

バナー広告の挿入方法10

@ 『ファイル名』を消し、自由に名前を付けます。
A 『ファイルの種類』を下矢印ボタンから選択します。

『gif』『jpeg』に変換すると、画質は落ちますが容量を減らすことができます。

バナー広告の挿入方法11

『保存』ボタンをクリックします。これでバナー画像の保存完了です。

次はバナー画像のアドレスを作る

『Prize-Prize』のバナー画像は、パソコン内の『ドキュメント』内の『Webpage』内に『prize-prize』と言う名前で保存しましたね。これをアドレス表示すると、下のようになります。

http://hononon.lolipop.jp/prize-prize.jpg/

これを上のBに当てはめまめれば、バナー画像を挿入するためのHTMLが完成します。

通常は半角文字で入力しますが、ここでは大文字で入力しています。半角文字で入力するようにしましょう。

このように、ホームページのアドレスに続けて『ファイルの名前』でアドレスを作成します。

もし仮に、別のフォルダに保存した場合。例えば、『Webpage』内に『gazou』フォルダがあって、その中に『prize-prize』のバナー画像を保存した場合は、

http://hononon.lolipop.jp/gazou/prize-prize.jpg/

と、なります。

ファイルとファイルの間は『/』で区切り、最後にも『/』をつけましょう。

とりあえず最低これだけのことができればおこづかい系サイトのバナー挿入はできます。

知っておきたい画像・バナー挿入に関連するタグ

これまで解説した、バナー挿入の方法に加え、下のように入力すると画像やバナー挿入の詳細設定をタグですることができます。これを使えば、自分で作った画像にリンクを貼ることも可能。大変便利なのでぜひ覚えましょう。

<a href=”@” target=”_blank”>
<img src=”A” alt=”B”border=”C” width=”D” height=”D” target=”_blank”></a>

  • @サイトのアドレス
  • Aバナーのアドレス
  • B画像の名前
  • C枠線の太さ
  • Dバナーの縦幅、横幅

alt=”…”

アップロードで画像ファイルの読み込みに失敗した場合や、訪問者のパソコンで画像を表示しない設定にしている場合、画像の代わりに、ここで入力した文字が表示されるように設定することができます。これを入力すると、どんな画像かを文字で表示させることができます。

『alt=”拡張子の変換”』と入力すると、画像が表示されなかった場合に下のように表示されます。

alt画像
border=”…”

枠線の太さを数値で指定します。『border=”0”』は、画像のやバナーの『枠線なし』にすることができます。

target=”_blank”

これを入力するとリンクをクリックした場合、もうひとつブラウザを開いてリンク先のページを表示します。

width=”  ” height=”  ”

画像の横幅と縦幅を数値で指定します。『width』が『横幅』、『height』が『縦幅』です。

アフィリエイトでおこづかいへ戻る♪

子育てママののほほんおこづかい稼ぎマニュアルTOPへ