PDFリンクがクリックできない？原因と簡単修正方法を徹底解説
イントロダクション
ウェブサイトやメールでPDFを配布するとき、読者が内部リンクをクリックしてページ間を移動できるようにすることは「ユーザー体験」（UX）の向上に直結します。しかし、実際にPDFをアップロードしても、リンクが機能しない、あるいは「クリックできない」状態になるケースが頻繁に発生します。
ここでは、PDFリンクがクリック不可能になる主な原因を整理し、具体的な修正手順（HTML・CSS側、PDF生成側、設定変更）を段階的に解説します。初心者でも取り組みやすい「簡単修正方法」を中心にご紹介しますので、ぜひ実践してください。
1. PDFリンクがクリックできない主な原因
1-1. PDF自体のセキュリティ設定
Adobe Acrobat では「リンク操作を禁止する」セキュリティオプションを設定できます。
- セキュリティ > 権限 > リンクをクリックしてもページに移動しない
と設定されていると、リンクは機能しません。
1-2. PDFの作成時にリンクがハイパーリンクではなく「単なるテキスト」として埋め込まれている
- Word→PDF の際に「リンクを保持」設定をオフにしている
- PDF編集ソフトで「リンクを作成」ではなく「テキストを置換」のみを行った
1-3. ウェブ上でPDFを埋め込む際の表示方法による制御
<embed>タグや<iframe>でPDFを埋め込むと、ブラウザのPDF Viewer の仕様上、リンクが無効になることがあります。- CSS で透明なボタン等をオーバーレイしてしまい、クリックイベントを遮っているケース。
1-4. PDFリーダーのソフトウェアの制限
- PDFを開くためのビルトインブラウザビューア（Chrome、Firefox など）が古いバージョンの場合、JavaScript ベースのリンクや、外部リンクがサポートされないことがあります。
1-5. PDFファイル内のハイパーリンクが正しく設定されていない
- 連結先のURLが空白だったり、
javascript:スクリプトを呼び出すように設定されている - リンク先URLに余分なスペースや改行が入っている
2. PDFリンクの有効性をチェックする手順
-
PDFを開いてみる
- 通常のデスクトップ PDF リーダー（Adobe Acrobat Reader DC など）で開き、リンクをクリックできるか確認する。
- ブラウザ内で開いた場合は、別の PDF ビューアに切り替えてみる。
-
リンク情報を確認
- Acrobat DC なら「ツール」→「リンク」→「ページ内リンク／外部リンク」を選び、リストを取得。
- オープンソースの
pdfinfoコマンドラインツールでリンクメタ情報を抽出。
-
サードパーティツールで検証
pdf-parser.py（iText PDF parser）を使い、/A(Action) オブジェクトの有無を確認。
3. PDF側での簡単修正方法
3-1. Acrobat DC でセキュリティ設定を解除
1. PDFをAcrobatで開く
2. 「ファイル」→「プロパティ」→「保護」タブ
3. 「権限」セクションで「リンクの操作を許可」にチェックを入れる
4. 変更後保存
この操作は、PDF自体を編集できる環境があることが前提です。
3-2. PDFを再生成するときにリンクを保持
Word から PDF の作成例
| ステップ | 設定項目 | 勧める設定 |
|---|---|---|
| 1 | ファイル → エクスポート → PDF/XPS | |
| 2 | 出力設定の「オプション」 | 「保護された PDF」にチェックを外す |
| 3 | 保存 | もう一度 PDF を出力 |
Word では「ハイパーリンクを保持」オプションがデフォルトですが、セキュリティ設定がオンになることがあります。
オープンソースツール利用例（pandoc）
pandoc input.md -o output.pdf \
--pdf-engine=xelatex \
--metadata link-url="http://example.com"
Pandoc で HTML のリンクを PDF 内にハイパーリンクとして貼り込む際は
--metadataで URL を渡すと確実です。
3-3. Hacking でリンクを挿入する（高級者向け）
# Python + PyPDF2 でリンクを追加
from PyPDF2 import PdfReader, PdfWriter
reader = PdfReader("original.pdf")
writer = PdfWriter()
for page in reader.pages:
# 例：ページ左上にリンクを貼る
page.add_link(
rect=(50, 700, 150, 720), # (x0, y0, x1, y1)
reference="/URI",
uri="https://example.com",
border_color=None,
border_width=0
)
writer.add_page(page)
with open("fixed.pdf", "wb") as f:
writer.write(f)
PyPDF2のadd_linkは簡易ですが、正しい境界（座標）を設定する必要があります。
4. ウェブ側での埋め込み修正
4-1. <iframe> で埋め込むときの注意
<!-- 基本形 -->
<iframe src="sample.pdf" width="100%" height="600px" title="PDF viewer"></iframe>
- ポイント：
iframe内でスクロールを許可し、allowfullscreenも付与。 - 問題：ブラウザ間でPDF読み込みが差異。
解決策：Google Docs Viewer の活用
<iframe src="https://docs.google.com/gview?url=YOUR_PDF_URL&embedded=true"
style="width:100%; height:600px;" frameborder="0"></iframe>
Google Docs Viewer はリンクを保持したまま表示してくれます。
4-2. <embed> タグの使い方
<embed src="sample.pdf" type="application/pdf" width="100%" height="600px" />
allowfullscreen属性は無意味。- PDF内のリンクはブラウザのデフォルト PDF Viewer が処理します。
修正策：PDF Viewer ライブラリ利用
利用できる JavaScript ライブラリ（例：PDF.js）:
# npm でインストール
npm install pdfjs-dist
<canvas id="pdf-canvas"></canvas>
<script>
const loadingTask = pdfjsLib.getDocument('sample.pdf');
loadingTask.promise.then(pdf => {
// 1 ページ目を描画
pdf.getPage(1).then(page => {
const canvas = document.getElementById('pdf-canvas');
const ctx = canvas.getContext('2d');
const viewport = page.getViewport({scale: 1.5});
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {canvasContext: ctx, viewport: viewport};
page.render(renderContext);
});
});
</script>
PDF.js はリンクイベントも拾えるので、リンクをクリックして該当ページへスクロールできます。
4-3. CSS でのオーバーレイ対策
/* 例：透明のボタンがリンクのクリックを遮っていたケース */
button.transparent-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10; /* ここが高いと PDF 上のリンクが無効になる */
background: transparent;
}
- 対策：
z-indexを PDF のコンテナよりも低く設定、またはpointer-events: noneを付与。
.transparent-overlay {
pointer-events: none; /* クリックイベントを通過させる */
}
5. 具体例：実際に修正したケーススタディ
| 場合 | 原因 | 修正手順 | 成果 |
|---|---|---|---|
| A | PDF のセキュリティでリンクが無効化 | Acrobat で「権限」を解除 | リンクがクリック可能に |
| B | Word で「ハイパーリンクを保持」を消した | Word で再エクスポート (リンク保持) | すべてのリンクが機能 |
| C | ウェブ上で <iframe> で埋め込んでいた |
Google Docs Viewer を使い再埋め込み | ランクアップ、読み込み速度向上 |
| D | CSS の透明ボタンが上に乗っている | pointer-events:none を追加 |
クリックが通過するように |
| E | PDFのリンク座標がずれていた | PDF.js で再描画し、リンク座標を再設定 | リンクが正しい位置で動作 |
6. まとめ：チェックリスト
| 項目 | 確認ポイント | 推奨ツール |
|---|---|---|
| 1. PDFファイル | リンクがハイパーリンクとして設定されているか | Acrobat、iText |
| 2. PDFセキュリティ | リンク操作が許可されているか | Adobe Acrobat |
| 3. 埋め込み方法 | <iframe>・<embed>・Google Docs を検討 |
HTML, CSS, JavaScript |
| 4. ブラウザ互換性 | 最新版の PDF Viewer を使用 | Chrome, Firefox, Edge |
| 5. CSSオーバーレイ | pointer-events をチェック |
Chrome DevTools |
| 6. テスト | デスクトップとブラウザ両方でリンクをクリック | ユーザーテスト |
7. さらなるヒント：PDFリンクのアクセシビリティを向上させる
-
リンクテキストを具体的に
「こちら」ではなく「詳細情報を見る」など、リンク先を明示すればスクリーンリーダー利用者にも分かりやすい。 -
リンクの色分け
文字色や下線でリンクを識別しやすくし、ユーザーが一目でリンクと判断できるように。 -
リンク先のレスポンシブ対応
PDF 内のリンク先が別ページの場合、ページ番号を固定したアンカーポイントであれば、PDFビューア内のスクロール位置を維持できます。
例：
#section-2で内部リンク、https://example.com/page?id=123で外部リンク。
8. まとめ
PDFリンクがクリックできない問題は、PDF自体のセキュリティ設定、生成時のリンク保持設定、ウェブ上の埋め込み方法、CSS の衝突など、複合的に影響します。
上記で紹介した「確認手順」「修正手順」「チェックリスト」を順に実行すれば、ほとんどの場合でリンクを再活性化できます。
特に初心者の方は「PDFを作るツール（Word、InDesign 等）の設定」を最初に確認し、次に「ウェブ埋め込み方法」を見直すだけでほぼ解決です。
さらに、アクセシビリティを意識したリンク表現で読者体験を高めれば、ウェブサイト全体の評価も上がるでしょう。
ぜひ上記の手順を試してみてください。リンクが再び機能する瞬間、読者の満足度もきっと向上するはずです。
コメント