【コピペOK】ホームページにリンクを貼る方法（別画面・ページ内・ボタン等）

今回は、

• ホームページにリンクを貼る方法
• リンク先への許可について
• ホームページの「リンク集」ページについて

などについて解説します。

下記目次から見たい箇所までジャンプできます。

ホームページのリンクとは：クリックで別の場所に飛ぶ機能

ホームページのリンクとは、ページとページ（もしくは、ページ内の任意の場所）を繋ぐ機能のことです。

もっと簡単に言えば、クリックしたら別の場所（自分のホームページ内 or 他のホームページ）に飛ぶのがリンクです。

えりー

「貼る」だと日本語的には間違っているので、日本語に厳しい方だと気になってしまうかもしれません…すみません…

ホームページにリンクを貼る方法

ホームページにリンクを貼る方法は色々あるのですが、よく使うリンクの貼り方に絞ってご紹介したいと思います。

【基本】リンクの貼り方

1<a href="http://www.●●●.com">こちらをご覧ください</a>

リンクを貼るためには、＜a＞タグを使います。

「href=””」にリンク先のURLを入れることで、リンクを貼ることが出来ます。

えりー

絶対パスと相対パスの違いも説明したいのですが、ちょっと難しくなってしまうので、ここでは割愛します。

別の画面で開くリンクの貼り方

1<a href="http://www.●●●.com" target="_blank" rel="noopener">こちらをご覧ください</a>

別画面で開きたい場合は、＜a＞タグに「target=”_blank” rel=”noopener”」を追加します。

「rel=”noopener”」はセキュリティ対策のためにつけるものなのですが、ちょっと難しいので、ここでは詳しい解説は割愛します。とりあえず付けとけばOKです。

えりー

特に、外部のホームページやPDFファイルにリンクを貼りたい場合は、この別画面で開くリンクを使いましょう。

《別画面で開く場合はアイコンをつけると親切》

別画面で開くリンクだとわかるように、下図のようなアイコンをつけるとより親切です。

アイコンの代わりに、「別画面で開きます」などとテキストで補足説明しても構いません。

こちらのアイコンは、下記素材サイトからダウンロードしました。

▼商用利用可能なフリーアイコン素材サイト　SATO ICON

https://sato-icons.com/（別画面で開きます）

ページ内リンクの貼り方

リンク元

1<a href="#example">ここをクリック</a>

「#」はidという意味です。

上記例の場合、「example」という名前のidにリンクを貼っています。

つまり、クリックすると「id=”example”」と記載されているタグに飛びます。

リンク先

1<p id="example">ここに飛ぶ</p>

リンク先には、「id=”idの名前”」を付けます。

idの名前は、半角英数字でわかりやすい名前を付けましょう。

上記例では、＜p＞タグにidを付けていますが、別のタグでも構いません。

えりー

本記事の目次もページ内リンクです

画像（ボタンなど）のリンクの貼り方

1<a href="http://www.●●●.com"><img src="img/●●●.jpg" width="000" height="000" alt="画像の説明"></a>

予め、ボタンなどの画像ファイルを、ホームページのフォルダ内のどこかに保存しておきます。（上記例では「img」フォルダ）

＜img＞タグで画像ファイルを呼び出します。

alt（オルト）に入れたテキストは、何らかの理由で画像が表示されなかった時に代わりに表示されます。

音声ブラウザがページを読み上げる際にも使用されます。

えりー

SEO対策的にも、altを入れておいたほうが効果的です

電話番号のリンクの貼り方

1<a href="tel:000-0000-0000">TEL:000-0000-0000</a>

電話番号にリンクを貼りたい場合は、「href=””」の中に「tel:電話番号」を入れます。

えりー

スマホやタブレットでは、電話番号をタップすると電話がかけられたほうが便利ですよね

より詳しくは下記記事にて解説していますので、ぜひあわせてご覧ください。

あわせて読みたい

【簡単】ホームページに電話番号を載せる場合の載せ方・リンク設置方法

メールアドレスのリンクの貼り方

1<a href="mailto:info@example.com">info@example.com</a>

メールアドレスにリンクを貼りたい場合は、「href=””」の中に「mailto:メールアドレス」を入れます。

ただ、この方法の場合だと迷惑メールが来やすくなってしまうというデメリットがあります。

えりー

迷惑メールが気になる場合は、メールアドレスにはリンクを貼らないほうが良いです。

迷惑メールを防ぐための対策を下記記事にて詳しくご紹介しています。ぜひ、あわせてご覧ください！

あわせて読みたい

ホームページにメールアドレスのリンクを貼る方法＆スパム対策3選

（補足）リンク先への許可は基本的には不要

単純にリンクを貼るだけなら、リンク先への許可は基本的には不要です。

ただし、リンク先から引用の範囲を超えて文章を転載させていただく場合などは、許可が必要です。

引用についてさらに詳しくは、下記記事をご覧ください。

あわせて読みたい

ホームページやブログに引用を記載する方法【2つのポイント】

（補足）ホームページに「リンク集」を設置するのはおすすめできない

ホームページに「リンク集」を設置したいのですが…

というご相談を時々いただくのですが、

ホームページにリンク集を設置するのは、あまりおすすめしていません。

リンク集があることで、折角自分のホームページを見に来てくれたユーザーが、すぐに別のホームページに行ってしまうことも考えられます。

これはちょっともったいないですよね…。

また、ユーザーは見たいホームページを自分で検索するので、リンク集があってもそもそもあまり意味がないことが多いです。

リンク集があることでユーザーの役に立つなら良いのですが、あまり意味がないなら設置しないほうが良いです。

えりー

ページ数が増えるほど制作費用も上がってしまうので、あまり必要のないページはカットすることをおすすめしています。

まとめ：まずは２つのリンクの貼り方を押さえよう！

まずは、下記２つのリンクの貼り方だけ押さえておきましょう！

▼基本となるリンクの貼り方

1<a href="http://www.●●●.com">こちらをご覧ください</a>

▼別画面で開くリンクの貼り方

1<a href="http://www.●●●.com" target="_blank" rel="noopener">こちらをご覧ください</a>

えりー

この２つは特によく使います。

空創デザインオフィスでは、ホームページ作成・リニューアル、自分でホームページを作成したい方へのサポートなども承っております。

下記ボタンよりお気軽にお問い合わせください！（お見積りは無料です）

えりー

Web・グラフィックデザイナー / ブロガー

2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです！