初心者向け 手順ガイド
| このガイドでわかること STEP 1 PDFファイルをアップロードする STEP 2 記事・ページにPDFリンクを挿入する STEP 3 PDFをブラウザで表示させる（埋め込み） STEP 4 公開前の確認と注意点 |
対象：WordPress + Cocoonテーマ をお使いの方
STEP 1 PDFファイルをアップロードする
PDFを掲載する最初のステップは、WordPressのメディアライブラリにPDFファイルをアップロードすることです。
アップロード手順
| 1 | 管理画面にログインする ブラウザで「https://あなたのドメイン/wp-admin/」を開く |
| 2 | メディアメニューを開く 左メニューの「メディア」→「新規追加」をクリック |
| 3 | ファイルを選択する 「ファイルを選択」ボタンをクリックし、PDFファイルを選ぶ |
| 4 | アップロード完了を確認する 進行バーが100%になれば完了。ファイル名が一覧に表示される |
| 5 | ファイルURLをコピーする アップロードされたPDFをクリックし、右側の「URLをコピー」をクリックして保存しておく |
アップロードできるファイルサイズの上限
| 項目 | 内容 |
| 一般的な上限 | 多くのサーバーでは 2MB〜64MB 程度 |
| 上限の確認方法 | メディア追加画面に「最大アップロードファイルサイズ: ○○MB」と表示される |
| 上限を超える場合 | PDFを圧縮するか、サーバー設定の変更が必要（要：管理者に相談） |
| 💡 PDFのファイル名はアップロード前に整理しておきましょう • 日本語のファイル名はURLで文字化けすることがあります • 英数字・ハイフン・アンダーバーだけのファイル名が安全です • 例：NG「会社案内2024.pdf」→ OK「company-guide-2024.pdf」 |
STEP 2 記事・ページにPDFリンクを挿入する
メディアライブラリにアップロードしたPDFへのリンクを、記事や固定ページに設置します。クリックするとPDFが開く「ダウンロードリンク」として機能します。
記事・固定ページへのリンク挿入手順
| 1 | 編集画面を開く 「投稿」または「固定ページ」から、PDFを掲載したい記事の編集画面を開く |
| 2 | 段落ブロックを追加する リンクを置きたい場所に「段落」ブロックを追加し、リンクのテキストを入力 |
| 3 | テキストを選択する 入力したテキスト（例：「会社案内PDFをダウンロード」）をドラッグして選択する |
| 4 | リンクボタンをクリック ツールバーの「🔗（リンク）」アイコンをクリック |
| 5 | PDFのURLを貼り付ける コピーしておいたPDFのURLを入力欄に貼り付けてEnterキーを押す |
| 6 | 保存・更新する 「更新」または「公開」ボタンをクリックして保存する |
ボタンブロックを使ってリンクを目立たせる（推奨）
通常のテキストリンクより、ボタン形式にすると訪問者がクリックしやすくなります。
| 1 | 「ボタン」ブロックを追加する 「+」→「ボタン」を検索して選択 |
| 2 | ボタンのテキストを入力する 例：「📄 会社案内をダウンロード（PDF）」 |
| 3 | リンクを設定する ボタンを選択した状態でツールバーの「🔗」をクリックしてPDF URLを設定 |
| 4 | 新しいタブで開く設定にする リンク設定の「新しいタブで開く」をオンにすると、訪問者がページを離れずにPDFを開ける |
| 💡 Cocoonの「ボックス」を使うと見栄えよく掲載できます • Cocoonには「ふきだし」「ボックス」「ハイライト」などの装飾ブロックがあります • PDFの説明文とダウンロードボタンをボックスで囲むと、訪問者の目を引きやすくなります • Cocoon独自ブロックは「+」ボタンの検索欄で「Cocoon」と入力すると見つかります |
| ⚠️ 注意 • 「新しいタブで開く」設定はリンク設定パネル内にあります。設定しない場合、PDFを開くと現在のページが閉じてしまいます • PDFのURLが正しいか、必ずプレビューで確認しましょう |
STEP 3 PDFをブラウザで表示させる（埋め込み）
リンクだけでなく、PDFをページ内でそのまま閲覧できるように「埋め込み（インライン表示）」にする方法を紹介します。スクロールしながらPDF内容を確認できるため、資料や申込書などに便利です。
方法A：カスタムHTMLブロックを使う（簡単・推奨）
WordPressの「カスタムHTMLブロック」にHTMLを貼り付けるだけで埋め込みができます。
| 1 | カスタムHTMLブロックを追加する 「+」→「カスタムHTML」を検索して選択 |
| 2 | 以下のHTMLを貼り付ける 下のコードをコピーしてブロックに貼り付ける |
| 3 | URLを書き換える 「ここにPDFのURLを入力」の部分を、STEP1でコピーしたURLに書き換える |
| 4 | 高さを調整する height=”600″ の数値（ピクセル）を変更して表示高さを調整できる |
| <iframe src=”ここにPDFのURLを入力” width=”100%” height=”600″ style=”border:1px solid #ccc;”></iframe> |
方法B：PDF埋め込みプラグインを使う
プラグインを使うとより見やすく・使いやすい形でPDFを埋め込めます。初心者にも扱いやすい方法です。
| プラグイン名 | 特徴 |
| PDF Embedder | 最も人気。ショートコードを貼るだけで埋め込み完了。無料版あり |
| WP Advanced PDF | ページめくりアニメーション対応。見た目がリッチ |
| Embed Any Document | PDF以外にWordやExcelも埋め込み可能 |
PDF Embedder の使い方（例）
| 1 | プラグインをインストール 管理画面「プラグイン」→「新規追加」→「PDF Embedder」で検索→「今すぐインストール」→「有効化」 |
| 2 | メディアにPDFをアップロード STEP1と同じ手順でPDFをアップロードする |
| 3 | ショートコードを取得する メディアライブラリでPDFを選択し、「PDF Embedder ショートコード」欄のコードをコピー |
| 4 | 記事に貼り付ける 「ショートコード」ブロックを追加し、コピーしたショートコードを貼り付ける |
| 💡 スマートフォンでの埋め込み表示について • iframeによる埋め込みはスマホで見にくい場合があります • スマホユーザーのために「ダウンロードリンク」も必ずセットで用意しましょう • プラグインによってはスマホ対応しているものもあります（PDF Embedderなど） |
STEP 4 公開前の確認と注意点
PDFを公開する前に、以下のチェックリストを確認しましょう。意図しない情報漏洩やリンク切れを防ぐことができます。
公開前チェックリスト
| ✓ | 確認項目 |
| □ | PDFリンクをクリックして正しくPDFが開くか確認した |
| □ | PDFの内容に個人情報・機密情報が含まれていないか確認した |
| □ | PDFのファイル名・URLが意図しない内容になっていないか確認した |
| □ | ダウンロードボタン・リンクのテキストが分かりやすいか確認した（「PDFをダウンロード」など） |
| □ | スマートフォンでの表示・リンク動作を確認した |
| □ | 埋め込み表示の場合、高さ・幅が適切か確認した |
| □ | 著作権・利用許諾の問題がないPDFか確認した |
よくあるトラブルと対処法
| トラブル | 対処法 |
| リンクをクリックしても何も起きない | URLが正しいか確認。メディアライブラリで再コピーして貼り直す |
| 「404エラー」が表示される | PDFがメディアライブラリから削除されていないか確認する |
| PDFがダウンロードされず開かない | ブラウザの設定による。リンクに「download」属性を追加する方法もある |
| 埋め込みが表示されない | サーバーのセキュリティ設定で埋め込みが制限されている場合がある。プラグインを試す |
| PDFが文字化けして表示される | PDFを作成したソフトでフォントを埋め込んで書き出し直す |
| ⚠️ 注意 • 個人情報（氏名・住所・電話番号など）が含まれるPDFの取り扱いには十分注意してください • 他者が作成したPDFを無断でアップロードすることは著作権侵害になる場合があります • 機密文書は公開設定のまま掲載せず、パスワード付きリンクや会員限定機能の使用を検討してください |
全体の流れ まとめ
| STEP | 作業内容 | ポイント |
| 1 | PDFをアップロード | メディア→新規追加。URLをコピーしておく |
| 2 | リンク or ボタンを設置 | テキスト選択→リンク設定。新しいタブで開く設定を忘れずに |
| 3 | 埋め込み表示（任意） | iframeまたはプラグインで記事内に直接表示 |
| 4 | 公開前に確認 | リンク動作・スマホ表示・個人情報チェック |
注意事項
✅ PDF掲載のベストプラクティス
• ファイル名は英数字のみにする
• ダウンロードリンクとセットで埋め込みを設置
• 「新しいタブで開く」を必ず設定する
• 定期的にリンク切れを確認する
⚠️ やってはいけないこと
• 個人情報入りPDFをそのまま公開
• 著作権のあるPDFを無断アップロード
• ファイル名に日本語を使う
• リンクURLを確認せずに公開する
コメント