リンクとは、他のページに移動するためのものです。
↓↓↓こんな感じ↓↓↓
わたしのプロフィールもぜひご覧ください!
このページでは、リンクの張り方についてわかりやすく解説します。
応用編として
- CSSでリンクのデザインを変える方法
- SEO対策としてのリンクの張り方
- WordPressでリンクを張る方法
等も解説していますので、ぜひご覧ください!
【基礎編】ホームページにリンクを張る方法
<a href="リンク先URL">リンクテキスト</a>
↓↓↓実際にはこんな感じになります↓↓↓
<a href="https://www.yahoo.co.jp/">Yahoo!Japan</a>
ホームページにリンクを張る具体的な手順
- リンク先のページを開く
- URLをコピー
- 「リンク先URL」の部分にURLを貼り付ける
<a href="https://www.yahoo.co.jp/">リンクテキスト</a>
- 「リンクテキスト」を入力
<a href="https://www.yahoo.co.jp/">Yahoo!Japan</a>
自分のホームページ内にリンクを張る場合、ドメイン名は省略できます。
<a href="https://自分のホームページのURL/access.html">
↓
<a href="/access.html">
別ウィンドウでリンクを開く場合
<a href="リンク先URL" target="_blank">リンクテキスト</a>
別ウィンドウでリンクを開く場合は、「target=”_blank”」を付けましょう。
- 外部サイト
- 画像
などを開く場合は、「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を付けた位置にジャンプできます。
メールソフトを開くようにする
<a href="mailto:メールアドレス">お問い合わせはこちら</a>
リンク先をメールアドレスにし、「mailto:」を付けると、メールソフトが開くようになります。
【応用編】CSSでリンクのデザインを変更してみよう!
色を変えたり、デザイン(見た目)を変更したい場合は、「CSS」を使います。
CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ホームページのデザインを設定するための言語です。
リンクの下線を消す
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対策として効果的なリンクの張り方もご紹介致します。
SEO対策とは
Google等の検索エンジンで検索順位を上げるための対策
無関係なリンクには「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でリンクを張る方法
- リンクを張りたい部分をドラッグ(ボタンを押したままマウスを動かす)し、リンクボタンをクリック
- URLを入力し、青いボタンをクリック
- リンクが張れました!
※リンクをクリックすると[編集](鉛筆のマーク)、[リンクの削除](鎖が離れるマーク)が選べます。必要に応じて使いましょう。

別ウィンドウで開く場合
- リンク設定時に、[リンク設定](歯車のマーク)をクリック
- [リンクを新しいタブで開く]にチェックし、[更新]をクリック
まとめ:ホームページにリンクを張る方法は、2つだけ覚えればOK!
とりあえず、この2つだけ覚えておきましょう!
↓↓↓基本的なリンクの張り方↓↓↓
<a href="リンク先URL">リンクテキスト</a>
↓↓↓別ウィンドウで開く場合(外部サイト、PDF、画像 等)↓↓↓
<a href="リンク先URL" target="_blank">リンクテキスト</a>
リンクはユーザーにホームページを見てもらいやすくするためのものです。
ユーザーにとってリンクがあったほうが親切であれば、リンクを張るようにしましょう。