はじめに
概要
本ドキュメントは「ホームページ リンク貼り付け」について、検索意図の分析からHTMLとWordPressでの実装まで、初心者から中級者向けにわかりやすくまとめています。リンクの種類（外部リンク・内部リンク・ページ内リンク）や用途、注意点を具体例で示し、各章で実際の貼り付け手順を解説します。
目的
読者が自分のサイトで適切にリンクを貼れるようになることを目的とします。リンクの意味を理解し、ユーザーの利便性や検索エンジンへの配慮を踏まえた貼り方を学べます。
対象読者
・初めてリンクを扱う方
・基本を見直したい方
・WordPressでサイト運営している方
本書の構成
第2章：ホームページにおけるリンク貼り付けの基本概念
第3章：HTMLでのリンク貼り付け方法（実例付き）
第4章：WordPressでのリンク貼り付け方法（編集画面での手順）
進め方の注意
操作前に必ずバックアップを取り、外部リンクは信頼できるサイトを選んでください。実例を試しながら学ぶと理解が早まります。
ホームページにおけるリンク貼り付けの基本概念
リンクを貼るとは
リンクを貼るとは、文字や画像にクリックで移動できる機能を設定することです。具体的には、リンク先のURLをコピーして目的の場所に貼り付ける操作を指します。リンクはページ間をつなぐ「アンカー」の役割を果たし、訪問者を別ページや別サイトへ案内します。
表記の注意点（張る・貼る）
「リンクを張る」「リンクを貼る」のどちらでも使われますが、迷う場合はひらがなで「はる」と表記すると読みやすく無難です。
リンクの種類と例
- 内部リンク：同じサイト内の別ページへ移動します。例）サイト内のブログ記事同士をつなぐ。
- 外部リンク：別のドメインへ移動します。例）参考サイトや出典へ飛ばす。
- ページ内リンク（アンカー）：長いページの特定の見出しへ移動させます。
表示方法とユーザー配慮
文字リンク、画像リンク、ボタンリンクが一般的です。リンクテキストは「この記事を見る」より「商品の使い方（詳しく）」のように具体的に書くと親切です。外部へ飛ばす場合は新しいタブで開くことを検討してください。
管理と安全性の基本
リンク先URLは正確に入力し、定期的にリンク切れを確認します。外部リンクは信頼できるサイトか確認してから貼るようにしましょう。画像リンクは代替テキスト（alt）を設定すると、見えない人や検索にもやさしいです。
HTMLでのリンク貼り付け方法
基本の書き方
HTMLでリンクを作るには<a>タグを使います。基本形は次の通りです。
<a href="https://example.com">リンクテキスト</a>
hrefにリンク先のURLを入れると、その文字列がクリック可能になります。リンクテキストはユーザーにわかりやすい言葉にしましょう。
外部リンクと内部リンクの違い
外部サイトへ飛ばす場合は、https://など完全なURLを指定します。例：https://example.com。
サイト内の別ページへ移動する場合は相対パスを使います。例：/about.htmlや../folder/page.html。
ページ内リンク（アンカー）の作り方
ページの特定の場所に飛ばすときは、リンク先の要素にidを付けます。
<h2 id="contact">お問い合わせ</h2>
<a href="#contact">お問い合わせへ移動</a>
リンクの開き方と安全対策
別タブで開くにはtarget="_blank"を追加しますが、同時にrel="noopener noreferrer"を付けてセキュリティを守ってください。
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部サイトを新しいタブで開く</a>
よくある注意点
- URLは正確に書く
- リンクテキストは内容を伝える短い文にする
- ページ内リンクは同じ
idが重複しないようにする
これらの基本を押さえれば、HTMLでのリンクは簡単に扱えます。
WordPressでのリンク貼り付け方法
ブロックエディタ（Gutenberg）での手順
- 投稿や固定ページを開き、リンクにしたいテキストをドラッグして選択します。
- エディタ上のリンクアイコン（鎖の形）をクリックし、URLを貼り付けるか、サイト内の投稿タイトルを検索して選びます。
- Enterで確定します。オプションから「新しいタブで開く」をオンにできます。
クラシックエディタ（TinyMCE）の手順
- テキストを選択してリンクボタンを押します。
- 表示されるウィンドウにURLを貼り付け、必要ならタイトルやターゲットを設定して追加します。
ページ内リンク（アンカー）の作り方
- リンク先の見出しや要素にIDを付けます（例:id=”section1″）。
- リンクに“#section1”のように記入します。ブロックの高度な設定でIDを指定できます。
外部と内部リンクの違い・設定
- 外部: 完全なURL（https://example.com）を貼ります。
- 内部: 投稿タイトルを検索して簡単に選べます。
- 新しいタブを使うときはrel=”noopener noreferrer”を追加すると安全です。
注意点とアクセシビリティ
- リンクテキストは目的が分かる語句にします（例: 「詳細はこちら」だけでなく「料金プランの詳細」）。
- 破損リンクは定期的にチェックしてください。
以上の手順で、WordPress上で安全かつ分かりやすいリンクを設定できます。必要なら具体的な画面例でさらに説明します。
