リンクを自由自在に操るために、HTMLの基本情報を教えて欲しい。
こんなお悩みを解説する記事。
本記事を読めば、<a>タグのすべてが分かります。
HTMLを学んで、自由自在にリンクを操りたい人は参考にどうぞ。
スポンサードサーチ
本記事のもくじ
【aタグとは】リンク設定のためのHTMLタグ
aタグは、正式名称『a href（エー・エイチレフ）』と呼ばれ、文字や画像にリンクを挿入するときに使われるHTMLタグです。
基本中の基本タグなので、そこまでプログラミングに詳しくない人でも一度は聞いたことがあるかもしれません。
aタグを使いこなせるようになると、同じウィンドウでリンク先を開いたり、別ウィンドウにしたり、画像にリンクしたり、ダウンロードボタンを作ったり、とウェブサイトに欠かせない要素を作れるようになるので、この機会に全部覚えちゃいましょう。
aタグはとても簡単です。
<a href="https://○△□〜〜.com">ここにテキスト</a>
これだけで、ここにテキストの部分に https://○△□〜〜.com のリンクが挿入されます。
【書き方の基本】絶対URLと相対URLを覚えよう
aタグの中にリンク先を挿入する場合に覚えておきたいのが、URLの書き方です。
2つの種類しかないので、このポイントを押さえておきましょう。
- 絶対URL：
http://からはじまるURLを丸ごと書く - 相対URL：ドメイン以下のファイル名を書く
例えば、内部リンクを貼るときは、同じドメイン内にある違うファイル（ページ）を開くだけなので、ドメインを省略して相対URLを記入するだけでリンクが貼れるようになります。
- 絶対URLで書く：トップページ（
<a href="https://ksonoda.com/top.html">トップページ</a>） - 相対URLで書く：トップページ（
<a href="top.html">トップページ</a>）
こんな感じ。
ちなみに、外部リンクはドメインから根本的に違うため、常に絶対URLで書く必要があります。
内部リンクは絶対URLで書いちゃいけないの？
絶対URLと相対URLの違いは上記の通りですが、内部リンクを貼るときは相対URLにしなきゃいけないというルールはありません。
どちらかといえば、内部リンクも絶対URLで記載したほうが良く、GoogleのSearch Console ヘルプにも、その旨が明記されています。
- 可能な場合は、相対リンクではなく絶対リンクを使用します（たとえば、サイト内の別のページにリンクするときに、mypage.html だけではなく https://www.example.com/mypage.html とします）。
SEOにも影響はない（あったとしても微々たるもの）ので、基本的には絶対URLを使っていればOKですね。
補足：テキストリンクの色について
具体的なaタグの書き方を解説する前に、ちょっとだけ補足です。
たまに、テキストリンクをカラフルにしているブログを見かけますが、インターネットの世界では「リンク = 青色」が一般的です。
青色じゃないと、ユーザーにそれがリンクだとわかってもらえないこともあるので、テキストリンクは基本的に青にしておくことをおすすめします。
スポンサードサーチ
【よく使う“aタグ”をまとめて紹介】リンクの種類
aタグにはいくつか種類があって、それぞれの書き方を覚えておくと、自由自在にリンクが作れるようになります。
よく使う書き方をまとめたので、下記をご参照あれ。
1. 同じウィンドウで開く
クリックしたら、リンク先のURLが同じウィンドウで表示される方法です。
<a href="https://ksonoda.com">トップページ</a>
最も基本的なaタグの使い方なので、まずはこちらを覚えましょう。
この通りに書くと下記のようなリンクになります。
2. 別ウィンドウで開く
クリックしたら、別ウィンドウでリンク先が開くaタグの書き方です。
<a href="https://ksonoda.com" target="_blank" rel="noopener">トップページ</a>
リンク先URLの後ろに target="_blank" rel="noopener"を追加するだけ。
このように書くと、下記のように動きます。
ただし、すべてのリンクを別ウィンドウ表示にしてしまうと、クリックするたびにウィンドウがいくつも立ち上がることになるので、読者からするとちょっとウザいです…。
なので、現在のページとリンク先ページを見比べながら参照したほうが、読者にとって都合が良いときに使うくらいがいいと思います。
3. ページ内リンク（アンカーリンク）
通称、アンカーリンクと呼ばれます。
アンカーリンクを設置することで、ページ内部の細かな場所をリンク先に指定できます。
たとえば、記事の途中に“目次に戻る”というアンカーリンクを貼り、クリックすればいつでも同じページの目次に戻ることができるようにする感じですね。
<a href="#○△□">目次に戻る</a><p id="#○△□">目次</a>
アンカーリンクを貼る場合、上記のようにidを指定することで実装可能です。下記サンプルリンクをクリックすると目次部分に戻ります。
4. 画像をリンクにする
aタグを使うと、テキストだけでなく画像にもリンクを貼ることができます。
<a href="https://ksonoda.com"><img src="ここに画像のURL"></a>
こんな感じで、テキスト部分を<img src="ここに画像のURL">に変えるだけ。簡単です。
5. リンクをボタンにする
リンクをボタンにするとクリック率も上がりやすいと言われています。
ボタンの設置には、CSSのカスタマイズも必要ですが、覚えておくとデザインの幅が広がります。
<a href="https://ksonoda.com" class="button-1">ボタンテキスト</a>
ボタンが作れるようになると、読者の目を引く形で効果的にリンク設置できるようになりますね。
ボタンの作り方
ボタンデザインはググればたくさん出てきます。
自分でオリジナルのボタンを作ることもできますが、すでに大量のボタンデザインがネット上に公開されているので、基本的にはコピペでOKかなと思います。
僕が参考にしているのは、サルワカさんのサイトです。
6. フォローを外す
nofollow属性を指定することで、リンクのSEO効果を無効にすることができます。
nofollowに関しては、SEOの知識になるので、別記事でまとめています。
»【SEO効果あり？】被リンクでアクセスアップ【nofollow / dofollowとは】
<a href="https://ksonoda.com" rel="nofollow">トップページ</a>
具体的には、rel="nofollow"を追記するだけです。SEOに影響させたくない場合は、nofollowにしておきましょう。
別ウィンドウ&”nofollow”
別ウィンドウかつ、nofollowのリンクを設置する場合は、relの中に、ふたつとも記入します。
<a href="https://ksonoda.com" target="_blank" rel="nofollow noopener">トップページ</a>
スポンサードサーチ
まとめ：aタグのリンク設置は難しくない
本記事のまとめです。
リンク設置に使うaタグですが、一度覚えてしまえば難しくありません。
<a href="ここにリンク">ここにテキスト</a>
たったこれだけなので、あとは必要なときに別ウィンドウにするタグを覚えたり、ボタンをカスタマイズしたりしつつ、aタグの仕組みを覚えましょう。
おわり。
