サイト内検索  

第2章:リンクを張る

リンクはWebの世界では必要不可欠なモノです。

リンクを張ることで、他の文書をかんたんに参照することが出来ますし、他のサイトからリンクを張ってもらうことで文書の価値も高まるというモノです。

この章で学ぶことは、

サイト内の文書にリンクする

リンクを貼るのには、リンクの挿入 ボタンを使用します。リンクを貼りたい文字列を選択し、リンクの挿入ボタンをクリックすると、以下のような画面が出てきます。


図1:リンク指定の画面

ファイル名の「参照」ボタンをクリックして、ファイルを選択します。その後、OKボタンをクリックすると、リンクを貼る作業が完了します。リンクを張った文字列が青文字に下線になります。

ファイルを選択すると、file:/// という文字列が先頭に付きますが、これは保存すると、相対パスに変換されますので、心配する必要はないです。

リンクを張ると、<a href="リンク先ファイル名">リンクを貼った文字列</a>というマークアップになります。

他サイトの文書にリンクする

サイト内の文書にリンクするのと同様にリンクの挿入ボタンを使用します。ブラウザを起動しており、かつリンクしたいページを表示している場合には、「URLをブラウザより取得」ボタンをクリックすると、自動的にファイル名の部分にURLが挿入されます。また、直接URLを入力することも可能です。直接入力する場合は、絶対パスで記述して下さい。

その後は、OKボタンをクリックして、リンクを貼る作業を完了させて下さい。

リンクを貼ると、<a href="リンク先ページのURL">リンクを貼った文字列</a>というマークアップになります。

ポイント

相対パスとは、現在のファイルからみた相対的な位置でファイルの位置を示します。同じディレクトリ内はファイル名のみ、下のディレクトリにある場合はディレクトリ名からファイル名までを/で示します。上のディレクトリにある場合は、1つ上を示すごとに「../」をつけて示します。サイト内にある文書をリンクするのに使用すると良いでしょう。

一方、絶対パスとは、「http://」で始まる形式で、絶対的な位置を指定します。他のサイトの文書にリンクする場合に使用します。

メールアドレスにリンクを張る

メールアドレスにリンクを張ると、訪問者がリンクをクリックしたときにメーラーを起動させることが出来ます。起動されるメーラーは訪問者のブラウザで設定されたモノです。

図1の画面で、「メールへ」というタブをクリックします。すると、以下のような画面になります。

メールアドレスへのリンクを張る画面

宛先部分にメールアドレスを入力し、OKボタンをクリックすると、メールへのリンクが完了します。

リンクを貼ると、<a href="mailto:メールアドレス">リンクを貼った文字列</a>というマークアップになります。

では、実際にメールアドレス部分にリンクを貼ってみて下さい。

ポイント

メールへのリンクで、よく、「メール」という文字列や画像だけにリンクを貼ってしまっている場合を見かけますが、これは訪問者にとっては不親切です。誰しもがブラウザ付属のメーラーを使用しているわけではありませんから、メールアドレスを併記しておきましょう。

ウィルスやSPAMメールが心配な方は、@部分を&#64; と置き換えておくと良いです。サイトを持ったら、ウィルスメールとSPAMメールは付き物とあきらめて、対策を施しておきましょう。

できれば、サイト公開用のメールアドレスは現在使用しているものとは別に取得した方がよいかと思います。

メールアドレス以外にも電話番号や地図情報にリンクを貼ることもできます。PC向けではありませんが、そういうこともできるのを片隅においておくといいでしょう。 時報への電話番号  地図へのリンク

同一文書内にリンクを張る

ページ内の文章が長いなどの理由で、同一ページ内の別の場所にリンクを張る場合があります。こういう場合のリンクの張り方は、以下のようになります。

1.ラベルを付ける

ラベルは、リンク先の部分に付けます。リンク先の文字列を選択して、リンクの挿入ボタンをクリックします。図1の画面で、「ラベルを付ける」ボタンをクリックします。すると、以下のような画面になります。

ラベルを付ける画面

ラベルの部分につけたいラベル名を入力します。ラベル名の付け方にはルールがあります。

ラベル名の入力が終わったら、OKボタンをクリックします。リンク先の文字列の下に点線が引かれます。

ラベルを付けると、<a name="ラベル名">リンク先の文字列</a>というマークアップになります。

2.ラベルへリンクを張る

リンクを張りたい文字列を選択し、リンクの挿入ボタンをクリックします。図1の画面で「ラベルへ」をクリックすると、以下のような画面になります。

ラベルへリンクを張る画面

ラベルの部分で、先ほどつけたラベル名を選択して、OKボタンをクリックします。すると、同一文書内へのリンクが完了します。

ラベルへリンクを貼ると、<a href="#ラベル名">リンクを貼った文字列</a>というマークアップになります。

この章では、文字列に対してリンクを貼る方法を説明しましたが、画像に対してリンクを張ることももちろん可能です。画像に対してリンクを張る場合も文字列に対してリンクを張る場合と同様の方法ですることが可能です。

別文書内の特定場所にリンクを張る(同じサイト内)

別文書の方にあらかじめラベルを作成して、保存しておいて下さい。別文書はホームページ・ビルダー上で開いている必要ありません。

  1. リンクの挿入ボタンをクリックします。
  2. 「ラベルへ」のタブをクリックします。「ラベルへ」タブが表示された状態になります。
  3. 「他のファイル」の「参照」ボタンをクリックします。
  4. リンクを張りたい別文書を選択して、「開く」をクリックします。
  5. 「ラベル」のプルダウンメニューでラベルを選択します。(プルダウンメニューを開くと、別文書にあるラベルが全て表示されます。)
  6. 「OK」ボタンをクリックします。

この章で作成されたHTML文書を見てみる

この章の関連事項