はじめに
概要
本ドキュメントは、WordPressで画像に内部リンクを設定する方法を分かりやすくまとめた入門ガイドです。基本操作から実践的な応用、アクセシビリティやSEOの視点まで幅広く扱います。
目的
画像リンクを適切に使い、訪問者の回遊性を高めたり、サイト内の導線を整理したりすることが目的です。初心者の方でも実践できる手順を重視しています。
対象読者
WordPressを使い始めた方、記事の見せ方を改善したい方、アクセシビリティやSEOの基本を押さえたい方を想定しています。
本書の構成と使い方
章ごとに手順と具体例を示します。実際の編集画面を開きながら進めると理解しやすいです。
WordPressで画像にリンクを設定する基本的な方法
概要
投稿や固定ページで画像にリンクを設定する基本手順を、はじめての方にも分かりやすく説明します。操作は直感的で数ステップで完了します。
手順（簡潔）
- 投稿または固定ページ編集画面を開きます。
- 「＋」で画像ブロックを追加します。
- メディアライブラリから画像を選ぶか、新規アップロードします。
- 画像を選択すると表示されるツールバーのリンクアイコン（鎖の形）をクリックします。
- 入力欄にリンク先のURLを貼るか、サイト内の投稿を検索して選びます。
- 必要なら「新しいタブで開く」をオンにします。
- 右上の「更新」または「公開」をクリックして保存します。
補足と注意点
- URLは正確に入力してください。先頭の「http://」や「https://」を含めると確実です。
- サイト内リンクを選ぶと、相対パスを気にせず設定できます。
- 画像をメディアライブラリから削除するとリンク先の画像が表示されなくなるので注意してください。
- 外部サイトへ飛ばす場合は「新しいタブで開く」を使うとユーザーが元ページに戻りやすくなります。
具体例
トップページのバナー画像を外部ページに飛ばす例：
1) バナー画像を追加→2) リンクアイコンを押す→3) 外部URLを貼る→4) “新しいタブで開く”をオン→5) 更新。
これで基本的な画像リンクの設定が完了します。分かりにくい点があれば続けて詳しく説明します。
リンク先の選択方法
主な選択肢
- URLの直接入力：外部サイトや特定のページへリンクします。例：商品の詳細ページや外部の参照資料。
- サイト内ページの検索：自分のサイト内にある記事や固定ページを選べます。関連記事やお問い合わせページへ誘導する際に便利です。
- メディアファイル：画像そのもののファイルを開きます。高解像度画像を見せたいときやダウンロードを促すときに向きます。
- 添付ファイルのページ：画像に説明やキャプションを添えた専用ページへ飛ばします。文脈を与えたい場合に適しています。
- その他（メールリンク、アンカーリンクなど）：特定の場所へ移動したり、メール作成を起動したりできます。
選び方のポイント
- 目的を明確にしてください。内部誘導ならサイト内ページ、閲覧・保存が目的ならメディアファイル、説明を見せたいなら添付ページが適します。
- ユーザー体験を優先してください。画像をクリックして突然外部サイトへ飛ぶと離脱が増えます。外部リンクは別タブで開く設定を検討すると親切です。
- SEO面では内部リンクが有利です。ただし過度なリンクは逆効果になるため、関連性の高いものを選んでください。
簡単な例：商品写真→商品ページ、作品見本→メディアファイル、説明付きの画像→添付ページ。目的に合わせて選びましょう。
画像ブロック以外での画像リンク設定
概要
メディアとテキストブロックやギャラリーブロックでも、画像にリンクを設定できます。サイドバーのバナーはウィジェットでHTMLを直接書いてリンクを貼る方法があり、中級者向けです。
メディアとテキストブロック
メディアとテキストは画像と文章を横並びに配置できます。画像を選択してツールバーのリンクアイコンを押し、リンク先URLを入力します。リンク先はサイト内ページや外部URLのどちらでも設定できます。新しいタブで開きたい場合は「新しいタブで開く」を選びます。
ギャラリーブロック
ギャラリーブロックでは各画像に個別のリンクを設定できます。編集モードで画像をクリックし、詳細設定からリンク先を指定します。複数画像をまとめて設定したいときは、先に画像を選んでから一つずつリンクを登録すると管理しやすいです。
サイドバーのバナー（ウィジェットでHTML）
ウィジェットの「カスタムHTML」や「テキスト」で以下のように書くと画像バナーをリンクにできます。例：
URLや画像のパスは環境に合わせて変更してください。target=”_blank”を使うときはrel属性を付けて安全性を高めます。
確認ポイント
- プレビューでリンク先が正しく開くか確認してください。モバイル表示も必ずチェックします。
- alt属性を設定しておくと、視覚に障がいのある方や読み込み失敗時に役立ちます。
画像詳細設定を使った内部リンク埋め込み
概要
画像ブロックを選択して右側の「設定を表示」からリンク先を指定できます。文章のリンクと同様に簡単に内部ページへ誘導できます。
基本手順
- 投稿編集画面でリンクを入れたい画像をクリックします。
- 右側サイドバーの「設定を表示（歯車アイコン）」を開きます。
- 「リンク先」または「Link To」の項目を探します（選択肢は「なし」「メディアファイル」「添付ファイルのページ」「カスタムURL」など）。
- 内部ページに飛ばしたい場合は「カスタムURL」を選び、サイト内の該当ページのURL（例: /about または https://your-site.com/about）を入力します。Gutenbergでは画像選択後のリンクアイコンからページ名を入力すると候補が出ることがあります。
入力のポイント
- サイト内リンクはスラッシュから始める相対パス（/ページスラッグ）で十分です。移行時の手間を減らせます。
- 「新しいタブで開く」を使うかは導線に応じて決めてください。外部リンクほど新しいタブ推奨です。
確認と注意点
- 設定後はプレビューでリンク先が正しいか必ず確認してください。
- 画像のalt属性はそのままにして、リンク先の内容が分かる説明を入れると親切です。
上記手順で、画像詳細設定から内部リンクをシンプルに埋め込めます。
右サイドバーを使ったリンク設定
概要
新しいWordPressエディターでは、画像ブロックを選択すると右側のサイドバーに「リンク設定」オプションが表示されます。ここでカスタムURLを入力し、画像にリンクを簡単に付けられます。
手順（簡単な流れ）
- 投稿編集画面で画像ブロックをクリックして選択します。
- 画面右のサイドバーを確認し、「ブロック」タブ内の「リンク設定」を探します。
- 「リンク先」や「カスタムURL」欄に移動し、リンク先のURLを入力します。
- 「新しいタブで開く」などのオプションがあればチェックを入れます。
- 保存してプレビューで動作を確認します。
よくある設定項目の説明
- カスタムURL: 任意の外部ページや自サイト内のページを指定します（例: https://example.com）。
- メディアファイル／添付ページ: 画像そのものを開くか、添付ファイルページへ移動させるか選べます。
- 新しいタブで開く: 外部リンクに便利です。ユーザーが元ページに戻りやすくなります。
サイドバーが見つからない場合
- まず画像ブロックが選択されているか確認してください。選択外だと表示されません。
- 画面右上の歯車アイコンでサイドバーが表示されているか確認します。
ポイント
- リンク先は正しいURLを入力し、動作確認を必ず行ってください。
- アクセシビリティのために、画像の代替テキスト（alt）も設定しておくと安心です。
alt属性の重要性
alt属性とは
alt属性は画像が表示できないときに代わりに示すテキストです。視覚障害のある方の画面読み上げや、画像が読み込めない環境で重要な役割を果たします。リンク付き画像でも必ず設定してください。
なぜ重要か
- アクセシビリティ：読み上げソフトが内容やリンク先を伝えられます。
- 利便性：画像が壊れた時に代替情報を表示します。
- SEO：検索エンジンが画像内容を理解しやすくなります。
書き方のポイント
- 短く具体的に：5〜15語程度で要点を述べます。
- 目的を伝える：リンク先に誘導する画像なら「商品の詳細ページへ」などと書きます。
- 装飾画像は空に：意味がない装飾はalt=””にして読み上げを省きます。
- キーワード詰め込みは避ける：自然な表現にします。
WordPressでの設定方法
画像ブロックの「代替テキスト」欄に入力します。HTML編集する場合はに記載します。バナーやサイドバーのウィジェットでも同様にalt欄を必ず確認してください。
チェック方法
画像を表示しないブラウザやアクセシビリティ検査ツール（LighthouseやWAVE）で確認してください。読み上げで違和感がなければ適切です。
ユーザー体験の向上
なぜ画像と内部リンクでUXが向上するか
画像は言葉より速く情報を伝え、内部リンクは訪問者を目的のページへ導きます。視覚的な手がかりと即時の遷移を組み合わせると、迷いを減らして行動を促せます。
サイズと配置のコツ
- クリックしやすいサイズを確保します。小さすぎる画像はタップミスを招きます。モバイルでの指の大きさを意識してください。
- 余白をとり、リンク対象であることが分かるようにします。周囲が詰まっていると見落とされます。
- 画像を中央寄せにするか、本文の近くに置くと関連性が明確になります。
キャプションと誘導文の書き方
- 短く具体的な行動を促す言葉を添えます（例：「詳細を見る」「使い方を確認する」）。
- 画像の意味を補足する説明を入れるとクリック率が上がります。
- 色やフォントで目立たせつつ、全体のデザインと調和させます。
実践の流れと注意点
- デバイス別に表示をチェックし、読み込み速度に注意します。画像が重いと離脱につながります。
- 誤解を招く画像やリンク先と無関係な誘導は避けます。ユーザーの期待を裏切らないことが重要です。
- テストを繰り返し、クリック率や滞在時間の変化で改善点を見つけます。
プラグインを使った方法
プラグインを使う利点
プラグインを使うと、画像にリンクを付ける作業を自動化できます。たとえば一括でリンクを設定したり、クリック時にライトボックスで表示したり、リンク先の挙動を細かく指定したりできます。手作業より短時間で済み、更新も簡単です。
注意点（デメリット）
プラグインは便利ですが、サイトの表示速度や他のプラグインとの相性に影響することがあります。頻繁に更新が必要なものもあるので、導入前に評価やレビューを確認してください。また、想定と違う動作をすることがあるため、導入後に必ず動作確認を行ってください。
おすすめする機能例（選ぶポイント）
- 一括置換やテンプレート機能：大量の画像に同じリンクを付けたい場合に便利です。
- ターゲット指定（新しいタブで開く等）：ユーザーの導線をコントロールできます。
- ライトボックスやモバイル対応：見せ方を改善できます。
導入の簡単な流れ
- 管理画面で検索してインストール
- 有効化して設定画面を開く
- まずテスト用の画像で動作確認
- 問題なければ本番へ反映
最後に
スキルや目的に応じて、手動設定とプラグインを使い分けると良いです。小規模で単純な変更なら手動で十分ですし、作業量が多い場合や特殊な表示が必要ならプラグインを検討してください。導入前にバックアップを取る習慣をおすすめします。
