リンク

リンクとは、ページ内の文字や画像をクリックすると、別の場所へジャンプする仕組みです。

リンクの属性

リンクしたい文字列を選択し、右クリック→「リンクの挿入」をクリックすると、「リンクの属性」のダイヤログが出てきます。

このリンク属性のタブを選択して、リンクを設定していきます。
リンクの属性には、以下のタブがあります。

• ファイルへ・・・主に自分のサイト同士をリンクする場合に使用
• URLへ・・・主に外部Webサイトへリンクする場合に使用
• パスワード付きリンク・・・リンク先のページにパスワードを付け、閲覧に制限をかけたい場合に使用
• URL別名・・・リンクに別名を付けたい時に使用
• ラベルへ・・・ページ内リンクへジャンプする場合に使用
• メールへ・・・メールアドレスへのリンクの場合に使用
• ラベルを付ける・・・ページ内リンクを使用する為にラベルを付ける
• その他

別ページへリンク

リンクには、自分のサイトへリンクと外部サイトへリンクさせる事の2種類があります。

基本的リンクの種類

• 自サイトは相対パスでリンク
• 外部サイトは絶対パスでリンク

相対パスと絶対パス

この2つのHTMLタグの違いは、「http：//～」で始まるかどうかです。
ホームページ・ビルダーでいうと、リンク属性でこの2つのどちらかを指定出来ます。

• 相対パスでリンクの場合
  リンク属性「ファイル」で指定、ターゲット属性は指定なし
  自分のパソコンのDドライブの「HP作成」というフォルダ内の「link.html」ファイルにリンクする場合

HTMLタグ：<a href="link.html">リンクテキスト</a>
ホームページ・ビルダーでの表示：<a href="file:///D:/HP作成/link.html">リンクテキスト</a>

ホームページ・ビルダー上では、

<a href="file:///D:/HP作成/link.html">

と表示されますが、サーバーに転送すると

<a href="link.html">

と表示されます。

• 絶対パスでリンクの場合
  リンク属性「URLへ」で指定、ターゲット「新しいウィンドウ」を指定
  Yahoo!へ新窓でリンクする場合

<a href="http://www.yahoo.co.jp/" target="_blank">リンクテキスト</a>

URLで指定すると、当然「http：//～」から始まるURLとなります。
ターゲットを「新しいウィンドウ」で指定すると、新しいウィンドウ（又はタブ）が開きます。
Yahoo!などの外部サイトへリンクする場合は、新しいウィンドウを指定しましょう。
同じウィンドウで外部サイトにリンクしてしまうと、訪問者が自分のサイトへ戻って来れなくなるからです。

相対パスと絶対パスの説明が詳しく書かれているサイト

• HTMLタグ 絶対パスと相対パス
• 絶対パス、相対パスとは（雑学・小技集/みんなのタグ辞書/HTMLタグ辞書）
• 絶対パスと相対パス（1時間で作るホームページ）
• 相対パスと絶対パスとは（HTML手打ちで作るホームページ講座）

ページ内リンク

リンクで別のページへリンクは、上で書きましたが今度は、同一ページ内でリンクをするものです。
主に、縦長のページ時の最下部へ行った時に、「上へ戻る」リンクなどで、すぐに上へ戻れるといった事をする為のものです。

ページ内リンク順序は、大きく分けて以下の通りです。

1. ラベルを付ける
2. ラベルへ
3. ラベルへリンクを付ける

例を出して説明していきます。
ホームページ・ビルダーで以下の図の様なページを作ったとします。

「トップ」というテキストにラベルを付けて
「上へ戻る」というテキストに、ラベルへリンクを付けます。

ラベルを付ける

「ラベルを付ける」の設定は、リンクの飛び先の設定という事です。
ラベルは、英数字はもちろん日本語でも構いません。
まず、対象のテキストを選択し、「リンクの属性」→「ラベルを付ける」タブをクリックします。
ラベルに適当な文字を入力します。（画像では「上トップ」としています）

OKを押すと、点線での下線が付き、ラベルが付きます。HTMLタグでは

<a name="上トップ">トップ</a>

となります。「name="～」がラベルを付けるタグとなります。

ラベルへリンク

ラベルを付けたら、今度はそのラベルへリンクを付けます。
今度は、「ラベルへ」タブをクリックします。
ラベルには、先程設定した「上トップ」ラベルを選択します。（「▼」で選択出来ます）

OKを押すと、リンクが付きます。HTMLタグだと

<a href="#上トップ">上へ戻る</a>

となります。「＃」を付ける事でラベルへ指定出来ます。

画像へリンク

基本的にはテキストへのリンクと同じで、テキストが画像になっただけです。
まず、リンクしたい適当な画像を決め、その画像を右クリック→「リンクの挿入」をクリックすると、「リンクの属性」のダイヤログが出てきます。
あとはリンクの属性などにあるように目的別に設定します。

メールへリンク

メールへリンクする場合は、サイトの問い合わせなどを訪問者に送ってもらう為などに使用します。
このリンクもテキストと画像のどちらでも構いません。リンクしたものをWebブラウザでクリックすると、その人のパソコンにインストールされているメール ソフトが自動的に起動します。メールの宛先には、ここで指定したメール アドレス、または宛先が自動的に入力されます。件名には、ここで入力した件名が自動的に入力されます。

ここでは画像を使用した例を表します。（ホームページ・ビルダーの素材集にあるメール用の画像を使用）

1. 右クリック→「リンクの挿入」で、「リンクの属性」のダイヤログを出します。
2. 「メールへ」のタブをクリックします。
3. 宛先、件名、本文を設定します。設定後に「OK」を押します。
   

上記の様なメールへリンクを設定すると、以下のようなHTMLタグになります。

<a href="mailto：web@homepage-builder.org?Subject=%82%a8%96%e2%82%a2%8d%87%82%ed%82%b9&amp;body=%8a%b4%91%7a%82%f0%82%a8%95%b7%82%a9%82%b9%89%ba%82%b3%82%a2"><img src="/image/button/btn127.gif" width="49" height="49" border="0"></a>

主なリンクの詳細は「ｍailto：メールアドレス?subject=メールの件名&body=メールの内容」
上記HTMLタグにもあるように、件名などに日本語をそのまま使用すると文字化けの可能性が出てきます。それを回避する為に、ホームページ・ビルダーでは自動的に「URLエンコード」をします。
URLエンコードに関する事は以下のリンクを参考にして下さい。
・URLエンコード - Wikipedia
・Web便利ツール/URLエンコード・デコードフォーム - TAG index Webサイト

パスワード付きリンク