ホームページにリンクを張る方法をどこよりもわかりやすく解説！

えりー

こんにちは、えりーです。

リンクとは、他のページに移動するためのものです。

↓↓↓こんな感じ↓↓↓
わたしのプロフィールもぜひご覧ください！

このページでは、リンクの張り方についてわかりやすく解説します。

応用編として

• CSSでリンクのデザインを変える方法
• SEO対策としてのリンクの張り方
• WordPressでリンクを張る方法

等も解説していますので、ぜひご覧ください！

【基礎編】ホームページにリンクを張る方法

<a href="リンク先URL">リンクテキスト</a>

↓↓↓実際にはこんな感じになります↓↓↓

<a href="https://www.yahoo.co.jp/">Yahoo!Japan</a>

ホームページにリンクを張る具体的な手順

1. リンク先のページを開く
   
2. URLをコピー
   
3. 「リンク先URL」の部分にURLを貼り付ける

   <a href="https://www.yahoo.co.jp/">​リンクテキスト</a>

4. 「リンクテキスト」を入力

   <a href="https://www.yahoo.co.jp/">Yahoo!Japan</a>​

にゃーご

リンクが上手く張れないにゃ・・・

えりー

そんな時は、打ち間違いや拡張子（.html等）に間違いがないかもチェックしてみよう！

<a href="https://自分のホームページのURL/access.html">
↓
<a href="/access.html">

別ウィンドウでリンクを開く場合

<a href="リンク先URL" target="_blank">リンクテキスト</a>

別ウィンドウでリンクを開く場合は、「target=”_blank”」を付けましょう。

• 外部サイト
• PDF
• 画像

などを開く場合は、「target=”_blank”」を付けてあげると親切ですし、離脱を防ぐことが出来ます。

画像にリンクを張る

<a href="リンク先URL" target="_blank"><img src="dog.jpg" alt="犬の写真"></a>

画像にリンクを張る場合は、imgタグをaタグで囲えばOKです。

画像は戻るボタンが表示されないため、別ウィンドウで開く「target=”_blank”」を付けてあげると親切です。

PDFにリンクを張る

<a href="https://●●●.com/example.pdf" target="_blank">リンクテキスト</a>

PDFにリンクを張る場合、事前にPDFをアップロードしておく必要があります。

PDFのURLをリンク先として指定しましょう。

PDFも戻るボタンが表示されないため、別ウィンドウで開く「target=”_blank”」を付けてあげると親切です。

特定の位置にリンクを張る

<a href="#contents">コンテンツを見る</a>

・・・・・・

<div id="contents">
<p>コンテンツ内容</p>
</div>

飛び先に「id=”任意の名前”」を付けます。

リンク先URLを「#任意の名前」にすれば、idを付けた位置にジャンプできます。

えりー

「id」＝「#」と覚えましょう！

メールソフトを開くようにする

<a href="mailto:メールアドレス">お問い合わせはこちら</a>

リンク先をメールアドレスにし、「mailto:」を付けると、メールソフトが開くようになります。

【応用編】CSSでリンクのデザインを変更してみよう！

色を変えたり、デザイン（見た目）を変更したい場合は、「CSS」を使います。

えりー

HTMLで文章を作り、CSSで装飾します。

リンクの下線を消す

a {
text-decoration: none;
}

リンクの色を変える

a {
color:#カラーコード;
}

マウスオンで色を変える

a:hover {
color:#カラーコード;
}

マウスオンは「:hover」を付けると指定できます。

マウスオンで下線を付ける

a:hover {
text-decoration: underline;
}

ボタンにリンクを張る

↓↓↓HTML↓↓↓

.btn {
text-decoration: none; /* 下線を付けない */
color: white; /* 文字色 */
background: red; /* 背景色 */
padding: 10px 20px; /* 内余白 */
border-radius: 5px; /* 角を丸く */
display: block; /* ボタン全体をクリック出来るようにする */
}

↓↓↓CSS↓↓↓

<a href="リンク先URL" class="btn">お問い合わせ</a>

これはちょっと難易度が高いですが、CSSだけでもボタンを作れてしまいます！

「CSS ボタン」等と検索すると、ソースコードがたくさん見つかるので、コピペして使うのがおすすめです。

【応用編】SEO対策としてのリンクの張り方

応用編になりますが、SEO対策として効果的なリンクの張り方もご紹介致します。

無関係なリンクには「rel=”nofollow”」を付ける

<a href="リンク先URL" rel="nofollow">リンクテキスト</a>

広告など、自分のホームページとは無関係な場所へのリンクには、「rel=”nofollow”」を付けるようにしましょう。

リンクテキストは具体的な名前にする

↓↓↓ NG例 ↓↓↓
<a href="リンク先URL">こちら</a>

↓↓↓ OK例 ↓↓↓
<a href="リンク先URL">お問い合わせ</a>

「こちら」などといった文言よりも、「お問い合わせ」など具体的なテキストにしたほうがSEO的に好ましいです。

にゃーご

具体的なほうがわかりやすいにゃ！

外部リンクと内部リンク

SEO対策的には、「外部リンク」と「内部リンク」を増やすと良いと言われています。

外部リンク：他のホームページ→自分のホームページへのリンク

「外部リンク」とは、他のホームページ→自分のホームページへのリンクのことです。

ユーザーの役に立つホームページを作れば、自然に外部リンクは増えていきます。そのため、特に外部リンクの対策をする必要はありません。

もしSNSがあれば、SNSからホームページへ行けるリンクは設置しておいたほうがよいでしょう。（ユーザーをSNSからホームページへ誘導する意味合いのほうが強いです。）

内部リンク：自分のホームページ→自分のホームページへのリンク

ホームページ内を見て回りやすくするために「内部リンク」を増やすことも、SEO対策として効果的です。

「内部リンク」は積極的に増やすようにしましょう。

えりー

パンくずリストを設定するのもおすすめです。

↓↓↓パンくずリストとはこれのこと！↓↓↓

にゃーご

美味しそうにゃ

WordPressでリンクを張る方法

1. リンクを張りたい部分をドラッグ（ボタンを押したままマウスを動かす）し、リンクボタンをクリック
   
   
2. URLを入力し、青いボタンをクリック
   
3. リンクが張れました！
   

※リンクをクリックすると[編集]（鉛筆のマーク）、[リンクの削除]（鎖が離れるマーク）が選べます。必要に応じて使いましょう。

まとめ：ホームページにリンクを張る方法は、2つだけ覚えればOK！

とりあえず、この2つだけ覚えておきましょう！

↓↓↓基本的なリンクの張り方↓↓↓

<a href="リンク先URL">リンクテキスト</a>

↓↓↓別ウィンドウで開く場合（外部サイト、PDF、画像 等）↓↓↓

<a href="リンク先URL" target="_blank">リンクテキスト</a>

にゃーご

別ウィンドウで開く場合は、「target=”_blank”」を追加するんだにゃ

リンクはユーザーにホームページを見てもらいやすくするためのものです。

ユーザーにとってリンクがあったほうが親切であれば、リンクを張るようにしましょう。

えりー

ユーザーを第一に考えることが一番のSEO対策です！

ABOUT ME

えりー

「空創デザインオフィス」代表。 フリーランスデザイナーとして、web・グラフィックデザインを行う傍ら、ホームページや広告を作りたい人への支援、web・グラフィックデザイナーの育成、ブロガー・アフィリエイターの育成等を行っている。 →プロフィール →お問い合わせ →空創デザインオフィス