ホームページのリンクタグ作り方
無料ホームページを作成していると、リンクをしてみたり、画像を使ってみたりとリンクを貼ることが増えてきます。
リンクするときのhtmlタグは <a href= のタグですが、どのホームページでも必ず出てくる、ホームページの作成に欠かせない大切なhtmlタグです。
html のソースで見てみると、このようなタグになります。
<a href="参照するリンク先のＵＲＬ">アンカーテキスト</a>
例えば、あなたがこのページへのリンクを貼ろうと思った際、リンクタグの作り方の手順はこんな感じになります。
- ブラウザに表示されているURLをコピペして、上の「参照するリンク先のＵＲＬ」の箇所に貼り付ける。
<a href="http://www.homepage-tukurikata.com/hp/link.html">アンカーテキスト</a> - リンク先のページのタイトルを「アンカーテキスト」の部分にコピペで貼り付けて完成。
<a href="http://www.homepage-tukurikata.com/hp/link.html">ホームページのリンクタグ作り方</a>
アンカーテキストはどんな言葉でも自由ですが、一般的には、そのページのタイトルとか、「こちらのサイト」とか、もしくはＵＲＬをそのまま記入しているケースが多いです。
詳細：リンクのhtmlタグ a href
このリンクタグの「 href 」というのは、「ハイパーレファレンス」の略で、レファレンスというのは参照という意味です。
あるページからリンクタグをクリックすると他のページにとんで参照できるので、文章を超えてハイパーに参照するというニュアンスです。
何気に使用しているリンクタグの <a href= タグではありますが、このタグがないとインターネットは機能しません。
検索エンジンのグーグルも、この <a href= をたどってウェブサイトのページ情報を収集しているので、とても大事な html タグです。
ホームページの外部リンクと内部リンク
リンクには、大きくわけて「外部リンク」と「内部リンク」があります。
ホームページ内のほかのページにリンクする場合を内部リンク、外部のサイトへリンクする場合を外部リンクといいます。
また、「発リンク」といった場合、関連性のあるページへリンクすることによってSEO対策するという意味合いになります。
内部リンクには、詳しくみると、つづきを読むなどで使われる name 指定や、ページの上部へ移動するpagetopなどの「同一ページ内のリンク」もあります。
- 外部リンク <a href="外部サイトのＵＲＬ">アンカーテキスト</a>
- 内部リンク <a href="サイト内のＵＲＬ">アンカーテキスト</a>
- 同一ページ <a href="同一ページ内のname指定した特定箇所">more など</a>
このなかで、外部リンクはURLを省略して記述することはできませんが、内部リンクの場合はURLを省略して書くこともできます。
ホームページの絶対リンクと相対リンク
リンク先のＵＲＬを省略しない場合を絶対リンク、省略する場合を相対リンクといいますが、初心者簡単なのは、省略しない絶対リンクでの書き方です。
多少長くなってしまうかもしれませんが、ホームページの作成初心者は絶対リンクで作成するのがいいと思います。
たとえば、このページから当サイト内の「ホームページのフォルダと階層」のページへ絶対リンクを貼る場合はこんなリンクタグになります。
<a href="http://www.homepage-tukurikata.com/hp/folder.html">ホームページのフォルダと階層</a>
このリンクタグは内部リンクですので、ドメインのURLの部分を省略して、相対リンクのこんなふうにしても同じ機能をはたすことになります。
<a href="http://www.homepage-tukurikata.com/hp/folder.html">ホームページのフォルダと階層</a>
赤字のドメインの部分を省略して…
<a href="/hp/folder.html">ホームページのフォルダと階層</a>
実際の相対リンクタグ：ホームページのフォルダと階層
トップページの場合はこのようなタグです。
<a href="/">ホームページの作り方.com</a>
同一階層へのリンクの場合は、さらに省略することができ、上のように省略する以外にも、スラッシュをつけないでそのままファイル名を記述できます。
<a href="folder.html">ホームページのフォルダと階層</a>
ただ、独自ドメインで作成している場合は大丈夫ですが、ジオシティーズなどのサブディレクトリ型の無料ホームページの場合は注意が必要になります。
例えば、トップページへのURLを省略して相対リンクで作成したとしても、自分のホームページではなくヤフージオシティーズのトップページへ飛んでしまったりすることもあります。
例）
自分のホームページのトップページ
http://www.geocities.jp/freehomepageblog/
このようなサイトで、URLを省略してトップページへのリンクを / と記述しても、http://www.geocities.jp/freehomepageblog/ ではなく、
http://www.geocities.jp/ のポータルサイトのトップへ飛んでしまいます。
独自ドメインを取得している場合と無料のホームページをレンタルしている場合では、ＵＲＬの省略方法にも若干の違いが出てきてしまうので、絶対リンクでとりあえず作成しておくことをおすすめします。
相対リンクにすることの利点は、主に、ドメインを変更してサイトの url が変わってしまった場合、いちいち全部のページの URL を変更しなくても、そのままアップロードできるので、サイトの引越しが楽だという点にあります。
ドメインを変更する予定がない場合は、絶対リンクで作成しておくのがぶなんです。