牛飼いとアイコンの部屋

リンクの話
■他のページにリンクするには？
■同じページの別の場所にリンクするには？
■リンク先を他のフレームに出すには？
■他のサイトにリンクするには？
■別のウィンドウでリンクするには？
■画像でリンクするには？
■ファイルをダウンロードしてもらうには？

■リンクの色を変えるには？
■リンクのアンダーラインを消すには？
■マウスが乗ったら色を変え、アンダーラインを出すには？
■ステータスバーにリンク先の説明を出すには？
■お気に入りに追加するには？
■お気に入りに指定のアイコンを使うには？

■リンクするには許可が必要？
■こういうリンクはやってはいけない
■リンクフリーってなんだろう？

■フレーム内リンク対策 1
■フレーム内リンク対策 2
■フレーム内リンク対策 3

■ 他のページにリンクするには？

リンクには A (アンカー) タグを使います。かならず </A> で閉じてください。

<A HREF="リンク先の URL">説明文や画像 </A>
<A HREF="index.html">トップページ </A>

リンクが書いてある html ファイルを基準にして、一階層上にあるとき
<A HREF="../index.html">トップページ </A>

リンクが書いてある html ファイルを基準にして、２階層上にあるとき
<A HREF="../../index.html">トップページ </A>

リンクが書いてある html ファイルを基準にして、一階層下の data ディレクトリにあるとき
<A HREF="data/index.html">トップページ </A>

■Top

■ 同じページの別の場所にリンクするには？

飛ばしたい部分のすぐ上あたりに、A name= を使って重複しないよう名前をつけます。

<A name="jump00"> </A>

このページが aaaa.htm という名前で目的の個所が jump00 とすれば、リンクを次のように書きます。

<A HREF="aaaa.htm#jump00">飛びます</A>

html ファイルに＃をつけ、続いて name= で決めた名前をつけるとその場所に移動できます。

※ページ最上部に戻すときは＃以下を省略して html ファイル名だけ指定すればＯＫです。

■Top

■ リンク先を他のフレームに出すには？

「フレームの話」のなかの
フレームの中から別のページにリンクするには？　を参照ください。

■Top

■ 他のサイトにリンクするには？

A (アンカー) タグを使います。かならず </A> で閉じてください。
自分のページとのリンクと違うところは、 http:// から始まることです。

<A HREF="リンク先の URL">説明文や画像 </A>
<A HREF="http://www.ushikai.com">牛飼いとアイコンの部屋 </A>

■Top

■ 別のウィンドウでリンクするには？？

target= オプションを使います。

リンク先を別窓で表示
<A HREF="http://www.ushikai.com" target="_blank">牛飼いとアイコンの部屋 </A>

現ページをリンク先のページで置きかえる
<A HREF="http://www.ushikai.com" target="_top">牛飼いとアイコンの部屋 </A>

_blank は、別に好きな名前でもかまいません。
フレームの中から別サイトにリンクするときは、必ず _blank か _top を指定してください。

■Top

■ 画像でリンクするには？

<A HREF="リンク先の URL">画像のタグ </A>　とします
<A HREF="index.html"><IMG src="gazou.gif" width=10 height=15 ALT="トップ" border="0"></A>

画像タグに　BOTDER=0 をつけると周囲にリンクの枠が出なくなります。
画像はなるべく width= height= でサイズを指定するようにします。
ALT= に続いてマウスが乗ったときに出す説明文を入れられます

■Top

■ ファイルをダウンロードしてもらうには？

<A HREF="ファイルの　URL ">テキストなど </A>　とします
<A HREF="http://www.ushikai.com/gazou.zip">gazou.zip(100KB)</A>

テキストにはファイル名やファイルサイズなど書いておくと親切です。

ネットスケープなど、LZH ファイルのダウンロードがうまくできないものもあります。
そのときは Shift を押しながらクリックしてもらうか、あるいはユーザーに .htaccess の修正を
許しているサーバーならば、.htaccess に
AddType application/x-lha-compressed .lzh
の一行を加えてみてください

■Top

■ リンクの色を変えるには？

それぞれのリンクタグに書く
<FONT COLOR=(色)> で色をつけることができます。どの指定より優先されます。

ushikai.com

<A href="http://www.ushikai.com"><FONT COLOR="blue">ushikai.com</FONT></A>

またはスタイルシートで指定
<A href="http://www.ushikai.com" STYLE="COLOR:blue">ushikai.com</A>

BODY タグで一括指定
旧式のブラウザでもサポートされますが、色の優先順位は最下位になります。
<BODY bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#0000ff" alink="#0000ff">
link=(色)：リンクの色
vlink=(色)：訪問済みリンクの色
alink=(色)：リンクをクリックした瞬間の色・あまり使いません

スタイルシートで一括指定
BODY タグの指定より優先されます。<HEAD>～</HEAD> の間に書きます
<STYLE TYPE="text/css">

</STYLE>

リンクをすべて青色(blue) にし、フォントサイズを 10pt にします。
リンク(アンカー)タグすべてに同じ設定を適用するなら次のようにまとめてもＯＫです

a {font-size: 10pt;color:blue }

■Top

■ リンクのアンダーラインを消すには？

スタイルシートで text-decoration:NONE; と指定すれば消えます。

スタイルシートでページ一括指定
<HEAD>～</HEAD> の間に書きます
<STYLE TYPE="text/css">

</STYLE>

リンクをすべて青色(blue) にし、下線を消してフォントサイズを 10pt にします。
リンク(アンカー)タグすべてに同じ設定を適用するなら次のようにまとめてもＯＫです

a {font-size: 10pt;text-decoration:NONE; color:blue }

ワンポイントで下線を消す
ひとつのリンクだけアンダーラインを消すには次のようにします。

<A HREF="abc.htm" STYLE="text-decoration:none">ABC</A>

アンダーラインを出したいとき
この状態である部分的だけアンダーラインを出したいときは、そこを　<UL>～</UL> でくくるか、
<A href="http://www.ushikai.com" STYLE="text-decoration:UNDERLINE">ushikai.com</A>
のように明示的にアンダーラインを表示させます。

■Top

■ マウスが乗ったら色を変え、アンダーラインを出すには？

スタイルシートで hover の部分に text-decoration:UNDERLINE;color:(色) とします。
ほかのリンク属性は text-decoration:NONE; とし、hover と違う色にしておきます。

スタイルシートで一括指定
<HEAD>～</HEAD> の間に書きます。
hover は必ず a:link や a:visited の後に書いてください (CSS2 の仕様)。
<STYLE TYPE="text/css">

</STYLE>

リンクをすべて青色(blue) にし、下線を消してフォントサイズを 10pt にします。
リンクにマウスが乗ったときだけアンダーラインを出し、リンクの文字色を赤にします。

■Top

■ ステータスバーにリンク先の説明を出すには？

「画像の話」のなかの

リンクの説明を出す(ステータス)　を参照ください。

■Top

■ お気に入りに追加するには？

ie 4 以上のユーザーは、ワンクリックでブラウザのお気に入りに追加できます

<FORM>
<INPUT TYPE="BUTTON" class="homepage" onclick="window.external.addFavorite('http://www.ushikai.com/','牛飼いとアイコンの部屋')" value="お気に入りに追加">
</FORM>

■Top

■ お気に入りに指定のアイコンを使うには？

Windows のデスクトップアイコン (ico) を用意します。
これに　favicon.ico(半角英数)　と名前をつけて、トップページのあるフォルダに転送してください。

これでｉｅの「お気に入り」に登録されると、このアイコンが読み込まれます。

一度登録したアイコンを変更すると、相変わらず前のアイコンが出てくることがあります。
このときはブラウザの「お気に入り」からリンクを削除し、再起動します。そして
[ツール]→[インターネットオプション]からインターネット一時ファイルを削除してください。
パソコンを再起動し、登録をやりなおしてみてください。

■Top

■ リンクするには許可が必要？

「リンクには許可を得てください」とあるサイトもありますが、これは法律的に見てどうなのでしょうか。

こちらが参考になると思います→http://www.cric.or.jp/multimedia/QA/Q15.html　
社団法人著作権情報センターの『Q15 無断でリンクを張ることは著作権侵害となるでしょうか』

法的拘束力は無いようです。ただし「メール下さい」とあるときはメールで一言連絡を入れるのが、スムーズな意思疎通のためのマナーと思います。またリンクの方法が指定してある場合もそれを尊重するのがスマートです。そんな面倒な条件はごめんだよというときは、リンクしないでブックマークに登録しておけばよいのです。

では「自由にどうぞ、連絡は不要です」というサイトの場合はどうでしょう。牛飼いウェブもそうなっていますが、このようなサイトへリンクするときには文字通り連絡は不要です。こういうサイトは経験的に「確認のやりとりで自由時間が圧迫されてしまう」ほど多忙なため、あらかじめ「連絡不要」と明示しているケースも多いのです。

たとえば牛飼いウェブではうっかり気を抜くとあっというまに数百通のメールが溜まります。これを読んで、ひとつひとつに返信文を考えて、返信して…一通３分として百通あったら３００分＝５時間です。下手をすると返事はおろか寝る時間も、素材を作る時間もとれなくなります。これを毎日やっていたら死にますね。

そこで「返信は不要です」とあらかじめお断りしているわけですが、しかしながらやはりメールをいただくのは励みになります。時間をみつけては極力返答するように心がけてはいますが、仕事が逼迫しているときなどはどうしても返事が不能になることが多々あります。「返事もせんでタカピーだ！」といわれると苦しいのですが、特に個人サイトの場合はやむにやまれぬ裏事情があるとご理解いただけますと幸いです。

余談ですがリンクの条件にあまりにも厳しい規制をかけたり、リンクを強要したりするとイメージダウンになりかねません。つまるところは「お互い様」、「リンクさせてやる」のではなく「気に入ったら自己意志でリンクしてもらう」ものなのですから、互いにイーブンな関係と思うのです。

■Top

■ こういうリンクはやってはいけない

うっかりやってしまうミスに、フレームの中に相手サイトを取り込んでしまうというものがあります。
たとえばフレーム内のページに target= オプションの無い
<a href="http://www.hogehoge.com">hogehoge</a>
というタグを書くと、相手先はそのフレームの中に取り込まれます。

相手サイトへのリンクのタグを書くことは問題ありませんが、その書き方を間違え target="_blank" や target="_top" を付け忘れて相手ページを取り込んでしまうと著作権の侵害になり、告訴されることがあります。

タグの書き方については「フレームの話」のなかの
フレームの中から外部サイトにリンクするには？
を参照ください。

_top と _blank 考
外部サイトを開くときに自分のウェブと置き換える(_top) か別の窓で開くか(_blank) ですが、これは人それぞれです。が、個人的には基本は _top と思います。このほうがアクセスユーザーにとって見やすくなるためです。もし別窓で開きたければユーザーが[Shift]を押しながらクリックすればよいので、多数の窓が開いて負担になることもありません。

ただしコンテンツの種類によっては別窓で開いたほうが使い勝手が良い場合もあります。要は TPO を考えて使うのがベストということですね。

牛飼いウェブでは基本的に _top を使いますが、やむをえず _blank を使っている部分もあります。
たとえば牛飼いウェブでは自動リンクからのジャンプに "_blank" を使っています。これは自動リンクそのものが CGI で動作しているため、自動リンクページへのアクセスを抑え CGI の起動回数をなるべく少なくしてサーバー負荷を低減させるのが目的です。負荷が低減できればページ表示が速くなり、アクセスしてくれた人にメリットをもたらすことができます。

アクセスユーザーのアップを目指すなら…
もしアクセスアップのために自分のページを表示したままにしておきたい、ということで別窓を多用しているのなら、これは完全に逆効果です。見にくいサイトは敬遠されるので、むしろアクセスアップの障害になるでしょう。

URL を指定した直接リンク
これもダメです。これをやるとサーバーに無用な負荷がかかるためです。

なぜダメなのかは 直接リンクの話 を参照ください。
直接リンクをしているサイトはサーバーログで把握できます。あまりに負荷が大きい場合は利用を断るようにしていますが、たとえば何気なくチャットやBBSに貼った画像ひとつでも、累積すると大きな負荷になります。

ある IP アドレスからの直接画像リンクがあり、その画像がウェブ改変で外れたためにエラーログファイルに数千行のエラーログが書き出される…などというのは実際よくあるケースです。

バナー画像の直接リンク
ちいさなバナー画像も直接 URL 指定で貼られた場合大きな負荷になります。なかにはバナーの貼り方として自分のサーバーのバナーイメージの URL を指定しているところもありますが、仮に3KB のバナーを用意したとしましょう。これを月間1500アクセス (50アクセス/day) のウェブ100個所からリンクされたとしたら、その転送量は 439MB…どうです？意外に大きな負荷ですね。プロバイダ内部では管理ログもたまります。サーバー同士のやりとりの負荷もかかります。

でもこれは相手側に画像を渡すためだけの奉仕負荷で、負荷を負担したからといって自分のページにアクセスしてくれるわけではないのです。一方その分だけ確実に自分のサーバーが重くなります。しかもおなじプロバイダに加入している他のユーザーにまで迷惑をかけているのですが、はたしてここまで認識しているのでしょうか。

■Top

■ リンクフリーってなんだろう？

これも難しい和製英語です。

リンクフリーと書く場合、自由にリンクして下さいというニュアンスで用いられていると思います。つまりページのリンクに特別な条件はつけない、するもしないも自由…ということなんじゃないかと思うのですが、割と良く見るのが、

「リンクフリーです。でもトップページ以外はダメです。」とか、
「リンクフリーです。でも素材を使ったらリンクしてください。」などですが、
これってフリーといいつつ条件つけてるやん？　と突っ込みたくなるのは私だけ…かな？(^^;

コンテンツ利用＝リンク必須でもそれはウェブマスターの自由ですからまったくかまわないのですが、リンクフリーの「フリー」って何だ？と素朴な疑問に思えたもので。

これがたとえば「トップページへのリンクはご自由にどうぞ」とか、
単に「素材ご利用の際はリンク願います。」だったら読んで字の如しなんで明快ですけども。

■Top

■ フレーム内リンク対策 1

自分のウェブのフレーム内に取り込むようにリンクを書くと、相手のページをあたかも自分が考案し制作したかのように表示できます。これは楽でいいですね。リンクを貼るだけで相手先のコンテンツを取り込んで見栄えのするページをつくれますから。労力も要らないしコストもかからない。

でもこれをやられるリンク先はたまったものではありません。米国では訴訟までおこなわれていますが、何よりもオリジナル制作者の創作意欲を失わせることになります。そこで次にあげるのがコンテンツを制作する側からささやかな対策を講じる方法です。

非フレーム内ページに有効です。HTMLファイルに次の JaveScript を入れます。
<HEAD> と </HEAD> の間がよいでしょう。
　
<SCRIPT language="JavaScript">

</SCRIPT>

これでフレーム内にこのページが表示されたとき、フレームを破棄してトップページとして表示されます。
このスクリプトは、それ自身がフレーム内ではない単独ページで使えます。
self.location.href のかわりに this.location.href でもＯＫです。

■Top

■ フレーム内リンク対策 2

上の例はフレームなしページのリンク対策でした。かなり有効ですが、上のスクリプトではこちらもフレームを使えなくなってしまいます。それではこちらがフレームを使っている場合に相手先フレーム内からのリンクを防止するにはどうしたらよいでしょう。

一例として以下に書いてみましょう。

まず、フレームを組むときにはかならずそれぞれのフレーム名をつけますね。この名前の取得は window.name で可能ですので、これを利用して。。

たとえばフレームに 'myframe' という名前をつけていたとすると、

myframe に表示させる HTMLファイルに次の JaveScript を入れます。
<HEAD> と </HEAD> の間がよいでしょう。
　

<SCRIPT language="JavaScript">

</SCRIPT>

ページが読み込まれたときに 'myframe' というフレーム内で表示されていなければ、 ushikai.com に飛ばします。

■Top

■ フレーム内リンク対策 3

対策２ではフレーム名にありがちな名前をつけてしまうと、たまたま一致したときに効果がでない場合もあります。そこで派生版として、今度は親フレームのロケーションをチェックします。

たとえばここのページは親のフレームともども mydir ディレクトリにあるとすると、親フレームのロケーション情報にもかならず mydir という文字を含みます。これを利用し想定外のロケーションにある親からひっぱられて表示されたら、強制的に指定URL に飛ばすようなスクリプトを書きます。

HTMLファイルに次の JaveScript を入れます。
<HEAD> と </HEAD> の間がよいでしょう。
　
<SCRIPT language="JavaScript">

</SCRIPT>

このページの親のロケーションに mydir が含まれないと、自動的に http://www.ushikai.com/ へ飛びます。

'mydir' のかわりに 'ushikai.com' などとしても有効かと。その場合はサーバーが ushikai.com でなければ ushikai.com に飛ぶことになります。ところがそれでも取り込まれてしまうケースもあるでしょう。そんなときのためにページ内に自分の [HOME] へのリンクや、著作表示を入れておくとよいと思います。

■Top