WordPressで画像にハイパーリンクを追加する方法

Feb 19, 2026Arnold L.

リンク付き画像は、静的なビジュアルをナビゲーションツールに変えます。テキストリンクやボタンを読んでもらう代わりに、商品写真、バナー、ロゴ、案内用画像をクリックして、見せたいページへ直接移動してもらえます。

ビジネスサイトでは、これは特に有効です。クリックできる画像は、サービスページ、問い合わせフォーム、料金ページ、ブログ記事、登録フローなどへ訪問者を誘導できます。うまく使えば、使いやすさが向上し、コンバージョンを支え、重要なページを見つけやすくできます。

なぜ画像にリンクを付けるのか？

画像にハイパーリンクを追加することは、次のような一般的なWebページ構成で役立ちます。

  • 注目のオファーへ誘導するヒーローバナー
  • 詳細ページを開くサービスカード
  • ホームページへ戻すロゴ
  • 商品詳細ページへ誘導する商品写真
  • キャンペーンのランディングページへ送る販促画像
  • 視覚的なクリック対象が必要なCTAセクション

クリック可能な画像は、特にモバイル端末でページを見やすくするのに役立ちます。小さなテキストリンクよりも、視覚的な手がかりのほうが伝わりやすい場面が多いためです。

始める前に

以下が用意できていることを確認してください。

  • 公開済み、または下書きのWordPressページや投稿
  • メディアライブラリにアップロード済み、または挿入準備ができている画像
  • 画像を開かせたい遷移先のアドレス

内部ページへリンクする場合は、先にそのページのアドレスをコピーしておきます。外部サイトへリンクする場合は、遷移先が信頼でき、関連性があることを確認してください。

ブロックエディターで画像にハイパーリンクを追加する方法

最新のWordPressサイトでは、Gutenbergとも呼ばれるブロックエディターがよく使われています。手順は簡単です。

1. ページまたは投稿を開く

WordPressダッシュボードから、画像リンクを入れたいページまたは投稿を開きます。

2. 画像ブロックを挿入または選択する

画像がまだページにない場合は、次の操作を行います。

  • + ボタンをクリックする
  • 画像ブロックを選ぶ
  • 画像をアップロードする、メディアライブラリから選ぶ、または適切であればURLから挿入する

すでに画像がある場合は、1回クリックしてブロックを選択します。

3. リンクを追加する

画像ブロックが選択されたら、ブロックツールバーのリンクアイコンを探します。

  • リンクボタンをクリックする
  • 遷移先のアドレスを貼り付けるか入力する
  • Enterキーを押すか、リンクを適用する

WordPressのバージョンやテーマによっては、次のリンク先オプションも表示されます。

  • メディアファイル
  • 添付ページ
  • カスタムURL
  • なし

多くのビジネス用途では、カスタムURL が最適です。リンク先を自由に管理できるからです。

4. 必要に応じてリンクの動作を調整する

一部のエディターでは、リンクを新しいタブで開くかどうかを選べます。外部リンクでは便利なことが多いですが、内部リンクは同じタブで開くほうが自然な場合が多いです。

新しいタブは、訪問者の体験を改善するときだけ使ってください。すべてのリンクを強制的に新しいタブで開くのは避けましょう。戸惑いを与えることがあります。

5. ページを保存または更新する

更新、公開、下書き保存 のいずれかをクリックして変更を保存します。

クラシックエディターで画像にリンクを付ける方法

サイトがまだクラシックエディターを使っている場合でも、手順は少し違うだけで簡単です。

1. 画像を挿入する

メディアを追加 をクリックして、画像を本文エリアに配置します。

2. 画像を選択する

画像をクリックして、編集ツールバーを表示します。

3. リンク設定を開く

環境に応じて、画像ツールバーまたは画像詳細パネルからリンクオプションを選びます。

4. 遷移先のアドレスを入力する

入力欄にアドレスを貼り付けて、変更を確定します。

5. 投稿またはページを更新する

保存すると、リンク付き画像が公開サイトで有効になります。

リンク付き画像のベストプラクティス

画像にリンクを付けるなら、クリックしたあとに何が起こるのかが、訪問者にすぐ伝わる必要があります。次のベストプラクティスを守ると、わかりやすく効果的な体験になります。

遷移先が直感的に分かるようにする

画像は、リンク先のアクションや内容を視覚的に示すものを使います。サービス画像なら関連するサービスページへ、販促画像ならそのキャンペーンページへつなげるのが自然です。

代替テキストを分かりやすくする

代替テキストは、スクリーンリーダーに画像の内容を伝え、アクセシビリティを高めます。画像が読み込めない場合の補足にもなります。

画像が装飾目的だけなら、そもそもリンクを付けないほうがよい場合もあります。

モバイルでも押しやすくする

モバイル訪問者はタップしやすさが重要です。誤タップしにくい十分な大きさを確保してください。

無関係な内容へリンクしない

ある話題からまったく別の内容へ飛ばさないでください。内容の不一致は信頼を下げ、コンバージョンにも悪影響を与えます。

リンク付き画像は使いすぎない

クリックできる画像が多すぎると、ページが雑然として見えます。機能的な価値がある場面に絞って使ってください。

補足テキストを添える

画像の近くに短い見出しやキャプションがあると、訪問者は次に何をすればよいか理解しやすくなります。これは、マーケティングページやサービスページで特に重要です。

ビジネスサイトでの主な活用例

リンク付き画像は、小規模ビジネスのサイトでもさまざまな目的に役立ちます。

ホームページのナビゲーション

ロゴや注目画像を、サービス、料金、お問い合わせなどの重要ページへつなげられます。

商品やサービスの訴求

ランディングページ上の画像で、訪問者をさらに営業ファネルの奥へ進められます。

ブログの回遊促進

アイキャッチ画像から、関連リソース、事例、内部記事へリンクできます。

リード獲得

バナーやバッジ画像を、登録フォーム、相談ページ、オファーページへつなげられます。

信頼の補強

認定バッジ、提携ロゴ、テストモニアル画像を、詳細情報が載った補足ページへリンクできます。

よくある問題のトラブルシューティング

リンク付き画像が期待どおりに動かない場合は、次の点を確認してください。

アドレスの入力ミス

遷移先が完全で正しいか確認します。https:// の抜けや内部リンクの切れがあると、正しく動作しないことがあります。

画像が目的のページではなく添付ページにリンクされている

WordPressでは、メディアや添付ページが既定になることがあります。正しい遷移先に置き換えてください。

エディターの変更が保存されていない

公開ページでリンクが見えない場合は、編集後に 更新 または 公開 を押したか確認してください。

プラグインやテーマが干渉している

一部のページビルダー、最適化プラグイン、カスタムテーマは、画像リンクの動作を変えることがあります。必要に応じて、ステージング環境でプラグインを一時的に無効化して確認してください。

画像はクリックできそうなのに反応しない

別の要素が画像の上に重なっている場合や、カスタムコードがページレイアウトに影響している場合があります。ページ構造を確認し、別のブラウザでもテストしてください。

サイトパフォーマンスを高めるリンク戦略のヒント

リンク付き画像は、単なる装飾ではなく、より大きなコンテンツ戦略を支えるものであるべきです。

  • 画像がユーザーの次の行動に役立つときだけリンクする
  • 画像をユーザーの意図に合うページへつなげる
  • わかりやすいキャプションと近くのCTAテキストを使う
  • 可能であれば、アナリティクスでクリック状況を確認する
  • ページのアドレスが変わったら、古い画像リンクを更新する

企業サイトでは、こうした小さな改善がナビゲーションを滑らかにし、ユーザー体験全体の摩擦を減らします。

まとめ

WordPressで画像にハイパーリンクを追加する作業は簡単ですが、目的を持って使えば、使いやすさやコンバージョンに大きな効果をもたらします。ロゴ、バナー、サービス画像、販促画像のいずれにリンクする場合でも、重要なのは遷移先の関連性を保ち、行動を明確にすることです。

ビジネスサイトを運営しているなら、クリック可能な画像をサイト構造の一部として考えてください。優れた画像リンクは、訪問者を自然に次のステップへ導き、コンテンツを支え、デスクトップでもモバイルでも体験を向上させます。