「リンク」は、インターネット上でシンプルな通信を行う、シンプルかつ基礎的な機能です。ウェブページの移動、ファイルのダウンロード、各種アプリケーションへリダイレクトする役割を担います。
コンテンツ管理システム、サイトビルダー、文書作成ソフト、メールクライアントなど、多くのアプリケーションがリンク作成に対応しています。
この解説記事では、クリックして動作させる要素「リンク」の作成方法について知っておくべきことすべてを網羅し、リンクの背後にある基本的な事項や、リンクを作成する際に遭遇する可能性のある用語についてもご説明します。
ハイパーリンクの基礎知識
コンテンツの文字列や画像のうち、クリック可能な部分、つまりカーソルを合わせて別のページに移動するインタラクティブな要素には、以下のような名称があります。
- リンク
- ハイパーリンク
- クリッカブル（クリック可能な）リンク
厳密な定義はそれぞれ異なりますが、近年は同じような意味で使われることも少なくありません。
インターネット上でコンテンツを選び、受信できるのは、リンクのおかげです。リンクの貼られた文字列や画像、ボタンまでスクロールし、クリックすれば、外部ページなどの異なるコンテンツへ移動したり、電話番号に架電したりといったアクションを実行できるようになっています。
以下のHTMLコードは、シンプルなハイパーリンクを出力します。
<a href="https://example.com/">the hyperlink text</a>このコードに、ターゲット属性やnofollow値などの任意項目を追加して、より複雑なコードを作成することもできます。
<a href="https://example.com/" target="_blank" rel="noreferrer noopener">the hyperlink text.</a>先ほどのリンクHTMLコードは、以下の4つの要素から成り立っています。
ここからは、各要素の役割を説明します。
1. コンテンツ
リンクが設定できるコンテンツには2種類あります。
- テキスト
- 画像
ブラウザーや文書作成ソフトなど、ハイパーリンクに対応しているアプリであれば、コンテンツ内の任意の画像や文字列をリンク化し、クリックできるように設定できます。
テキストをリンクにする
テキストは、クリック可能なリンクを作成する際のコンテンツの選択肢の1つです。
WordPressなどのエディターを使用している場合は、エディターで任意の文字列を選択し、「リンク」ボタンをクリックします。
すると、表示側にリンクが表示され、通常は目立つ色の下線付き文字列が表示されます。
テキストリンクは、マウスカーソルを合わせると、色が変わったり、下線が非表示なったりするなど、クリックできることを明示することが一般的です。
さらに、テキストリンクの上にマウスを乗せると、ブラウザは通常、リンク先のURLをプレビュー表示し、どこへ移動するのか確認できるようになっています。
画像をリンクにする
WordPressを含む多くのリンク対応エディターでは、画像などのメディアをリンクにできます。
設定するには、各エディターで利用できるリンク挿入機能を使用します。各エディターで対象の画像を選択後、リンク先URLを追加します。
公開後、画像にカーソルを合わせると、標準の矢印カーソルがハンドカーソルに変わり、ブラウザ下部にリンク先URLが表示されます。
画像リンクも文字リンク同様、クリックすると、URLを移動するなどのアクションが起こせます。
実際のHTMLコード
以下のHTMLコードサンプルの「リンク文字列」の部分に、実際に表示される文字列や画像が入ります。
<a href="https://example.com/" target="_blank" rel="noreferrer noopener">リンク文字列</a>リンクを自作するには、文字列を実際のコンテンツに置き換えていきます。
文字リンクの場合、閉じタグ「</a>」の直前までの文字列がリンク化され、クリックできるようになります。
画像リンクの場合、「img」タグを挿入し、画像のURLを指定します。画像は、サイトのメディアライブラリにアップロードするのがおすすめです。
画像URLは、「img src=””」属性のダブルクォーテーション内に挿入します。
画像リンクに追加できる要素は他にもあります。
- alt属性（alt=””）：検索エンジンのクローラーや視覚障害者向けに、画像を説明する文字列
- クラス（class=””）：CSSやJavaScripなどで画像を参照するための名前
2. URLまたはパーマリンク
ハイパーリンクの「URL」は、リンククリック時の目的地や、動作内容を指定する役割を担います。
URLは、必ずしもウェブページのURLとは限りません。例えば、スマートフォンでクリックすると、指定した電話番号に発信できるリンクも存在します。
地図を表示して、閲覧者のスマートフォンで地図アプリを開かせる手法もあります。
実際のHTMLコード
リンクURLは、リンクタグの「href=””」のダブルクォーテーション内に挿入します。
以下のコード例では「https://www.example.com」の部分がリンクURLです。
<a href="https://www.example.com" target="_blank" rel="noreferrer noopener">View the entire menu.</a> 
URLの中には、ファイルをダウンロードするためのものもあれば、特殊なコーディングをするものもあります。例えば、電話発信リンクは、「href=””」のダブルクォーテーション内に、「tel:」と電話番号の組み合わせを挿入します。
3. ターゲット属性
ターゲット属性は、任意項目です。ブラウザの同じタブで開くか、新しいタブで開くかを指定します。
WordPressを始めとする多くのエディターでは、ビジュアルエディターでターゲットを指定できるため、HTMLを直接編集する必要はありません。
閲覧者が現在のページを開いているタブ内でリンクを開くようにするには、「新しいタブで開く」をオフにします。
「新しいタブで開く」をオンにすると、リンクのターゲットに「_blank」値を指定し、クリックすると新しいタブでURLを開くようになります。
実際のHTMLコード
ターゲットを指定するには、HTMLのリンクタグに「target=””」属性を追加します。
target属性には、「_blank」「_parent」「_self」「_top」などの値が指定できますが、一般的に実用されているのは「_blank」のみです。
targetに「_blank」を指定しない場合のHTMLは以下のようになります。
これは、通常のハイパーリンクと変わりません。というのも、デフォルトのリンクは新規タブで開かれないためです。別のタブで開くように指定したい場合を除いて、リンクタグを変更する必要はありません。
以下のリンクタグのように「_blank」ターゲットを指定すると、URLが別のタブで開かれるようになります。
<a href="https://www.example.com" target="_blank">View the entire menu.</a>
4. rel属性（nofollow、noreferrer、noopener）
リンクには、この他にも追加で指定できる属性があります。ここでは、セキュリティや検索エンジンのクローキングを行う設定を解説します。
- nofollow：リンク先サイトへの「SEOリンクジュース」の付与を阻止する。検索エンジンにリンクとして認識させず、リンク元サイトを保護する。
- noopener： WordPressエディターで「新しいタブで開く」を設定したリンクに、自動的に追加される。「noreferrer」と組み合わせることで、リンクを新しいタブで開く挙動に特有のセキュリティ問題を最小限に抑える。
- noreferrer：「noopener」とよく組み合わされる。リンク先へ送られるすべてのリファラル情報をブロックし、セキュリティを強化するとともに、トラッキングサイトやアフィリエイト収益サイトによる潜在的なデータ収集をブロックできる。
これらの設定値は、実際のサイトに表示されたリンクを見ても識別できないため、HTMLコードを検証する必要があります。
実際のHTMLコード
これらのリンク用の設定値は、リンクタグの「rel=””」属性のダブルクォーテーション内に挿入します。
1つのリンクのrel属性に、すべての値を含めることも可能です。
また、リンクの中には、「noreferrer noopener」のみを含むものや、「nofollow」のみを含むものがあります。いずれも、リンク作成者が意図して設定しています。
リンクを設置する理由
リンクを設置してクリックを誘導する前に、まずはリンクができることを総合的に理解しましょう。リンクの特徴を理解すれば、将来的に活用することができるようになります。
ここでは、リンククリックを活用する理由を説明します。
- URLへ移動する一般的なハイパーリンク：テキストリンクから、外部サイト（出典の引用や、本文を他サイト上にある資料で補足する場合など）や、サイト内の他のページ（読者を関連コンテンツに誘導し、より長時間サイトに滞在させるために効果的）に誘導できる。
- 画像リンク：WordPressを始めとする多くのサイトビルダーでは、画像にリンクを追加し、URL、メディアファイル、添付ページへ誘導できる。
- ボタンリンク：CSSボタンにハイパーリンクを追加すると、プレーンなテキストよりも、リンククリックがより魅力的で視覚的な体験となる。
- 電話番号：電話番号リンクは、閲覧端末の電話アプリや、その他のSkypeなどの通話機能を持つアプリケーションを開くことが可能。
- 住所：GoogleやAppleの地図サービスを使用し、特定の座標へリンクすれば、クリック時にGPSや地図アプリを活用し実際に道案内できる。
- メールアドレス：電話発信リンクと似た機能の、メールアドレス版。スマートフォンやパソコンのメールクライアントが起動し、宛先欄に指定したメールアドレスがすでに挿入済みのメールが作成できる。
- アンカーリンク：同一ページ内のコンテンツにリンクできる。長文のブログ記事の冒頭で、目次を作成するのに非常によく使われている。別名「ブックマークハイパーリンク」とも。
- ファイルダウンロード：WordPressを始めとしたサイトビルダーには、SVGファイル、PDF、HTMLファイルなどをアップロードする機能があり、アイテムを一括アップロードすることもできる。アップロードしたファイルへ、投稿や固定ページ内からハイパーリンクを作成し、ユーザーがファイルを直接端末にダウンロードできるようにすることも可能。
ここまでで、ハイパーリンクの種類と、ハイパーリンクを作成するリンクについてご説明しました。ここからは、いよいよハイパーリンクの作成方法をご説明します。
リンクの作成方法
リンクの作成方法は、HTMLの理解度に合わせて選べます。視覚的に設定できる各種エディターもありますし、HTMLコーディングの知識がある方は、HTMLを直接編集することもできます。
ここでは4種類に分けて、リンクの設置方法をご紹介します。
- WordPressクラシックエディター
- WordPressブロックエディター（Gutenberg）
- HTMLコーディング
- WordPress以外のエディター
いずれの方法も、WordPressの投稿や固定ページにリンクを設置でき、同じ出力結果になります。WordPress以外のアプリやサイトビルダーにも応用できますが（特に4番目の方法）、用語や使い方が一部異なる場合があります。
リンク作成方法1. WordPressクラシックエディター
WordPressのクラシックエディターを使用している場合、投稿や固定ページ内にリンクを作成する最も簡単な方法は、ビジュアルエディターを使用することです。
まず、WordPress管理画面から「投稿」または「固定ページ」に移動します。編集したい対象の投稿または固定ページを選択し、ビジュアルエディターを使用してください。
手順1. リンクを設置したい文字列を選択
文字リンクを設置する場合、あらかじめビジュアルエディターに文章を入力しておくと効率よく設置できます。文章の入力後、対象箇所をマウスカーソルで文字列を反転させ、選択します。
画像をリンクにする場合
画像を選択します。うまく選択できると、ツールバーとともに、画像の周囲にアウトラインが表示されます。
手順2. リンクの挿入/編集ボタンをクリック
文字列を選択したまま、ビジュアルエディターのツールバー内の「リンクの挿入/編集」ボタンが表示される位置までスクロールします。ボタンには、鎖が繋がったようなアイコンが使用されています。
画像をリンクにする場合
画像を選択したまま、鎖アイコンの「リンクの挿入/編集」ボタンをクリックします。
手順3. URLを貼り付ける
空のURL入力欄が表示されます。まず、設置するリンクのリンク先URLを、クリップボードにコピーします（Command＋C、またはCtrl＋C）。コピーするリンクは、オンライン上の他のサイトURLでも、自分のウェブサイトURLでも、どちらでも構いません。
コピーしたら、入力欄に貼り付けます（Command＋V、またはCtrl＋V）。
画像をリンクにする場合
URL入力欄が表示されるので、対象のURLを貼り付け、「適用」ボタンをクリックしてリンクを有効化します。
手順4. リンクを適用する
「適用」ボタンをクリックしてリンクを有効化すると、文字列がクリックできるようになります。
リンクが適用されると、一般的には、文字列のリンク部分に下線が引かれ、目立つ文字色で表示されます。
エディター内でリンクをクリックすると、テスト用の実際にクリック可能なリンクと、リンク先を変更するための編集ツールが表示されます。
追加設定
この記事の後半にて、より高度なリンクの作成方法を解説しますが、WordPressのクラシックエディターを使用していれば、追加設定のための「リンク設定」ボタンが各作成済みリンクから使用でき、大変便利です。
「リンク設定」では、以下の設定が可能です。
- URLの変更
- リンク文字列の変更
- 「リンクを新しいタブで開く」の設定
- サイト内の既存のコンテンツの検索と、リンク先への設定
画像をリンクにする場合
WordPressクラシックエディターで、画像にリンクを設置する方法はもう1つあります。画像を選択するとポップアップするツールバー内にある、鉛筆アイコンの「編集」ボタンを選択します。
「リンク先」入力欄が表示される位置までスクロールすると、「カスタム URL」を選択してリンク先を指定できます。入力欄に対象URLを貼り付けて、「更新」をクリックします。
「リンク先」ドロップダウンから、様々な種類のハイパーリンクを設定できます。
- メディアファイル
- 添付ファイルのページ
- カスタムURL
- なし
リンク作成方法2. WordPressブロックエディター（Gutenberg）
WordPressブロックエディターを使用したリンク作成方法は、投稿でも固定ページでも同じです。
まず、WordPress管理画面から「投稿」または「固定ページ」に移動します。編集したい対象の投稿または固定ページを選択し、以下の手順で設定してください。
手順1. リンクを設置したい文字列を選択
エディターに文章を入力します。マウスカーソルで、リンクを設定したい文字列を反転させます。すると、ツールバーがポップアップするので、「リンク」ボタンをクリックします。
画像をリンクにする場合
WordPressのブロックエディターで画像をリンクにするには、まずはエディターで画像を追加します。
「ブロックを追加」ボタンをクリックしたら、「画像」ブロックを選択し、リンクに使用したい画像をアップロードしてください。
画像をクリックして選択すると、ツールバーがポップアップします。「リンクの挿入」ボタンを選択します。
手順2. URLを貼り付け、リンクを入力
空のURL入力欄が表示されます。リンク先に指定したいURLを貼り付け、キーボードのEnterキー、またはURL入力欄右のSubmitボタンをクリックして、リンクを有効化します。
すると、リンク文字列が目立つ色で表示されるようになります。リンクをクリックすると、リンク先コンテンツのプレビューの確認や、より高度なリンク設定の追加が行えます。
画像をリンクにする場合
リンク先の候補として、メディアファイルへの直接リンクと、添付ファイルのページへのリンクが選べます。
これらの候補以外にリンクさせる場合、空欄のURL入力欄に対象URLを貼り付けます。「適用」ボタンをクリックし、リンクを有効化します。これで、実際のページ上で画像をクリックすると、指定したリンク先に移動するようになります。
下向き角括弧のアイコン「∨」をクリックすると、高度な設定項目が表示されます。
- リンクを新しいタブで開く
- リンク rel 属性
- リンク CSS クラス
追加設定
この記事の後半にて、より高度なリンクの作成方法を解説しますが、この時点では、作成済みリンクの上でカーソルをクリックすると「編集」ボタンが利用できることを覚えておいてください。
「編集」ボタンを押すと、以下の設定項目が表示されます。
- リンク文字列の変更
- URLの変更
- 「リンクを新しいタブで開く」の設定
ブロックエディターで作成可能なその他のリンク
WordPressブロックエディターでは、通常のリンクだけでなく、数十種類もの拡張的なリンクが、デフォルトで利用できるようになっています。以下はほんの一例です。
- ボタン：シンプルな文字リンクよりも見やすいリンクを作成
- ファイル：ファイルをエディター内でアップロードし、ダウンロード用のクリックボタンを設置
- ソーシャルアイコン：SNSのアイコンを挿入
- ナビゲーション：サイト上の任意の場所にナビゲーションボタンを配置
- 続きを読む：本文を短く表示し、リンクをクリックするとさらに表示する
- ログイン / ログアウト：サイトログインのためのクイックリンク
- 次のページ：サイト内の次のブログ記事へのリンクを追加
- 前のページ：サイト内の前のブログ記事へのリンクを追加
リンク作成方法3. HTMLコーディング
HTMLを編集してリンク設置する場合、クラシックエディターとブロックエディターで設定方法に違いはありません。
各エディターでのHTML編集方法は以下の通り。
WordPressクラシックエディターの「テキストエディター」
WordPressブロックエディターの「コードエディター」
各種HTML編集ソフトとテキストエディター
Atom、Sublime Text、Codaなどのテキストエディターは、HTMLの記述と編集に必要なインターフェースを提供するもので、リンクタグのコーディングも行えます。マークダウンエディターを使用することも可能です。
テキストエディターでの作業後は、以下のいずれかの方法でHTMLファイルをアップロードします。
- FTPまたはSFTPを使用して、オンラインで公開するファイルをアップロードする。FileZillaを使用すると、スムーズな手順でアップロードできる。
- WordPressをインストールしたディレクトリに、HTMLファイルを一括でアップロードする
- FTPクライアントを使用して、WordPressディレクトリにHTMLファイルをアップロードする
テキストエディターを入手して、HTMLをWordPressにアップロードする準備が整ったら、以下の手順でHTMLコーディングし、リンク作成します。
このサンプルコードは、HTMLの基本的なリンクタグです。
<a href="https://www.example.com">Link Text</a>
使用方法
- 「https://www.example.com」を対象のURLに置き換える
- 「Link Text」を実際のリンク文字列に置き換える
リンクが設置できたら、編集した投稿または固定ページを公開するか、HTMLをサイトにアップロードしてください。また、WordPressのエディターを「ビジュアル」に切り替えて、リンクの見た目をプレビューすることもできます。
そのHTMLリンクの公開されたバージョンでは、リンクに下線が引かれ、時には異なる色で表示されます。そのリンクの上にマウスを移動させると、ブラウザの下部にそのターゲットが表示されます。
リンク作成方法4. WordPress以外のビジュアルエディター
WordPress以外のサービスについては、多すぎるためここでは網羅できませんが、通常、ビジュアルエディターが用意されている場合はWordPressとほぼ同じような操作で設定できるはずです。
各エディターごとに、リンク作成ボタンの名称や、アイコンが若干異なる可能性があります。
一般的な手順は、以下の通りです。
- リンクさせたいテキストを反転させて選択
- エディターでリンクアイコン（名称が異なる可能性がある）をクリック
- 対象URLを貼り付ける
- 「リンクの追加」ボタン（名称が異なる可能性がある）をクリック
一例として、ShopifyのようなECサイトビルダーでは、文字列を選択して反転させ、「リンクを挿入」ボタンをクリックすることで、任意のページや投稿にリンクを設置できます。
次に、対象URLを貼り付けて、「リンクの挿入」ボタンをクリックします。
これでリンクが設置され、クリックできるようになりました。
「リンクを新しいタブで開く」の設定方法
WordPressを始めとする多くのエディターでは、リンクをクリックすると別のタブで開くように設定することができます。早速、設定方法を解説していきます。
WordPressクラシックエディターで「リンクを新しいタブで開く」を設定
WordPressクラシックエディターにてリンクの作成後、「リンク設定」ボタンを選択します。
「リンクを新しいタブで開く」のチェックボックスをオフにします。
その後、「更新」ボタンをクリックします。
WordPressブロックエディターで「リンクを新しいタブで開く」を設定
WordPressブロックエディターで、すでにリンクを追加済みの状態からご説明します。追加済みのリンクをクリックすると、対象のコンテンツのポップアッププレビューが開きます。
「編集」ボタンをクリックすると、さらに多くの設定が可能になります。ポップアップしたウィンドウの下部にある「新しいタブで開く」スイッチをオンにするのが最も簡単な方法です。
HTML編集でリンクを新しいタブで開く
WordPressテキストエディター、WordPressコードエディター、または一般的なHTMLエディターでは、以下のコードを使用して、リンクのクリック時に新しいタブで開くようにできます。
<a href="https://www.example.com" target="_blank" rel="noreferrer noopener">リンク文字列</a>- 「https://www.example.com」を対象のURLに置き換える
- 「リンク文字列」を実際のリンク文字列に置き換える
- 「target=”_blank “」属性を追加すると、リンクを新しいタブで開くようになる
- 追加設定として、「rel=”noreferrer noopener”」属性の追加も合わせて行うことが望ましい。新しいタブでリンクを開く際の一般的なセキュリティ問題をブロックできる。ただし、この属性が無くても、上記3の設定があればリンクは新しいタブで開かれる。
公開後、リンクの見た目はまったく同じですが、クリックすると対象URLが新しいタブで開くようになります。
リンクにnofollowを追加する方法
「nofollow」は、検索エンジンにリンク先を無視するように指示し、検索エンジンの信用（リンクジュース）がリンク先のサイトに渡されるのを阻止するHTML値です。「nofollow」の主な目的は、スパムリンクを減らすことです。記事の作成時、有料リンク、コメント、ユーザー生成コンテンツ、埋め込み、またはリンク先のサイトを支持していると見なされたくない場合に使用します。
WordPressには「nofollow」リンクを追加する方法が組み込まれていませんが、HTMLを利用することで可能です。
以下のHTMLコードは、「nofollow」値を持たせたシンプルなリンクの例です。
<a href="https://www.example.com" rel="nofollow">The Link Text.</a>
使用方法
- 「https://www.example.com」を対象のURLに置き換える
- 「リンク文字列」を実際のリンク文字列に置き換える
- リンクタグ内に、属性「rel=”nofollow”」を追加
実際の見た目は標準のリンクと変わらないように見えますが、「nofollow」は内部的に認識、処理されします。
既存のコンテンツにリンクする方法
既存コンテンツへのリンクは、WordPress独自の機能です。WordPress上にある、過去に作成したブログ記事やページを検索し、リンクを挿入できます。わざわざ別のブラウザで対象の記事を探し、URLをコピー＆ペーストする必要はありません。
WordPressクラシックエディターから既存コンテンツにリンク
リンクを作成するには、対象の文字列を選択し、エディター内にある鎖アイコンの「リンクの挿入/編集」ボタンをクリックします。入力欄がポップアップするので、歯車アイコンの「リンク設定」ボタンをクリックします。
- 「または既存のコンテンツにリンク」セクションへ
- 検索バーに文字を入力し、表示された候補のなかから固定ページまたは投稿を選ぶ
- 既存コンテンツへのリンクがURLフィールドに自動的挿入される
完了後、忘れずに「リンク追加」ボタンをクリックしてください。
これでエディター内に、他のページへのリンク（内部リンクとも呼ぶ）が設定されます。
WordPressブロックエディターから既存コンテンツにリンク
リンクさせたい文字列や画像を選択すると、ツールバーが表示されるので、「リンク」ボタンをクリックします。
入力欄が1つだけ表示されますが、使い方は2通りあります。直接URLを貼り付けることもできますし、検索バーとしても使用できます。既存のコンテンツに関連するキーワードを入力すると、関連する結果が表示されます。
対象の固定ページや投稿が表示されたら、クリックして選択します。
これで、自動的にWordPressブロックエディター内に既存のコンテンツへのリンクが作成されます。
クリックで電話発信、SMS送信、メール送信するリンク作成方法
通常のリンクのURLを変更すれば、以下のような、クリック時に特殊な動作を行うリンクも作成できます。
- 通話アプリを開く電話発信リンク
- SMSアプリを開くSMS送信リンク
- メールクライアントを自動的に開くメール送信リンク
電話発信リンクの作成方法
電話発信リンクは、ユーザーの電話アプリや、Skypeなどの電話番号をサポートするアプリに、特定の電話番号を自動的に追加します。
以下のHTMLコードのように、URL入力欄に「Tel:」と入力し、続いて電話番号を入力します。
<a href="tel:555-555-5555">クリックして通話</a>使用方法
- 電話番号を、ユーザーに発信してもらいたい実際の電話番号に置き換える
- 文字列「クリックして通話」を、実際に表示させたいリンク文字列に置き換える
WordPressで設定する場合、ブロックエディターや、クラシックエディターの「ビジュアルエディター」で、リンクのURL入力欄に「tel:555-555-5555」（対象の電話番号を入力）と入力するだけです。Enterアイコンをクリックすると、電話番号のリンクが生成されます。
閲覧者がリンクをクリックすると、関連付けられたアプリ（スマートフォンであれば電話アプリ）に直接リダイレクトするか、Skypeなどのアプリに誘導されます。
SMS送信リンクの作成方法
SMS送信リンクは、電話発信リンクと同じように機能しますが、通話アプリではなくメッセージアプリを開きます。
SMS送信リンクを追加するには、URLの代わりに「sms:555-555-5555」と入力します。
<a href="sms:555-555-5555">クリックしてSMSを送信</a>使用方法
- 555-555-5555」を別の電話番号に置き換える
- 文字列「クリックしてSMSを送信」を、実際に表示させたいリンク文字列に置き換える
クラシックエディターとブロックエディターの両方とも、リンクのURL入力欄に「sms:555-555-5555」と入力すると、SMS送信リンクを作成できます。
リンクをクリックすると、メッセージアプリに誘導されます。
メール送信リンクの作成方法
メール送信リンクをクリックすると、閲覧端末で関連付けられたメールクライアントが自動的に開き、新しいメール作成画面の宛先に、指定したメールアドレスが挿入されます。
以下のHTMLコードのように、「mailto:」以降にメールアドレスを追加し、リンクタグのURL部分に挿入します。
<a href="mailto:[email protected]">クリックしてメールを送信</a>使用方法
- メールアドレス「[email protected]」を、実際にメールを受信したいメールアドレスに置き換える
- 文字列「クリックしてメールを送信」を、実際に表示させたいリンク文字列に置き換える
WordPressのクラシックエディター、またはブロックエディターを使用している場合は、リンク作成時、URL入力欄に「mailto:[email protected]」と入力します。
投稿の閲覧時にリンクをクリックすると、メールクライアントにリダイレクトされ、宛先欄に指定したメールアドレスが挿入されます。
まとめ
クリック可能なリンク（別名ハイパーリンク）を追加することで、サイトの対話性が向上し、サイトの回遊性を高めたり、外部サイトの重要な情報に誘導したりすることができます。リンク設置の知識は、サイト設計とコンテンツ制作の基本を理解する上で欠かせません。
本記事では、テキストや画像にリンクを追加する方法をご紹介してきました。リンクを設置するには、WordPressのクラシックエディター、ブロックエディター、HTMLコーディング、その他のエディターなど、さまざまなツールが使用できることも知っておいてください。
また、電話番号やメールアドレス、nofollowタグの付いたリンクなど、高度なリンクも活用してみてください。
リンクの作成方法について、他にご質問や気になる点がありましたら、以下のコメント欄からシェアしてください。
コメントを残す