WordPress リンクの貼り方を5パターン別に解説!基本から運用までまるごと網羅

「テキストにリンクは貼れるけど、画像やボタンになるとやり方が分からない」「『新しいタブで開く』や『nofollow』ってどう使い分ければいいの?」と編集をしながら感じたことはないでしょうか。

WordPressのリンク設置は、種類が増えるほど操作の正解が見えづらくなるものです。

結論から言うと、ブロックエディターを使えばテキスト・画像・ボタン・アンカーまで同じリンクアイコンで一貫して設定でき、属性と公開後の運用ルールを押さえれば失敗しません。

本記事では、WordPressのリンクの貼り方を基本操作から応用、SEO・セキュリティ属性の使い分け、リンク切れを防ぐ運用までまとめて解説します。

レンタルサーバーでホームページをはじめよう。まずは10日間無料お試し
目次

WordPressでリンクを貼る前に知っておきたい基礎知識

WordPressでリンクを貼る前に知っておきたい基礎知識

WordPressでリンクを貼る前に、まずは「どんな種類のリンクがあるか」「どのエディターで作業するか」の2点を整理しておきましょう。ここを押さえておくと、後の手順で迷いません。

WordPressで貼れるリンクの5つの種類

WordPressで扱うリンクは、大きく分けて次の5種類に整理できます。

  • テキストリンク:文章中の単語やフレーズに貼る、もっとも基本のリンク
  • 画像リンク:画像をクリックしたときに別ページへ飛ばす設定
  • ボタンリンク:申込や資料ダウンロードなど、CTA(行動喚起)向けの目立つリンク
  • アンカーリンク:同じページ内の特定のセクションへジャンプするリンク
  • 特殊リンク:メールアプリを起動する mailto: 、電話発信を行う tel: 、SNS埋め込みなど

それぞれ用途と設定方法が少しずつ違うため、本記事ではこの順番で1つずつ解説していきます。

ブロックエディターとクラシックエディターのどちらで貼るべきか

WordPressには「ブロックエディター(Gutenberg)」と「クラシックエディター」の2種類の編集画面があります。これから始める方や、どちらも使える環境にある方は、ブロックエディターを選ぶのがおすすめです。

ブロックエディターを推奨する主な理由は次のとおりです。

  • 2026年時点でWordPress公式の標準エディター
  • テキスト・画像・ボタン・アンカーまで同じUIから操作できる
  • 新規タブやnofollowなどの属性設定もUI上で完結する
  • 標準テーマを含む近年のモダンなテーマがブロックエディター編集前提で設計されている

クラシックエディターはプラグイン「Classic Editor」で引き続き利用できますが、新しいブロックや属性管理機能の追加は基本的にブロックエディター側で進んでいるため、長期的にはブロックエディターへ移行する判断が安全でしょう。

ロリポップ!レンタルサーバーのWordPress簡単インストールを使えば、最新のWordPressとブロックエディターが約1分でセットアップされるため、これから始める方の初期環境としても扱いやすい構成です。

WordPressでテキストリンクを貼る方法(ブロックエディター)

WordPressでテキストリンクを貼る方法(ブロックエディター)

ここからは具体的な操作を見ていきましょう。まずはもっとも基本となるテキストリンクの貼り方を、ブロックエディターを使った4ステップで解説します。外部リンクと内部リンクのどちらも同じ流れで設定できるので、最初に覚えておくとほかの操作が楽になります。

ステップ1:リンクを設定したいテキストを選択する

投稿または固定ページの編集画面を開き、リンクを貼りたい文字をドラッグで選択します。リンクは単語1つでも、文全体でもかまいません。検索ユーザーや読者から見て「何のリンクか」が分かるテキストを選ぶのがポイントです。

ステップ2:ツールバーのリンクアイコンをクリックする

テキストを選択すると、ブロック上部にツールバーが表示されます。鎖のかたちをした「リンク」アイコンをクリックしましょう。キーボードショートカットでは Ctrl + K(Mac は Command + K)でも同じ操作ができます。

リンクを貼りたい文字をドラッグで選択するとツールバーが表示されるので、「リンク」アイコンを選びます

ステップ3:URLを入力するかサイト内ページを検索する

リンク入力欄が表示されたら、目的に合わせて次のいずれかを行います。

  • 外部サイトにリンクしたい場合:リンク先のURLをそのまま貼り付ける
  • 自サイト内のページにリンクしたい場合:ページタイトルやキーワードを入力すると候補が表示されるので、目的の記事を選ぶ
  • 同じページ内の特定箇所にリンクしたい場合:「#アンカー名」を入力する(詳細は後述で解説)

入力が終わったら Enter キーを押すか、入力欄右の「送信」アイコンをクリックすれば設定完了です。

リンク入力欄にテキストを入力すると、既に公開している投稿や固定ページの候補が表示されます

ステップ4:詳細設定で「新しいタブで開く」や「nofollow」を指定する

挿入したリンクをクリックすると、小さなリンクポップアップが表示されます。鉛筆アイコンの編集画面、または「拡張設定(Advanced)」を開くと、「新しいタブで開く」のトグルと「nofollowとしてマーク」のチェックボックスが現れるので、必要に応じてオンにしましょう。

属性の使い分けについては後ほど詳しく解説するため、ここでは「UIから新しいタブとnofollowを設定できる」と押さえておけば十分です。

鉛筆アイコンをクリックすると詳細設定ができます

内部リンク候補に目的ページが出てこないときの対処法

ステップ3でサイト内ページを検索しても、目的の記事が候補に出てこないことがあります。これはWordPressの仕様で、内部リンク検索の対象が「公開済みコンテンツのみ」に限定されているためです。

下書き状態や予約投稿中のページは候補に表示されません。一時的に対処したい場合は、次のいずれかの方法を取りましょう。

  • 対象ページを先に公開してから検索し直す
  • 検索ではなく、ページのURLを直接入力欄に貼り付ける

リライト中で公開状態を変えたくない場合は、後者の「URL直貼り」が現実的な選択です。

WordPressで画像にリンクを貼る方法

WordPressで画像にリンクを貼る方法

商品バナーやサムネイル画像をクリックして別ページに飛ばしたい、あるいはアイキャッチを大きく表示させたい、というニーズは多いものです。ここでは画像ブロックでのリンク設定を3ステップで解説し、最後に実務で失敗しないためのチェックポイントもまとめます。

ステップ1:画像ブロックを選択する

リンクを貼りたい画像ブロックをクリックして選択します。すでに画像が挿入されている記事なら、その画像をクリックするだけでブロックがアクティブな状態になり、上部にツールバーが表示されます。

ステップ2:ツールバーのリンクアイコンをクリックする

ツールバーに表示されている鎖のかたちをした「リンク」アイコンをクリックすると、リンク設定のメニューが開きます。テキストリンクと同じ操作感なので、慣れてしまえば迷うことはありません。

リンクを貼りたい画像をクリックして選択するとツールバーが表示されるので、「リンク」アイコンをクリックします

ステップ3:リンク先の種類を選んで設定する

画像のリンク先には、目的に応じて次のいずれかを選べます。

  • カスタムURL(Custom URL):自由なURLを指定。サイト内ページのタイトル検索も可能で、外部のLPや内部の記事にリンクするときに使う
  • メディアファイル(Media File):画像ファイルそのものを開く。元画像をフルサイズで見せたい場合に使う
  • 添付ファイルページ(Attachment Page):WordPressが自動生成する添付ファイル詳細ページを開く
  • クリックで拡大(Expand on Click):同じページ上で画像を拡大表示する。商品写真や図解の細部を見せたいときに有効

選択後にEnterキーを押せば設定完了です。リンクを解除したい場合は、もう一度リンクアイコンをクリックして「リンクを解除」を選びましょう。

画像リンクで失敗しないためのチェックポイント

画像リンクは設定そのものは簡単ですが、運用面でつまずきやすいポイントがあります。

  • alt(代替テキスト)を必ず設定する:右サイドバーの「ブロック」タブにある「画像の設定 → Alt text(代替テキスト)」欄に、画像の内容や遷移先が伝わる説明を入力する
  • クリック挙動を統一する:商品画像は商品ページへリンク、図解の画像はクリックで拡大、というふうに「画像の種類×挙動」のルールを決めておくと、サイトに一貫性が出て読者が迷わなくなる

特にalt属性は、画像が表示されないときに代わりに表示されるテキストであり、スクリーンリーダーが読み上げる重要な情報源でもあります。

アクセシビリティとSEOの両面で効くため、画像挿入時に必ず設定する習慣をつけましょう。

WordPressでボタンにリンクを貼る方法

WordPressでボタンにリンクを貼る方法

「資料をダウンロード」「無料で申し込む」のように行動を促したいリンクは、テキストよりもボタンのほうが圧倒的にクリックされやすくなります。

WordPressには標準で「ボタン」ブロックが用意されているため、プラグインなしで装飾されたCTA(Call To Action:行動喚起)ボタンを設置できます。

ステップ1:「ボタン」ブロックを挿入する

投稿または固定ページの編集画面で、ボタンを置きたい位置にカーソルを合わせて「+」アイコンをクリックします。ブロック一覧から「ボタン」を選ぶか、検索欄に /button と入力するとすぐに候補が表示されるので、それを選びましょう。挿入されるのは「ボタン(Buttons)」というブロックで、その中に1つ目のボタンが配置されています。

ブロック一覧の中に「ボタン」があります

ステップ2:ボタンのテキストを入力する

挿入されたボタンに、表示したい文言を直接入力します。「資料をダウンロード」「無料で相談する」のように、クリックした先で何が起きるかが分かるテキストにするのがコツです。「こちら」や「クリック」だけのボタンは、後述するアクセシビリティの観点でも避けましょう。

ボタンを複数並べたい場合は、ボタン群ブロック右下の「+」アイコンから2つ目以降を追加できます。

ステップ3:ボタンを選択してリンクを設定する

ボタンを選択し、上部ツールバーの「リンク」アイコンをクリックします。リンク欄が表示されたら、URLを直接入力するかサイト内ページのタイトルを検索して、目的のリンク先を指定しましょう。テキストリンクと同じく「新しいタブで開く」をオンにすることも可能です。

ボタンを選択し、ボタンのテキストを選択するとツールバーにリンクアイコンが表示されます

なお、ボタンブロックではブロック設定の「拡張設定」から rel 属性も指定できます。広告ボタンに sponsored を付けるといった細かな制御まで、コード編集なしで完結する仕様です。

ボタンリンクが効くシーンと使いどころ

ボタンリンクは便利な分、使いすぎると記事全体がうるさくなり、本来目立たせたいはずだったCTAボタンが埋もれてしまいます。テキストリンクとボタンリンクの使い分けの目安は次のとおりです。

  • ボタンリンクが適したケース:申込・資料DL・予約・問い合わせなど、明確に行動してほしい誘導
  • テキストリンクが適したケース:補足の出典・関連記事・参考ページなど、本文の流れを邪魔したくない誘導

1記事につき主要なCTAボタンは1〜2個に絞り、視覚的なメリハリを残すとクリック率は安定しやすくなります。電話発信ボタンや問い合わせフォームへの導線にも、ボタンブロックは有力な選択肢でしょう。

WordPressでアンカーリンク(ページ内リンク)を貼る方法

WordPressでアンカーリンク(ページ内リンク)を貼る方法

長いページや解説記事を読む読者にとって、「この章だけサクッと読みたい」「上の目次から飛びたい」というニーズはとても大きいものです。

同じページ内の特定の位置にジャンプさせる仕組みを「アンカーリンク」または「ページ内リンク」と呼びます。WordPressのブロックエディターなら、2ステップで簡単に設置できます。

ステップ1:ジャンプ先のブロックにHTMLアンカーを設定する

最初に、リンクを飛ばしたい先のブロック(H2見出しや段落など)を選択します。右サイドバーの「ブロック」タブ下部にある「高度な設定(Advanced)」を開き、「HTMLアンカー」欄に英数字でアンカー名を入力しましょう。

見出しブロックを選択した状態で、右サイドバーに「高度な設定」エリアを選択すると、「HTMLアンカー」が表示されるのでアンカー名を入力します

入力時には以下のルールに気をつけてください。

  • アルファベットから始める(数字始まりは不可)
  • 半角英数字を基本にし、ハイフン(-)やアンダースコア(_)も使える
  • スペースは使えない
  • 大文字と小文字は区別される
  • 同じページ内で重複しないユニークな名前にする

たとえばFAQセクションなら faq 、料金プランなら price-plan のように、内容が分かる短い英単語が便利です。

ステップ2:リンク元のテキストに「#アンカー名」を指定する

次に、リンクを貼りたいテキストやボタンを選択し、ツールバーの「リンク」アイコンをクリックします。URL欄に # のあとアンカー名を入力するだけで設定完了。先ほどのFAQ例なら #faq 、料金例なら #price-plan を入力します。

ページ内リンクを貼る時は、入力欄の先頭に「#」を入力することを忘れないでください

公開済みの記事でクリックすると、指定したブロックの位置までブラウザが自動でスクロールしてくれます。プレビュー画面でも動作確認できるため、公開前に必ず一度クリックして挙動をチェックしましょう。

別ページの特定箇所にリンクするには

アンカーリンクは同じページ内だけでなく、別のページの特定の位置に飛ばす使い方も可能です。書き方は「URLのあとに #アンカー名 を続ける」だけです。

たとえば、料金ページのFAQ部分に他の記事からリンクしたい場合は、https://example.com/price/#faq のように指定します。グローバルメニューやサイドバーから直接「料金ページのFAQ」へ飛ばしたいケースでも、この書き方が役立ちます。

目次代わりに使うときのコツ

目次から各章にジャンプさせる導線は、長文記事の回遊率を上げる定番の手法です。WordPressの場合、次のいずれかの方法が定着しています。

  • 目次プラグインを導入する:「Easy Table of Contents」や「Rich Table of Contents」など、見出しを自動収集してアンカー付き目次を作るプラグインがある
  • 手動で目次を作る:リスト形式で各H2へのアンカーリンクを並べる方法。目次にしたい順番や表記を柔軟に調整できる

Easy Table of Contents

Rich Table of Contents

ジャンプ時の動きをなめらかにしたい場合は、CSSの scroll-behavior: smooth を html 要素に適用するか、スムーズスクロール対応の目次プラグインを使うと、視覚的に分かりやすい挙動になります。

メールリンク・電話リンクの貼り方

メールリンク・電話リンクの貼り方

問い合わせや予約の入り口として、テキストやボタンをクリックするだけで「メールアプリが立ち上がる」「電話アプリが発信画面になる」リンクは、スマホ時代の販促ページに欠かせません。

書き方は通常のURLとほぼ同じで、リンクの先頭に決まった文字列を付けるだけで実現できます。

mailto: でメールリンクを貼る方法

メールリンクは、URL欄に mailto:メールアドレス の形式で入力します。たとえば mailto:info@example.com と書けば、クリック時に既定のメールアプリの新規作成画面が開き、宛先欄にアドレスが自動入力された状態になります。

mailto:メールアドレス の形式で入力すると、メールアプリが起動する形式のリンクになります

さらに、件名や本文を初期セットしておくことも可能です。「?subject=件名」「&body=本文」を続けるだけで、利用者がメールを書く手間を減らせます。

  • 基本形:mailto:info@example.com
  • 件名付き:mailto:info@example.com?subject=お問い合わせ
  • 件名と本文付き:mailto:info@example.com?subject=お問い合わせ&body=お名前とご用件をご記入ください

tel: で電話発信リンクを貼る方法

電話リンクは、URL欄に tel:電話番号 の形式で入力します。スマートフォンで読まれることを想定して、国際ダイヤル形式で書くのが基本です。

  • 国内の固定電話:tel:+81-3-1234-5678
  • 携帯電話:tel:+81-90-1234-5678
  • フリーダイヤル:tel:+81-120-123-456

+81 は日本の国番号で、頭の 0 を取り除いて表記します。ハイフン区切りは見やすさのためで、ブラウザはハイフンを除いて発信処理を行うため、表示用と発信用で動作が変わる心配はありません。

電話リンクは、URL欄に tel:電話番号 の形式で入力します

スマートフォンでは電話アプリが直接起動し、ワンタップで発信できる導線になります。PCではOSやブラウザの設定で挙動が変わるため、PC利用が多いサイトでは併せて電話番号を文字でも表示しておくのがおすすめです。

問い合わせ導線として使うときの注意点

メールリンク・電話リンクは便利ですが、設置場所や運用次第で使いにくくなる落とし穴もあります。

  • mailto: はスパムのリスクがある:アドレスを記事内にそのまま記載すると、自動収集ボット(スパムボット)に拾われやすくなります。問い合わせの量が増える前提なら、お問い合わせフォーム(Contact Form 7など)に切り替えるほうが安全です
  • ボタンとセットで使うとクリックされやすい:テキストリンクより、電話ボタン・メールボタンとして装飾したほうが視覚的に目立ち、CV率が安定しやすいです
  • スマホとPCで挙動が違うことを前提に設計する:スマホ専用CTAとPC専用CTAでデザインを分け、PCでは番号テキストも併記する設計が無難です

問い合わせフォームへの誘導と組み合わせれば、ユーザーの好みに合わせて選んでもらえる導線になります。

メニューやウィジェットにリンクを設定する方法

メニューやウィジェットにリンクを設定する方法

ヘッダー・フッター・サイドバーといった「記事本文の外側」にあるリンクは、サイトの回遊性に大きく影響します。

WordPressでは、お使いのテーマがブロックテーマかクラシックテーマかによって編集画面が変わるため、まずはテーマ種別を確認したうえで該当する手順に進みましょう。

ブロックテーマでメニューを編集する(ナビゲーションブロック)

Twenty Twenty-Fiveなど近年のデフォルトテーマや、フルサイト編集対応のテーマを使っている場合は、ブロックテーマでの手順になります。

  1. 管理画面の「外観 → エディター」をクリックする
  2. ヘッダーやフッターのテンプレートを選択し、編集したいナビゲーションブロックをクリックする
  3. 左上の「リスト表示」アイコンを開き、編集したい個別のリンクを選ぶ
  4. 右サイドバーの設定パネルから、URL・テキスト・新しいタブで開く・rel属性などを入力する
  5. 右上の「保存」をクリックして変更を反映する

ナビゲーションブロックでは、コードを書かずに rel 属性まで指定できるのが大きなメリットです。外部の提携先メニューに nofollow を付ける、広告先には sponsored を付与する、といった運用ルールをUIから完結させられます。

リンクを貼りたい箇所を選択するとツールバーが表示されるので、リンクアイコンをクリックします
Twenty Twenty-Fiveテーマの時のナビゲーションを編集している画面

クラシックテーマでメニューを編集する(外観 → メニュー)

クラシックテーマを利用している場合や、Classic Editorプラグインを使い続けている環境では、「外観 → メニュー」から編集します。

  1. 「外観 → メニュー」を開き、編集したいメニューを選択する
  2. 左側のリストから「カスタムリンク」「投稿」「固定ページ」などを選んでメニューに追加する
  3. メニュー項目をクリックすると、ナビゲーションラベルとURLが編集できる
  4. 「メニューを保存」をクリックして反映する

「新しいタブで開く」やCSSクラス、タイトル属性などの高度な設定を使いたい場合は、画面右上の「表示オプション」を開き、「高度なメニュー設定を表示」のチェックを入れましょう。すると、メニュー項目を展開したときに「リンクを新しいタブで開く」「タイトル属性」「CSSクラス」「リンク先の関係(XFN)」といった項目が現れます。

カスタマイザー(外観 → カスタマイザー → メニュー)からも同じメニューを編集できるため、見た目を確認しながら設定したい場合はこちらを使いましょう。

ウィジェットにリンクを追加する方法

サイドバーやフッターウィジェットにリンクを設置したい場合は、「外観 → ウィジェット」を開きます。利用しているテーマがブロックウィジェットに対応していれば、ブロックエディターと同じ操作感で「段落」「ボタン」「カスタムHTML」などのブロックを配置できる仕様です。

おすすめの組み合わせは次のとおり。

  • 段落ブロック:通常のテキストリンクをサイドバーに置きたいとき
  • ボタンブロック:キャンペーン用CTAをサイドバー・フッターに常設したいとき
  • カスタムHTMLブロック:rel属性やUTMパラメータをコードレベルで細かく制御したいとき

キャンペーン期間中だけ表示するバナーリンクなら、ウィジェットを差し替えるだけで全ページに反映できるのも便利なポイントです。

リンクのrel属性とセキュリティ属性の正しい使い分け

リンクのrel属性とセキュリティ属性の正しい使い分け

WordPressのリンク設定画面で見かける「nofollow」「新しいタブで開く」は、なんとなく付けたり外したりしている方も多いのではないでしょうか。これらはSEO・セキュリティ・ユーザー体験のすべてに関わる重要な属性で、用途に応じて使い分けるのが正解です。ここでは公式ドキュメントの方針をもとに、判断軸を整理します。

nofollow・sponsored・ugc の3つの違いと使い分け

nofollow・sponsored・ugc の3つの違いと使い分け

Googleは外部リンクの性質を伝えるための rel 属性として、3種類の値を用意しています。

  • rel="sponsored":広告、有料掲載、アフィリエイトなど、金銭のやり取りが発生しているリンク
  • rel="ugc":コメント欄やフォーラム投稿など、ユーザー生成コンテンツ(User Generated Content)に含まれるリンク
  • rel="nofollow":自分のサイトとの関連性を示したくないリンク全般

ここで誤解しやすいのが「外部リンクには全部 nofollow を付ければ安心」という運用です。Googleの公式ドキュメントでは、nofollow を一律に付与する運用は推奨されていません。

広告は sponsored、ユーザー投稿は ugc、それ以外で自分のサイトと関連付けたくないリンク先にリンクする場合、リンク先のページをクロールさせたくない場合のみ nofollow、というふうに性質ごとに使い分けるのが正しい考え方です。

なお、これらの属性は複数値を組み合わせて使えます。ユーザー投稿の中にある広告リンクなら、rel="ugc sponsored" のように指定すれば両方の性質を伝えられます。

noopener・noreferrer は何のために必要か

target="_blank" で新しいタブを開く場合、開いた先のページから「元のページ」を操作できてしまう、というセキュリティリスクがかつて存在していました。タブナビングと呼ばれるこの攻撃を防ぐために用意されているのが rel="noopener" です。

  • rel="noopener":開いた先のページから元ページのウィンドウ情報(window.opener)にアクセスさせない
  • rel="noreferrer":上記に加えて、リファラー(どのページから来たかの情報)も送らない

モダンブラウザ(Chrome・Safari・Firefoxなど)では、target="_blank" を指定するだけで noopener 相当の挙動が自動的に有効になる実装が進んでいます。とはいえ古いブラウザの互換性や、コードの意図を明示する観点から、外部リンクを新しいタブで開く場合は rel="noopener" を併記しておくと安心です。

noreferrer はリファラーを送らない強い設定なので、計測上の流入元が消える点に注意してください。プライバシー要件が明確にある場合のみ追加するのが現実的です。

「新しいタブで開く」を使うべきタイミング

外部リンクをすべて新しいタブで開く運用は、一見便利そうでも実は推奨されていません。利用者が予期しないタブ遷移は混乱を招き、アクセシビリティのガイドライン上もマイナスに作用するためです。

新しいタブで開くべきタイミングの目安は次のとおりです。

  • フォーム入力中の外部リソース:商品比較・規約・参考資料など、入力作業を中断したくないとき
  • 外部の予約・申込ページ:自社サイトに戻ってきてほしい外部CV導線
  • 法的文書・PDFなど:別画面で並べて読みたい資料系コンテンツ

それ以外の参考リンクや関連記事は、同じタブで開く(通常リンク)のがユーザーにとって自然な動きです。新しいタブで開く場合は、リンクテキストに「(別タブで開きます)」と補足するか、アイコンで明示しておくとアクセシビリティ面でも丁寧な対応になります。

クラシックエディターでリンクを貼るときの違い

クラシックエディターでリンクを貼るときの違い

サイト運用の都合でクラシックエディター(Classic Editor)を使い続けている場合や、過去記事の修正時に旧画面が表示される場合の操作方法もまとめておきます。

基本的な考え方はブロックエディターと共通ですが、ボタンの扱いだけ仕様が大きく異なるため、その点を中心に整理します。

テキストリンクの貼り方(Ctrl/Cmd + K のショートカット)

クラシックエディターのテキストリンクは、編集画面上部の「ビジュアル」タブで作業します。

  1. リンクを貼りたいテキストをドラッグで選択する
  2. ツールバーの「リンクの挿入/編集」アイコン(鎖マーク)をクリックする
  3. 表示されたポップアップにURLを入力するか、サイト内のページタイトルで検索する
  4. 「リンク追加」ボタンを押して確定する

ショートカットキーは Ctrl + K(Mac は Command + K)でも同じ操作が可能です。HTMLタブに切り替えれば、link クイックタグをクリックして <a href="..."> を直接挿入することもできます。

画像にリンクを貼る方法(Add Media → Link To 設定)

クラシックエディターで画像リンクを貼るには、画像挿入時の設定画面を使います。

  1. 「メディアを追加(Add Media)」ボタンから画像を選択する
  2. 右側のサイドバーにある「添付ファイルの表示設定(Attachment Display Settings)」を開く
  3. 「リンク先(Link To)」のドロップダウンから、希望する選択肢を選ぶ
    • メディアファイル(Media File):画像ファイル自体を開く
    • 添付ファイルのページ(Attachment Page):WordPressが自動生成する画像詳細ページを開く
    • カスタムURL(Custom URL):任意のページに飛ばす(LPやキャンペーンページなど)
    • なし(None):リンクを設定しない
  4. 「投稿に挿入」をクリックして反映する

代替テキスト(Alt Text)も同じ画面で設定できるため、画像挿入と同時にアクセシビリティ対応まで済ませましょう。

ボタンリンクは「クラシックブロック → ボタンブロック」変換が安全

クラシックエディターには、ブロックエディターのような独立したボタンUIが用意されていません。デザインされたボタンを設置したい場合、選択肢は次のいずれかになります。

  • HTML/CSSで自前のボタンマークアップを書く(管理コストが高い)
  • テーマのショートコード機能を使う(テーマ依存で他環境に持っていきにくい)
  • クラシックブロックをボタンブロックに変換する(推奨)

推奨は3つめの「ボタンブロックへの変換」です。

クラシックエディター上のコンテンツは、ブロックエディターに切り替えると自動的に「クラシックブロック」に格納され、内部のテキストや要素を個別のブロックに変換できます。変換先には「ボタン」も含まれているため、ボタンが必要な箇所だけブロック側に移行する運用が将来の保守性を高めるでしょう。

長期的にはブロックエディターへの全面移行が安全な方向性ですが、運用の都合で段階的に進めたい場合は、ボタンや新しいブロックが絡む箇所からブロック側に寄せていくのが現実的です。

リンクが貼れない・動かないときのトラブルシューティング

リンクが貼れない・動かないときのトラブルシューティング

設定方法を正しく押さえていても、実際に運用していると「クリックしてもページが表示されない」「設定したはずなのに反映されない」というトラブルに遭遇します。よくある症状を4つに分けて、原因と解決策を整理しました。

リンク先が404になる

リンクをクリックしたら「ページが見つかりません(404 Not Found)」が表示される、というケースです。主な原因は次のいずれかです。

  • リンク先のページが削除されている
  • ページのスラッグ(URLの末尾部分)が変更された
  • パーマリンク設定を変えたことで全URLが変わった
  • 画像ファイルの保存先パスが変わった

対処の基本は、最新の正しいURLを調べて貼り替えることです。

すでに公開済みの記事や外部からの被リンクが多いページの場合は、旧URLから新URLへの301リダイレクトを設定することで、アクセスとSEO評価の両方を引き継げます。

301リダイレクトはプラグイン「Redirection」を使うとUIだけで完結するため、初心者にもおすすめです。

関連記事

WordPressサイトのURLを変更したい場合に「SEO評価が下がりそうで怖い」「リダイレクト設定のやり方がわからないし、なんだか難しそう」「プラグインと.htaccess、自分はどっちを使えばいいんだろう?」と悩んでいる方は多いのでは[…]

WordPressのリダイレクト設定方法!初心者・中級者向けに徹底解説

内部リンク候補に目的ページが出てこない

ブロックエディターでサイト内検索しても目的のページが候補に出てこない場合、ほぼ確実に「対象ページが公開済みではない」のが原因です。

WordPressの内部リンク検索は、公開済みのコンテンツのみを対象とする仕様になっています。下書きやレビュー待ち、予約投稿中のページは候補に表示されません。対処方法は次のいずれかです。

  • 対象ページを先に公開してから、改めて検索する
  • 検索を使わず、ページのURLをコピーして直接貼り付ける

リライト中や非公開で進めたい場合は、後者のURL直貼りが現実的でしょう。

HTTPS化後にリンクや画像が表示されない(混在コンテンツ)

サイトをHTTPS化したのに、画像やCSS、外部リソースが表示されない・警告が出るケースは、「混在コンテンツ(Mixed Content)」が原因です。HTTPSのページ内に、HTTPで読み込まれるリソースが混ざっているとブラウザがブロックする仕様になっています。

解決手順は次のとおり。

  1. ブラウザの開発者ツール(F12キー)を開き、「コンソール」または「Issues」タブで混在コンテンツの警告を確認する
  2. 該当するリソースのURLを特定する
  3. WordPress管理画面で該当URLを http://〜 から https://〜 に置換する
  4. 大量にある場合は「Better Search Replace」などの一括置換プラグインを使う

WordPress設定(設定 → 一般)の「WordPress アドレス」「サイトアドレス」もHTTPSになっているかを必ず確認しましょう。

相対リンクが意図しない場所を向く

../page/ や ./image.jpg のような相対パスでリンクを書いたとき、想定と違うURLに飛んでしまうことがあります。これは相対パスの「基準位置」がページの階層によって変わるためです。

対処の基本は2つ。

  • ルート相対パス(/page/ のように / で始まる形式)を使う:サイトのトップを基準にするため、どのページからも同じ場所に飛ぶ
  • ブロックエディターのサイト内検索を使う:内部的にはフルURLや正しいパスが自動挿入されるため、相対パスの計算ミスを避けられる

初心者の場合は、ブロックエディター上でリンクアイコンから検索する方法を基本にしておけば、相対パス絡みのトラブルはほぼ起こりません。

リンク管理に役立つWordPressプラグイン

リンク管理に役立つWordPressプラグイン

記事数が増えると、すべてのリンクを手作業で点検するのは現実的ではなくなります。リンク切れの監視、リダイレクトの設定、属性の一括制御、計測用の短縮URL生成といった作業は、専用のプラグインを組み合わせるのが効率的です。ここでは実務でよく使われる4つを紹介します。

リンク切れを自動検知「Broken Link Checker」

Broken Link Checker

「Broken Link Checker」は、サイト内のリンク切れを自動で検知してくれる定番プラグインです。記事数が増えると、外部サイトの閉鎖や画像の移動など、自分の知らないところでリンクが切れていきます。手動で全記事を点検するのは現実的ではないため、定期スキャンしてくれるツールに任せるのが効率的でしょう。

主な機能は次のとおりです。

  • 投稿・固定ページ・コメント内のリンクを自動チェック
  • 切れているリンクを管理画面で一覧表示
  • 一覧から直接URL修正・リンク解除が可能
  • メール通知でリンク切れを早期発見

大規模サイトではスキャン負荷も無視できないため、チェック頻度の調整や対象範囲の限定設定も活用しましょう。

301リダイレクトを管理「Redirection」

Redirection

「Redirection」は、旧URLから新URLへの301リダイレクトを管理画面から設定できるプラグインです。前述のとおり、リンク先のURLが変わったときの救済策として頻繁に使う機能を、コード編集なしで完結できます。

  • 301/302/307など各種リダイレクトに対応
  • 404エラーの発生記録を自動収集(どのURLが404になっているか可視化)
  • クエリパラメータ単位の細かな制御
  • インポート/エクスポート機能

サイト移行やパーマリンク変更を控えている場合は、事前に導入して404発生時の対処フローを準備しておくと安心です。

外部リンク属性を一括制御「External Links」

External Links

「External Links – nofollow, noopener & new window」は、外部リンクに nofollow noopener sponsored ugc などの属性を自動付与できるプラグインです。記事ごとに手作業で属性を設定するのは大変ですが、ドメイン単位のルールで一括処理できます。

  • 外部リンクと内部リンクを自動判別
  • 外部リンクに新しいタブ・nofollow・noopenerなどを自動付与
  • 例外ドメインを設定可能(提携先のみ通常リンクのままにできる)
  • 外部リンクであることを示すアイコンを自動表示

ただし、一括処理は便利な反面、意図しないドメインにまで属性が付くこともあります。導入前に「例外として扱うドメイン」を整理してから運用するのがコツです。

短縮URLとクリック計測「Pretty Links」

Pretty Links

「Pretty Links」は、長いURLを https://example.com/campaign01/ のような自社ドメインの短いURLに変換し、クリック数を計測できるプラグインです。キャンペーンの効果測定やアフィリエイト管理に向いています。

  • 自社ドメインで短縮URLを発行
  • クリック数・流入元・ブラウザなどを自動計測
  • CSV出力でレポート作成も可能
  • 上位プランではキーワード自動置換などの高度機能も

販促リンクの管理が複雑になってきたタイミングで導入を検討すると、計測と運用の両面で楽になります。なお、各プラグインの最新機能や有料プランの範囲は時期によって変わるため、導入前に公式ページで仕様を確認しましょう。

公開前にチェックしておきたいリンクの確認ポイント

公開前にチェックしておきたいリンクの確認ポイント

記事を公開する前に、設置したリンクが意図したとおりに動くかを確認しておくと、公開後の修正コストを大きく減らせます。リンクが多い記事ほど、最後の見直しでミスが見つかるものです。ここでは3つの観点で実用的なチェック項目をまとめます。

リンク先URLの最終確認

まず確認すべきは、リンク先のURLそのものに不備がないかです。プレビュー画面ですべてのリンクを実際にクリックして、目的のページに到達するかをチェックしましょう。

  • 本番URLになっているか:ステージング環境のURLや、テスト用ドメインが残っていないか
  • パラメータ漏れがないか:UTMパラメータやキャンペーンコードが正しく付与されているか
  • HTTPSになっているか:HTTPのまま貼り付けていないか、混在コンテンツの原因にならないか
  • 404にならないか:相手先のページが現在も存在しているか

特に長く運用しているサイトの記事を更新する場合、外部リンクの参照先が消えていないかを確認するのは効果的です。

開き方と属性の最終確認

次に、リンクの開き方とSEO・セキュリティ属性をチェックします。これらは設定し忘れていても表示自体は壊れないため、意識的に確認しないと見落としやすいポイントです。

  • 「新しいタブで開く」の必要性:本当に必要なリンクだけに付与されているか
  • rel属性の使い分け:広告は sponsored、UGCは ugc、信用供与を避けたいなら nofollow になっているか
  • nofollowの一律付与を避けているか:外部リンクすべてに nofollow を機械的に付ける運用になっていないか
  • 新規タブを開くリンクに noopener 相当の対策があるか:プラグインで自動付与している場合は実際の出力HTMLで確認

ブラウザの「ページのソースを表示」機能や開発者ツールでリンクのHTMLを覗くと、設定どおりに属性が出力されているかを実際に確かめられます。

リンクテキストとアクセシビリティの確認

最後に、リンクの「文字そのもの」が適切かを見直します。アクセシビリティ観点での確認は、SEOにも好影響を与える領域です。

  • リンクテキストが具体的か:「こちら」「ここをクリック」ではなく、遷移先や行動が分かる表現になっているか
  • 画像リンクのalt属性は設定されているか:画像クリック時の遷移先や画像の内容を伝える説明が入っているか
  • 新しいタブで開くリンクは挙動を明示しているか:「(別タブで開きます)」のような補足やアイコンが用意されているか
  • メニュー・フッターのリンクも忘れず確認:本文だけでなく、サイト全体の導線もチェック対象に含める

これらの観点を運用フローに組み込んでおくと、公開後の「リンクが切れている」「想定外の挙動になっている」といった事故を未然に防げます。記事を量産する場合はチェックリストとして外部ドキュメント化しておくと、複数人の運用でも品質が安定するでしょう。

よくある質問

よくある質問

すべての外部リンクを「新しいタブで開く」設定にしてもよい?

おすすめしません。利用者が予期しないタブ遷移はユーザビリティ・アクセシビリティの両面でマイナスに作用するためです。

基本は同じタブで開き、フォーム入力中の参考資料・外部の予約サイト・PDFや法的文書など「元のページに戻ってきてほしい場面」に限って新しいタブで開く運用がおすすめです。

新しいタブで開くリンクには、テキストやアイコンで挙動を明示しておくとさらに親切です。

内部リンクに nofollow を付けるとSEOに悪影響はある?

内部リンクに nofollow を付ける運用は、Googleの公式方針上は推奨されません。

クロールやページ評価の流れを意図せず止めてしまう可能性があり、サイト全体のSEO評価にも影響しかねません。

クロールさせたくないページがある場合は、nofollow ではなく robots.txt や noindex メタタグでの制御を検討するのが正攻法です。

アンカーリンクが動かない

主な原因は、ジャンプ先のHTMLアンカー名とリンク元の #〜 の表記が一致していないか、アンカー設定そのものが未保存になっているケースです。

アンカー名は大文字・小文字を区別するため、#FAQ と #faq は別の指定として扱われます。また、テーマやプラグインの影響で固定ヘッダーが表示位置を覆ってしまう場合もあるため、プレビュー画面で必ず動作確認をしましょう。

リンク切れを放置するとSEOに影響する?

直接の順位下落要因とは公式に明言されていませんが、ユーザー体験を損ねる要素として間接的にSEOに悪影響を与える可能性があります。

404ページに到達した読者は離脱しやすくなり、滞在時間や回遊率の低下につながるためです。

記事数が多いサイトでは「Broken Link Checker」のようなプラグインで定期スキャンを行い、見つけ次第ページの差し替えや301リダイレクトで対応するのがおすすめでしょう。

まとめ

WordPressのリンクは、ブロックエディターを使えばテキスト・画像・ボタン・アンカーまで同じリンクアイコンから一貫して設定できます。

さらに rel 属性とセキュリティ属性を正しく使い分け、公開後のリンク切れまで監視できれば、安全で評価されるサイト運用が実現します。

これからWordPressを始める方は、ロリポップ!レンタルサーバーのWordPress簡単インストールを使えば最新のブロックエディターが約1分でセットアップでき、すぐに本記事の手順を試せます。

まずは普段書いている記事に、テキスト・画像・ボタンの3パターンでリンクを設置するところから始めてみてください。

個人事業主・中小企業のホームページを支える高機能なのに低価格なレンタルサーバー。
WordPressの表示速度が速く、最短60秒でWordPressをスタートできます。
ハイスピードプラン以上ならドメイン2つ目まで無料です。