ホームページ　リンクの作り方

異なったホルダーの間でリンクを張るノウハウ・コツ、リンク先を新しいページで開く方法、リンク先をまとめて指示する方法、同じページの中でリンクする方法、目立つリンクの作り方、相互リンクの方法等を解説
リンクに関するほとんど全てが判ります。

損をしない自動車保険選び損をしないクレジットカード選び銀行の利用・口座維持手数料無料化就職・アルバイト情報
トッブページに戻る文字のサイズを変更する時は Control キーを押しながらマウスのスクロールホイールを回してください

異なったフォルダー間でリンク ▲

今までは右のようなファイル構成で、同一のフフォルダーにすべてのファイルを保存しました。
この状態ではindex.htmに書いた文章からhanami.htmにリンクするときはこんな風に書いていました。

<A href="hanami.htm">ここをクリック</A>

しかし一つのホルダーにすべてのファイルをバラバラに入れておくのは、あまり使いやすいものではありません。フォルダーの中に更にいくつかのフォルダーを作り、その中にファイルを整理したときのリンク方法を今から確認していきます。

別のフォルダーを作り互いにリンク

ファイルが増えてきたときに、右のようにフォルダーを作って整理したとします。

「gazou」のフォルダーには「gazou1.htm」「gazou2.htm」のファイル、
「hozon」のフォルダーには「hozon1.htm」「hozon2.htm」のファイル、
「memo」のフォルダーには「memo1.htm」「memo2.htm」のファイルが各々保管されているとします。

この状態でのリンク方法を調べていきます。基本的にはファイル名の前にホルダー名を指定するだけです。

下の説明はあまり深く考えず読み飛ばして、その下の『考え方のコツ』を見てください。そのほうが判りやすいと思います。

indexから「gazou」フォルダーの中へリンク index.htmに書いた文章から「gazou」フォルダーの中の「gazou1.htm」にリンクさせます。ホルダー名/ファイル名とします <A href="gazou/gazou1.htm">ここをクリック</A>	フォルダーの中からフォルダーの外へリンク「gazou」フォルダーの中の「gazou1.htm」に書いた文章から「hanami.htm」にリンクさせます。 ../ファイル名とします。(ドット　ドット　スラッシュ) ホルダーから出す呪文だと思ってください。 <A href="../hanami.htm">ここをクリック</A>
フォルダーの中から別のフォルダーの中へリンク「gazou」フォルダーの中の「gazou1.htm」に書いた文章から「hozon」フォルダーの中の「hozon1.htm」にリンクさせてみます。 ../ホルダー名/ファイル名とします。いったんホルダーから出し、別のホルダーに入ります。 <A href="../hozon/hozon1.htm">ここをクリック</A> ここ迄の3種類がわかれば、どんな複雑なファイル構成でも、後はこの組み合わせだけです。	フォルダーの中に更にフォルダーがあったらその-1 もっと複雑な構成で、「gazou」フォルダーの中に「nikki」ホルダーがあり、その中に「gazou3.htm」が、「hozon」フォルダーの中に「nikki」ホルダーがあり、その中に「hozon3.htm」が入っているとします。 index.htmに書いた文章から「gazou3.htm」にリンクさせてみます。ホルダー名/ホルダー名/ファイル名とします。 <A href="gazou/nikki/gazou1.htm">ここをクリック</A>
フォルダーの中に更にフォルダーがあったらその-2 「gazou3.htm」に書いた文章から「hanami.htm」にリンクするときはこんな風に書きます。 ../../ファイル名とします。 2回フォルダーから出してやるわけです。 <A href="../../hanami.htm">ここをクリック</A>	フォルダーの中に更にフォルダーがあったらその-3 「gazou3.htm」に書いた文章から「hozon3.htm」にリンクするときはこんな風に書きます。 ../../ホルダー名/ホルダー名/ファイル名とします。２回フォルダから出し別のフォルダーに入っていきます。 <A href="../../hozon/nikki/hozon1.htm">ここをクリック</A>

考え方のコツ

フォルダーを左の図のように箱だと考えます。
リンクを指示した文書のファイルを緑のボール、リンクをするファイルを赤いボールとすると、緑のボールがどうやったら赤いボールのところへいけるかを考えればいいのです。
図を見ればわかるとおり「Aの箱」を出、さらに「1の箱」を出て「2の箱」に入り、もう一度「Yの箱」に入れば赤いボールと会うことができます。
この文章を記号にするだけです。
出るときは、箱の名前はいわなくてもわかっているので、箱(フォルダー)を１回出るときは「../」の記号で表します。
「2の箱」に入る、は「2/」で表します。
この場合は、トータルすると「../../2/y/」となります。
赤いボールのファイル名が「aka.htm」だとすると <A href="../../2/y/aka.htm"> という指示をしてやればいいことになります。
「2」と「y」はフォルダー名に置き換えます。
この考え方は画像を表示させる時の画像ファイルの関係、フレーム分割のファイルの時にも使えます。紙に絵を書くか頭の中でこの状態を想像すればかなりわかりやすくなると思います。

上に戻る

画像にリンクを張る ▲

文章だけではなく画像にもリンクが張れます
<A href="リンク先"><IMG src="画像名"></A>と指定します。
今迄、文字だった部分が<IMG src="画像名">に置き換わっただけです。画像をクリックすると、リンク先にジャンプします。画像をボタン風にしたり、いろいろな工夫が出来ます。

文字の周りにリンクを示す青い枠がつきますが、気になるときは　border="0" を<A>タグ追加します。
<A href="sample.htm">は<A href="sample.htm" border="0">とします。

上に戻る

リンク先を新しいページで開く ▲

リンクした時に、今見ているページが書き換えられてしまうのは不便なこともあります。もとのページを表示したまま新しいページを開きそこに、リンク先を表示させます。
<A href="ファイル名" target="_blank">～</A>と書きます。
target="_blank"という文字を追加するのですが blank の前に_ (アンダーバー)がついていることに注意してください。

実際に書くとこんな風になります。

<HTML>
<A href="hanami.htm" target="_blank">
新しいページを開く
</A></HTML>

アンダーバーのキーボード位置

上に戻る

すべてのリンクが新しいページで開くようにする

リンク個所がたくさんある時、一箇所づつtarget="_blank"を書いていくのは面倒です。

<base target="_blank">

と一言、<HEAD></HEAD>の間に書いておけば、そのページのリンクはすべて新しいページで開きます。

相互リンクを作る ▲

お互いのホームページに相手のアドレスを載せてPRしあうことを相互リンクと言います。リンク先を相手のホームページのタイトル名にする場合と、専用バナーを使う場合の二通りがあります。
タイトルの場合は
<A href="相手のホームページアドレス">相手のホームページのタイトル名</A>のように書きます。
相手が「バナー」を使って欲しいという場合は、画像のリンクと同じ要領で
<A href="相手のホームページアドレス"><IMG src="バナー名"></A> と書きます。
相手のバナー画像はダウンロードし、自分のホームページのホルダーに保存しておく必要があります。

細かな注意点としては、
(1)相手のホームページアドレスは特に指定がない限り、トップページとする。
(2)すぐ上で説明した、target="_blank"を書き忘れないようにする。　　
この二点です。ホームページアドレスは http で始まるすべてを記入します。 target="_blank"は、自分と相手のホームページをはっきり区別するためと、自分のページの表示がなくなってしまうのを防ぐために必要です。

実際に書くとこんな風になります
タイトル名の場合
<A href="http://www.ta-ka-ra.com/homepage/index.htm" target="_blank">
超簡単ホームページ作り</A>
バナーの場合
<A href="http://www.ta-ka-ra.com/homepage/index.htm" target="_blank">
<IMG src="h-banner.gif"></A>

スペースに余裕があれば簡単な紹介ぐらいは追加しておくと親切かと思います。

もう少し具体的な説明

上に戻る

絶対パス ▲

上の相互リンクで書いた <A href="http://www.ta-ka-ra.com/homepage.htm" target="_blank">超簡単ホームページを作る</A> という書き方はホームページの中のリンクにも使えます。

あなたのホームページアドレスが「http://www.aaa.co.jp/suzuki 」で、その中に「gazou」というホルダーを作り、更にその中の「gazou1.htm」にリンクさせるのであれば
<A href="http://www.aaa.co.jp/suzuki/gazou/gazou1.htm">～</A>と書きます。

「ホームページアドレス/ホルダー名/ファイル名」のように書く書き方を絶対パスと呼び、今までやってきた書き方を相対パスと呼びます。絶対パスは長い書き方になりますが、メリットは「リンクするページ」と「されるページ」の関係を何も考えなくていいことです。どんな関係にあろうと同じ書き方でリンクできます。

子供の友達が遊びにきて「僕のお父さん」といったとき、友達の佐藤君がいったのか、鈴木君が言ったのかで、「お父さん」が誰を指すかは変わってきます。いわばこれが相対パスです。東京都新宿区○○ハイツ△△鈴木一郎などといえば、誰のお父さんかは関係なく、誰を指すか特定できます。これが絶対パスです。

上に戻る

特定の場所にリンクする ▲

縦に長いページを使いやすくするには、一番上に目次を書き、目次をクリックすると見たい部分にジャンプするようにしておきます。ジャンプした先を読み終えたら、目次に戻れるようにしておくと更に使いやすくなります。

同じページの中の特定の場所にリンクする

同じページの中ですから、リンクするといっても今までのようにファイル名を書くわけにはいきません。ファイル名の替わりにキーワードを使います。好きなキーワードを作って、要所要所に記入し、そこにリンクさせるようにします。

まず<A name="キーワード">～</A>というタグを作ります。キーワードは1,2,3,4 でもいいですしa,b,c,dでも何でもかまいません。このタグをジャンプさせたい場所に記入していきますます。

次に、目次の部分にリンクを書きます。 <A href="#キーワード">～</A>でジャンプ先を指定します。通常のリンクとの違いはファイル名の代わりに「#キーワード」を使うことだけです。

<HTML><HEAD></HEAD><BODY>
目次部分
<A href="#sougo">相互リンクを作る</A>
<A href="#mail">メールアドレスを記入する</A>
ここから本文
...
....
<A name="sougo">相互リンクを作る</A>
...
...
<A name="mail">メールアドレスを記入する</A>
....
....
</BODY></HTML>

上に書いてある「青字」の「相互リンクを作る」の部分をクリックすると、下の「赤字」の「相互リンクを作る」の部分にジャンプします。

上に戻る

他のページの中の特定の場所にリンクする

他のページの特定の部分にリンクさせることもできます。

同じページだろうと、違うページだろうとキーワードを作って、 <A name="キーワード">～</A>というタグ埋め込んでいく作業は何も変わりません。とにかくリンクさせたい場所に<A name="キーワード">～</A>のタグを埋め込みます。

違いはリンク先を呼び出すときに使うタグだけです。キーワードの前にファイル名を入れます。
<A href="ファイル名#キーワード">～</A>のようにします。これで異なったページの特定の部分にリンクさせることが出来ます。

<HTML><HEAD></HEAD><BODY>
目次部分
<A href="#sougo">相互リンクを作る</A>
<A href="hozon.htm#mail">メールアドレスを記入する</A>
ここから本文
...
....
<A name="sougo">相互リンクを作る</A>
...
...
<A name="mail">メールアドレスを記入する</A>
....
....
</BODY></HTML>

上に書いてある「青字」の「メールアドレスを記入する」の部分をクリックしても、下の「メールアドレスを記入する」の部分にはジャンプしません。「hozon.htm」の「メールアドレスを記入する」の部分にジャンプします。

上に戻る

目立つリンク ▲

マウスポインターがリンクの上に来ると、背景が赤く変化するようにしてみます。このページにすでに適用してありますので、どこかリンク部にカーソルを載せてみてください。

<HEAD>と</HEAD>の間に

と記入します。
A:hover {background-color: #bbffbb;color: #559955;}と書いておくとカーソルが載ったときこんな風に変化します。

ネットスケープナビゲーターではこの効果は出ません。

いろいろなリンクの形 ▲

リンクをボタンにする

リンクがボタンになりますので、イメージがかなり変わります
<FORM ACTION="リンク先のファイル名" METHOD="GET">
<INPUT TYPE="SUBMIT" VALUE="ボタンに表示する言葉"></FORM> を記入するだけです。

上に戻る

リンクをクリックするとメールが開く

よく見かけると思います。リンク部分をクリックすると、宛て先の記入された新しいメッセージウィンドウが開きます。

<ADDRESS>適当な文章
<A href="mailto:メールアドレス">メールアドレス</A>
</ADDRESS>

メールアドレスが「aaa@bbb.ne.jp」だった時にはこんな風に書きます。

<ADDRESS>メール連絡先
<A href="mailto:aaa@bbb.ne.jp">aaa@bbb.ne.jp</A>
</ADDRESS>

メール連絡先aaa@bbb.ne.jp

上に戻る