【web】リンクの貼り方いろいろ【初心者向け】

インターネットを使っていると当たり前のように使っている「リンク(link)」ボタン。

こういうやつです。

「リンク(link)」は直訳すると「連結する」という意味になります。
IT用語でいうと“インターネットのとあるページから別のページに移動する仕掛け”のことを指します。
この当たり前と思える機能が意外とインターネットの最大の特徴とも呼ばれ1つのページから、ありとあらゆるページへ「つながる」という大きな意味を持ちます。

Googleで検索をして出てくる検索結果は全てリンクでつながってますよね。
そんなインターネットにおいて重要な存在である「リンク(link)」の設定方法をまとめましたので
皆様のブログやホームページにお役立てください。

タイトル

webページへジャンプするリンク

まずはスタンダードに別のウェブページにジャンプするリンクです。
リンクの設定には<a>タグを用い、飛び先のURLを「href(エイチレフ:Hypertext Reference ハイパーテキスト リファレンスの略)」要素に指定します。

<a href="https://hyakuyattsu.com/">別のページにジャンプ</a>

これをhtmlに記述すると下のようになり、クリックすると「https://hyakuyattsu.com/」というURLにジャンプします。

別のページにジャンプ

画像にもリンクを設定

リンクはテキストだけでなく画像にも貼ることができます。
<a></a>タグの間にテキストではなく、画像を読み込む記述「<img src=”ファイルパス”>」を挿入すると画像にリンクが貼れます。

<a href="https://www.instagram.com/daruma108/"><img src="insta.jpg"></a>

新しいウィンドウ(タブ)で開くリンク

1つのサイト内の別ページではなく、外部のサイトなどへジャンプさせる場合のリンクボタンには「新しいウィンドウで開く」設定を設けます。
先ほどの通常のリンクにターゲット要素「target=”_blank”」を追記します。

<a href="https://hyakuyattsu.com/" target="_blank" >別のページにジャンプ</a>

htmlに記述しても見た目は全く変わりませんが、クリックした時にリンク先を新しいウィンドウで開く設定になりました。

別のページにジャンプ

他にも指定できるtarget要素は下記のとおりです。が「target=”_blank”」以外はあまり使う機会はないように思います。指定しすぎるとユーザの使い勝手が悪くなる恐れがありので注意しましょう。

  • _blank:新規のウィンドウに表示
  • _self:現在のフレーム(ウィンドウ)に表示
  • _parent:親フレームに表示
  • _top:フレーム分割を解除してウィンドウ全体に表示

ページ内リンク

「記事の目次」や「ページトップへ戻るボタン」などに使われる、1つのページ内の所定の位置にスクロールを移動させる、ページ内リンクの設定方法です。

ページ内リンクはあらかじめ移動させたい場所に、名前を付けておく必要があります。
例えるならドラゴンボールの悟空が人の“気”を見つけて瞬間移動するのと同じで、誰もいない場所には瞬間移動できません。
<a>タグのname要素とid要素に任意の名前(半角英数)をつけておきます。

<a name="daruma" id="daruma" >タイトル</a>

仕込んだこの“気”(タグ)をめがけて瞬間移動します。
方法は通常のリンクのURLの最後に「#」をつけて飛び先の名前を指定します。

<a href="https://hyakuyattsu.com/create/web/web-link#daruma">所定の位置に移動</a>
所定の位置に移動

ファイルのダウンロードリンク

ファイルをダウンロードできるリンクも同じように設定できます。
URLを記述していた場所をダウンロードファイルに変更します。

エクセルファイルのダウンロードリンク

<a href="https://hyakuyattsu.com/wp/wp-content/uploads/2020/04/muda.xls">Excelダウンロードリンク</a>
Excelダウンロードリンク

リンク先をエクセルファイルに指定するとファイルを直接ダウンロードできるように設定できます。
ただ、ファイルをそのままダウンロードさせるのではなく、通常はZIPファイルなどに圧縮し、サーバに入れておきましょう。

ZIPファイルのダウンロードリンク

<a href="https://hyakuyattsu.com/wp/wp-content/uploads/2020/04/muda.xls.zip">ZIPダウンロードリンク</a>
ZIPダウンロードリンク

このリンクをボタンに仕込むとこんな感じになります。

PDFファイルのダウンロードリンク

PDFファイルに関しては、ブラウザ上で開いてからダウンロードする場合と、いきなりダウンロードする場合の2パターンの設定が可能です。

PDFをプラウザ上で開く場合

PDFをブラウザ上で開いてからダウンロードしてもらう場合は、通常のリンクでPDFファイルを指定します。

<a href="https://hyakuyattsu.com/wp/wp-content/uploads/2020/04/muda.pdf">PDFファイルを開くリンク</a>
PDFファイルを開くリンク

PDFファイルを開き、上部のツールバーのボタンよりダウンロードします。

PDFをブラウザ上で開いてからダウンロードしてもらう場合は、通常のリンクでPDFファイルを指定します。

PDFを直接ダウンロードさせる場合

もう1つの方法は直接PDFファイルをダウンロードさせる方法です。
「download」要素を追加しPDFのURLを指定すると、ファイルを開かずに直接ダウンロードができるリンクになります。

<a href="https://hyakuyattsu.com/wp/wp-content/uploads/2020/04/muda.pdf" download="https://hyakuyattsu.com/wp/wp-content/uploads/2020/04/muda.pdf">PDFファイルをダウンロード</a>
PDFファイルをダウンロード

メーラーを起動させるリンク

問合せを促すために指定したアドレスにメールを送れるよう、メーラーを起動させるリンクを作成します。
URLを記載していた場所に「mailto:指定アドレス」を記載します。

<a href="mailto:sample@gmail.com">メーラーを起動するリンク(ダミーアドレスです。)</a>
メーラーを起動するリンク(ダミーアドレスです。)

リンクをクリックするとメールソフトが起動し、宛先が指定したアドレスになっている新規メールが開きます。

問合せを促すために指定したアドレスにメールを送れるよう、メーラーを起動させるリンクを作成します。

mailtoリンクについての細かい設定方法(件名や本文をあらかじめ仕込んでおく方法)を下の記事にまとめております。

電話番号へリンク(発信)

メールソフトの起動と同じように指定の電話番号に電話がかけれるリンクを作成します。
先ほどの「mailto:」の所を「tel:」に変更し、電話番号を記載します。

<a href="tel:0000000000">電話発信リンク</a>
電話発信リンク

「03-1234-5678」何もしなくてもスマホのブラウザが自動で認識して発信リンクをつけてくれることもあります。

まとめ

いかがでしたでしょうか。
普段当たり前のように使っているリンクボタンにも様々な種類があります。
皆様はいくつご存知でしたでしょうか。

ユーザーの行動心理を考え、ストレスなく見れるWEBサイト・ブログであることを心がけ、適切なリンクボタンを設置しましょう。

最後までご覧いただきありがとうございました。

1 Comment

  1. […] 【web】リンクの貼り方いろいろ【初心者向け】 […]

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Scroll to top