PDFファイルをホームページに掲載するテクニック

2025年8月18日

すでにPDFファイルで作成してある資料や案内書を、ホームページ上に掲載したい。
そんなとき、最も一般的な方法はリンクでファイルに誘導する形ですが、
「ページの中に直接PDFを表示させたい」というご要望もあります。

この記事では、PDFをホームページ内に埋め込む方法をご紹介します。

PDFのリンク掲載について

PDFを掲載する場合は、「ページからリンクする」方法がもっとも一般的です。実際、多くのページではリンクする方法が採用されています。リンクをクリックして表示することも、右クリックメニューからダウンロードすることも可能です。

PAGEKitでは、PDFファイルにリンクする手順もマニュアルで紹介しています。よろしければ参考にしてみてくださいね。

それでも、どうしてもPDFファイルをページ内に表示させたい、ホームページの訪問者にもっとスムーズに閲覧してもらいたい！という場合があるかと思います。

そんな場合は、「ページ内にPDFファイルを埋め込む」という方法があります。

ファイルを埋め込んで表示できます！

PDFを埋め込んで表示するには、HTMLタグを使用します。
スクロールで読み進められる形式になり、資料や申込書のような内容を自然に見せることが可能です。

以下に手順をご紹介します。

ファイル管理からPDFをアップロードします。

アップロードが完了したら、PDFファイルのURLをコピーします。

表示させたいページの編集画面を表示し、「HTML部分編集」モードに切り替えます。

以下のように、コピーしたURLを使って記述してください。

< embed src="コピーしたPDFのURL" width="100%" height="600px" type="application/pdf" >

・width="100%"：ページ幅にフィットさせる
・height="600px"：表示高さは適宜調整できます

以上で埋め込みは完了です！

タグで表示したPDFは、スマートフォンでは正しく表示されないことがあります。
特にiPhoneではうまく表示されないケースも多いため、次の対策がおすすめです：

PDFファイルの埋め込み表示は、ページの中に資料を直接見せたいときに便利な方法です。
ただしスマートフォン対応を考慮して、必要に応じてリンク併記や表示切り替えを検討しましょう。

ホームページを作るのは、むずかしそう。そう思っていた方も、PAGEKitなら「意外とカンタンだった」と感じていただけるはずです。専門知識がなくても、必要なページがすぐに揃うテンプレートと、やさしい操作画面。まずは一度、実際の使いやすさを体験してみませんか？