パソコン/ハイパーリンクの設定

top / パソコン / ホームページの作り方

ハイパーリンクの設定

2020/5/5

サイト内ページへのリンクは相対パスで　
　サイト内ページにリンクを貼る場合は、相対パスを使います。
　例えば、このページから、同じサイト内にある「スマホページを作る (1)モバイルフレンドリーと」というページにリンクを貼る場合、相対パスで、次のように記述します。

<ahref= "../_homepage/body.html">タダで広告なしのホームページを作ってみよう</a>　
　リンク先のページの絶対パスは、次のとおりです。

https://tvrock69.cloudfree.jp/pc/hp/sumaho-1/body.html　

　このページの絶対パスは、次のとおりです。

https://tvrock69.cloudfree.jp/pc/hp/link/body.html　

　このファイルのある「link」フォルダーから、ひとつ遡り「hp」フォルダーに行き、そこから「sumaho-1」フォルダーに降りると目的のページに到達します。この関係を示しているのが相対パスです。
　つまり、相対パスは、このページとリンク先のページがどのような位置関係にあるかを示しています。同じフォルダーにあるファイルや、下位フォルダーのファイルにリンクを貼る場合は、その方がずっと簡単です。

ターゲットの設定は意外と重要　
　リンク先をどのような場所に表示させるかを指定しなければ（「ターゲット」を指定しなければ）、「target="_self"」の扱いとなり、現在のページがリンク先のページに書き換えられます。インラインフレームに埋め込まれた部分が「target="_self"」の設定になっていると、インラインフレームに埋め込まれた部分のみが書き換えられるだけです。
　たとえば、この「ハイパーリンクの設定」というページから、「(1)モバイルフレンドリーとは」というページに移動するため、右フレームのリストから該当のリンクをクリックするとします。

　その場合、右フレームのリストのページで、ターゲットを指定していなければ、「target= "_self"」の扱いとなるので、右フレームだけが「(1)モバイルフレンドリーとは」に書き換えられてしまいます。

　ページ全体を書き換えたい場合は、「target="_parent"」と指定しなければいけません。
　また、ページを読んでいる途中に参照ページのリンクをクリックした場合、「target="_self"」となっていると、ページがリンク先に入れ替わってしまうので、参照後、元のページに戻らなくてはなりません（スマホと違って、画面の大きなPCでは、この作業が結構わずらわしいです）。
　そこで、「target="_blank"」と指定すれば、新しいタブが開かれ、そこにリンク先のページが表示されるようになります。
　しかし、リンクを参照するたびに新しいタブがどんどん開いてしまうというのも煩わしい感じもします。その場合、「target= "_rokuga"」などと名付け、リンク先の場所を特定しておけば、最初に開いたタブに次々と上書きされるので好都合です。
　以上の関係をまとめると、次のようになります。

通常のページフレーム

_self ページ全体を書き換えそのフレームのみを書き換え

_parent ページ全体を書き換えページ全体を書き換え

_blank その都度新しいタブで開か
れるその都度新しいタブで開か
れる

_rokuga 固定されたタブで開かれる固定されたタブで開かれる

　「target="_rokuga"」を基本にしておきたいという場合は、<head>と</head>の間に<base target= "_rokuga"> というタグを書き込みます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>ソフトウェア/ハイパーリンクの設定</title>
<meta content="text/html; charset=shift_jis" http-equiv="Content-Type">
<meta name="GENERATOR" content="MSHTML 8.00.6001.23588"><link rel="STYLESHEET" type="text/css" href="../../../rokuga.css">
<base target="_rokuga"></head>
<body style="BACKGROUND-COLOR: #c0c0c0">
　なお、その場合でも本文中でターゲットを個別に指定すればそちらが優先されます。
　このように、ちょっとした心遣いでサイトが随分使いやすくなります。ターゲットの設定は意外と重要だといえます。

フレームではターゲット設定が重要な基本要素　
　フレームページではターゲット設定が重要な基本要素となります。
　たとえば、次のようなフレームを作ったとします。

<HTML>
<HEAD>
<TITLE>hp</TITLE>
</HEAD>
<FRAMESET COLS="200,600">
<FRAME name="F1" src="list.html">
<FRAME name="F2" src="body1.html">
</FRAMESET>
</HTML>
　ウェブ上では、このページは次のように表示されます。

FRAME"F1"（list.html）
　body1
　body2

FRAME"F2"（body1.html）
　本文

　左のフレーム（F1）にはリストが、右のフレーム（F2）には本文が入ります。左のリストの「body2」に、<a href="body2.html" target="F2">body2</a>というリンクは貼っておけば、body2のリンクをクリックすれば、右のフレーム（F2）の内容がbody2.html に置き替えられます。