画像を使ってリンクを張る : STEP6 【リンクを張ろう：他サイトへのリンク編】

ホームページ作成の基礎から、HTMLタグやスタイルシート、JavaScriptを使ったHP作成方法、アクセスアップの秘訣を紹介。

ホームページ入門

初めてのホームページ

作成に必要なもの

レンタルサーバ選び

HPを作ってみよう

拡張子の表示

フォルダ、ファイル作成

HTMLタグの入力

画像を張る

サイト内リンク

他サイトへのリンク

ページの作成

他サイトへのリンク

別ウインドウで表示

画像を使ってリンク

FTPの使い方

完成までの流れ

気をつけたいこと

　画像を使ってリンクを張る

画像を使ってリンクを張ってみよう！

リンクを張る際に、リンク部分を文字ではなく画像を表示させたい場合があります。
そのような時は、画像をリンク部分として表示させることができます。
それでは、画像を使ってリンクを張る前に、まずはその画像の準備しましょう。
下記の画像を「homepage.gif」という名前で、imageフォルダに保存してください。
（保存方法を忘れてしまった方は、「画像の準備」をご覧ください）


保存名「homepage.gif」

上の画像を保存が終了したら、いよいよ画像を使ってリンクを張ってみましょう。
まずは下記をご覧ください。

～上略～
<hr width="300">
<br>
<a href="http://homepage.nusutto.jp/">
ホームページ作成講座
</a>
<br>
<br>
<a href="http://homepage.nusutto.jp/" target="new">
ホームページ作成講座
</a>
<br>
<br>
<a href="http://homepage.nusutto.jp/" target="new">
<img src="image/homepage.gif" alt="ホームページ作成講座">
</a>
<br>
<br>
<hr width="300">
～下略～

上の赤く書かれた部分の内、「<a href="*"><img src="*"></a>」という部分が画像をリンクとして表示させるタグになります。
使用しているタグはどれも使用したことがありますよね。今までと違う点は、文字の変わりに画像を指定するというだけになります。

使っているタグは変わりませんので、それでは実際に入力してみましょう。上の赤い部分を入力してみてください。

ページ表示

上のように表示・リンクができれば完了です。
（上の画像をクリックして、サンプルページをご覧ください）
それでは実際に、画像にリンクが張られているか確認のために画像をクリックしてみてください。当サイトのトップページが表示されれば成功です。

画像をリンクとして表示させることができましたが、画像の回りにある「枠線」って、なんか邪魔じゃないですか？そこで、枠線を消して画像を表示させてみましょう。

画像の枠線を消す方法

画像をリンクとして表示させる場合、通常では「リンクの枠線」が画像の回りに表示されてしまいます。しかし、この枠線は見た目上、意外と変で邪魔です。そこで、回りの枠線を表示させないで表示させることができます。
それでは、枠線を表示させないでリンクを張ってみましょう。下記をご覧ください。

～上略～
<hr width="300">
<br>
<a href="http://homepage.nusutto.jp/">
ホームページ作成講座
</a>
<br>
<br>
<a href="http://homepage.nusutto.jp/" target="new">
ホームページ作成講座
</a>
<br>
<br>
<a href="http://homepage.nusutto.jp/" target="new">
<img src="image/homepage.gif" alt="ホームページ作成講座" border="0">
</a>
<br>
<br>
<hr width="300">
～下略～

HTMLタグ【画像の枠線を消す方法】

上の赤い部分が、枠線を消して画像をリンクとして表示させる属性タグになります。
この「border="*"」は、枠線の太さを指定する際に使用するタグで、「*」部分に「0」と入力することで枠線を消して表示させることができます。

それでは実際に入力してみましょう。上の赤い部分を入力してみてください。

ページ表示

上のように、枠線が消えて表示されれば完了です。
（上の画像をクリックして、サンプルページをご覧ください）

体験ホームページ完成！


	以上で「体験ホームページ」を使ったホームページ作成方法は終了となります。見難い部分や説明不足な点が多々あったかもしれませんが、最後までご覧頂きありがとうございました。しかし、これだけでは本当の意味でのホームページを作成したことにはなりません。現在は、HTMLファイルが完成しただけであって、本当の意味でのホームページとは言えません。この作成したHTMLファイルを、インターネット上に公開することで本当の意味でのホームページの完成となります。次はインターネット上にホームページを公開するために必要な「FTPの使い方」を紹介しますので、もう少しお付き合いよろしくお願いします。

ページの上へ

前のページ

トップページ

FTPの使い方

Copyright (C) 2007 ホームページ作成講座 All Rights Reserved.