WebページをPDFにしたい時は、ChromeやEdgeなどのブラウザにある「印刷」機能を使うと、比較的簡単にPDF保存できます。
たとえば、自分で作成したWordPressページ、操作説明ページ、申請資料用のページ、社内向けの手順書などを、そのままPDFとして残したい場合に便利です。
ただし、実際にPDF化してみると、
「画像が表示されない」
「画面では見えている画像がPDFに出ない」
「ページの途中で画像が切れる」
「改ページの位置が不自然になる」
といったことがあります。
特に、WordPressで作成したページをブラウザ印刷でPDF化する場合、画像の読み込みタイミングや表示幅の設定によって、PDFにうまく反映されないことがあります。
この記事では、WebページをPDFに保存する基本手順と、画像が出ない時に確認したいポイントを初心者向けに解説します。
Webページはブラウザの印刷機能でPDFにできる
WebページをPDFにする方法はいくつかありますが、もっとも手軽なのは、ブラウザの印刷機能を使う方法です。
ChromeやEdgeでは、印刷画面から保存先を「PDFに保存」に変更することで、表示中のWebページをPDFファイルとして保存できます。
専用ソフトを使わなくても、ブラウザだけでPDF化できるため、ちょっとした資料作成や保存用にはとても便利です。
ChromeやEdgeなら「印刷」からPDF保存できる
基本的な流れは次の通りです。
- PDF化したいWebページを開く
- キーボードで
Ctrl + Pを押す - 印刷画面を開く
- 送信先またはプリンターで「PDFに保存」を選ぶ
- 用紙サイズや余白を確認する
- 保存ボタンを押してPDFとして保存する
Windowsの場合は、ChromeでもEdgeでもほぼ同じような操作でPDF保存できます。
CHROMEの例
下記のようなメニュが出たら、印刷するをクリックします。
送信先にPDFに保存 を選択します。 ここで保存する前に、全ページ画像が出ているかを確認してください。
出ていないことがあります。プレビューのページをスクロールして、最後のページまで閲覧ください。画像の遅延呼び込み等がある場合は、閲覧して画像が出てから保存を押しましょう。 画像表示に問題がなければ保存ボタンを任意のフォルダーに保存してください。
WordPressページや自作ページもPDF化できる
自分で作成したWordPressページも、同じようにPDF化できます。
たとえば、
- 申請資料
- 操作説明書
- 機能説明書
- 社内マニュアル
- 顧客向け説明資料
- Webページの控え
などを、固定ページとして作成し、それをブラウザの印刷機能でPDF化することができます。
自分で作ったページであれば、見出しごとに改ページしたり、画像の表示サイズを調整したりできるため、PDF資料として整えやすいのもメリットです。
申請資料・操作説明書・社内資料にも使いやすい
WebページをPDF化する方法は、簡易的な資料作成にも向いています。
たとえば、WordPressで説明ページを作成しておき、それをPDF化すれば、WebページとPDF資料の両方を用意できます。
申請資料や機能説明書のように、画面ショットを入れながら説明したい場合にも便利です。
ただし、Webページは本来ブラウザ表示用に作られているため、そのままPDF化すると、画像や改ページが思った通りにならないことがあります。
WebページをPDFに保存する基本手順
ここでは、ChromeやEdgeを使ってWebページをPDFに保存する基本手順を確認します。
PDF化したいページをブラウザで開く
まず、PDF化したいWebページをブラウザで開きます。
WordPressの固定ページや投稿ページをPDF化する場合は、編集画面ではなく、公開ページまたはプレビュー画面を開きます。
この時点で、ページ内の画像や表が正しく表示されているかを確認しておくと安心です。
印刷画面を開いて「PDFに保存」を選ぶ
ページを開いたら、キーボードで Ctrl + P を押します。
すると印刷画面が開きます。
送信先やプリンターの選択欄で、
「PDFに保存」
または
「Microsoft Print to PDF」
のような項目を選びます。
Chromeの場合は「PDFに保存」を選ぶと、そのままPDFファイルとして保存できます。
用紙サイズはA4、向きは縦・横を確認する
申請資料や社内資料として使う場合は、用紙サイズをA4にしておくと扱いやすいです。
画面ショットが横長の場合は、縦向きでは画像が小さくなりすぎることがあります。その場合は、横向きも検討します。
ただし、文章中心の資料であれば、基本はA4縦で作成した方が読みやすくなります。
余白や倍率を調整して見やすくする
印刷画面では、余白や倍率も調整できます。
画像が小さすぎる場合は倍率を上げる、逆にページからはみ出す場合は倍率を下げる、といった調整ができます。
ただし、倍率を大きくしすぎると、画像や表が途中で切れることがあります。
まずは標準設定で確認し、必要に応じて少しずつ調整するのがおすすめです。
PDF化する前にページの最後までスクロールする
WebページをPDF化する時に、意外と大事なのが「保存前にページの最後までスクロールする」ことです。
これは非常に小さな操作ですが、画像がPDFに出ない問題の対策として有効な場合があります。
画像が読み込まれていないとPDFに出ないことがある
Webページでは、画像を必要になったタイミングで読み込む仕組みが使われていることがあります。
これを遅延読み込みと呼びます。
ページを開いた直後は、画面の上の方にある画像だけが読み込まれ、下の方にある画像はまだ読み込まれていない場合があります。
その状態で印刷画面を開くと、ブラウザの印刷プレビューに画像が反映されず、PDFにも画像が出ないことがあります。
まずページの一番下までスクロールする
PDF保存前には、まずページの一番下までスクロールしてみてください。
ページを最後までスクロールすることで、下の方にある画像も読み込まれやすくなります。
特に、画像を複数枚使っているページでは、最後までスクロールして画像をすべて表示させてからPDF化する方が安全です。
すべての画像が表示されているか確認する
ページを最後までスクロールしたら、画面上で画像がすべて表示されているか確認します。
途中の画像が空白になっている場合は、まだ読み込みが完了していない可能性があります。
その場合は、少し待つか、ページを再読み込みしてから、もう一度最後までスクロールします。
印刷プレビューでも画像が出ているか確認する
ページ上で画像が見えていても、印刷プレビューでは表示されない場合があります。
PDF保存前には、印刷プレビューで画像が正しく表示されているか必ず確認しましょう。
印刷プレビューで画像が出ていない場合、そのままPDF保存しても画像が出ない可能性が高いです。
その場合は、いったん印刷画面を閉じて、ページを再読み込みし、再度最後までスクロールしてから印刷画面を開き直します。
PDFにした時に画像が出ない主な原因
WebページをPDFにした時に画像が出ない原因はいくつかあります。
ここでは、初心者でも確認しやすい主な原因を整理します。
画像の読み込みが間に合っていない
もっとも多いのは、画像の読み込みが間に合っていないケースです。
Webページでは表示されているように見えても、印刷処理のタイミングでは画像がまだ完全に読み込まれていない場合があります。
この場合、PDFには画像部分が空白になってしまうことがあります。
対策としては、
- ページを最後までスクロールする
- 画像が表示されるまで待つ
- 印刷プレビューで確認する
- 出ない場合は再読み込みする
といった方法があります。
WordPressの遅延読み込みが影響している
WordPressでは、画像に遅延読み込みの設定が自動的に入ることがあります。
これは通常のWeb表示では便利な仕組みですが、PDF化する時には画像が読み込まれない原因になることがあります。
特に、ページ下部にある画像や、画面外にある画像がPDFに出ない場合は、遅延読み込みの影響を疑ってみるとよいです。
画像サイズが大きすぎる
画像サイズが大きすぎると、PDF化の時に表示が不安定になることがあります。
特に、スクリーンショットをそのまま高解像度のPNGで入れている場合、PDFの容量が大きくなったり、印刷プレビューで表示が崩れたりすることがあります。
WebページをPDF資料として使う場合は、画像を適度なサイズに調整しておくと安定しやすくなります。
画像の表示幅や配置設定が影響している
WordPressでは、画像ブロックに対して、
- 中央寄せ
- 幅広
- 全幅
- 通常幅
などの表示設定を選べる場合があります。
この表示設定がPDF化に影響することがあります。
たとえば、画面上ではきれいに見えていても、PDF化すると画像がページ幅からはみ出したり、逆に表示されなかったりする場合があります。
その場合は、画像の表示幅を変更して再度PDF化してみると改善することがあります。
印刷プレビュー上で画像が非表示になっている
PDF保存する前に、印刷プレビューで画像が出ているか確認することが大切です。
ブラウザ画面上で見えていても、印刷プレビューで消えている場合は、そのまま保存してもPDFには出ません。
必ず、印刷プレビューの段階で確認しましょう。
画像が出ない時に試したい対処法
ここからは、画像が出ない時に試したい具体的な対処法を紹介します。
ページを再読み込みしてからPDF保存する
まず試したいのは、ページの再読み込みです。
ブラウザの更新ボタンを押してページを再読み込みし、画像が表示されるまで待ちます。
その後、ページの最後までスクロールして、画像がすべて表示されていることを確認してから印刷画面を開きます。
ページ下までスクロールして画像を表示させる
画像が出ない時は、ページ下までスクロールするだけで改善することがあります。
これは、スクロールによって画像の読み込みが実行されるためです。
特に、WordPressページや画像が多いページでは、PDF化する前に一度すべての画像を表示させておくことが大切です。
画像サイズを少し小さくする
画像が大きすぎる場合は、画像サイズを少し小さくしてみます。
たとえば、横幅が非常に大きい画像をそのまま使っている場合は、横幅を1200px前後に調整すると扱いやすくなります。
画面ショットを資料に使う場合、必要以上に大きな画像を入れても、PDF上では縮小されることが多いです。
PDF資料用であれば、見た目が確認できる範囲で、適度に軽くしておく方が安定します。
PNGよりJPEGにして容量を軽くする
スクリーンショットはPNGで保存されることが多いですが、PDFに何枚も入れる場合は容量が大きくなりやすいです。
画像の内容にもよりますが、資料用であればJPEGに変換することで容量を抑えやすくなります。
ただし、文字が細かい画面ショットをJPEGにすると、圧縮によって文字が少しにじむ場合があります。
そのため、画質を下げすぎず、80〜90%程度の品質で保存するとバランスが取りやすいです。
画像の配置を中央・幅広・全幅で調整する
WordPressの場合、画像ブロックの表示幅を変更すると、PDF化した時の出方が変わることがあります。
画像が出ない、途中で切れる、サイズが不自然になる場合は、
- 通常幅
- 中央寄せ
- 幅広
- 全幅
などを試してみてください。
必ずしも全幅が正解ではありません。
資料用PDFでは、本文幅に収まる通常幅や幅広の方が安定することもあります。
印刷プレビューで画像表示を確認してから保存する
最後に、印刷プレビューで画像が表示されているか確認します。
PDF保存後に確認するのではなく、保存前の印刷プレビューで見ることが大切です。
画像が出ていなければ、PDF保存しても基本的には出ません。
印刷プレビューで画像が表示されている状態になってからPDF保存しましょう。
WordPressページをPDF化する時の注意点
WordPressページをPDF化する場合は、通常のWeb表示とは違う点に注意が必要です。
画像ブロックの表示設定でPDF結果が変わることがある
WordPressの画像ブロックは、テーマやブロック設定によって表示幅が変わります。
画面上では問題なく見えていても、印刷時には別のCSSが適用され、表示が変わることがあります。
そのため、画像がうまくPDFに出ない場合は、画像そのものではなく、ブロック設定やテーマのCSSが影響している可能性があります。
幅広・全幅・中央寄せを試すと改善する場合がある
画像が出ない、または途中で崩れる場合は、画像ブロックの配置を変えてみましょう。
たとえば、中央寄せでうまくいかない場合、幅広にすると出ることがあります。
逆に、全幅で崩れる場合は、通常幅に戻すと安定することもあります。
PDF化では、画面表示と印刷表示が完全に同じになるとは限りません。
少し表示幅を変えて試すことも、実務上は有効な対処法です。
申請資料ならワンカラム表示にすると見やすい
WordPressページを申請資料や説明資料としてPDF化する場合は、ワンカラム表示にするのがおすすめです。
サイドバーがあると、本文の幅が狭くなり、画像や表が小さくなってしまうことがあります。
また、PDFにした時に余計なメニューや関連記事が入ると、資料として読みにくくなります。
申請資料や機能説明書として使う場合は、本文だけが表示されるシンプルなレイアウトにすると見やすくなります。
サイドバーや不要なパーツは非表示にするとよい
印刷用のCSSを使えば、ヘッダー、フッター、サイドバー、関連記事、SNSボタンなどを印刷時だけ非表示にできます。
自分で作成したページをPDF化する場合は、印刷用CSSを追加して、PDFに必要な本文だけを出すようにするときれいに仕上がります。
固定ページをPDF資料用に使うと調整しやすい
WordPressでPDF資料を作る場合は、投稿記事よりも固定ページの方が調整しやすいことがあります。
固定ページなら、申請資料用、説明書用、印刷用などの目的に合わせて、専用のレイアウトにしやすいためです。
資料用ページを作り、そのページだけに印刷用CSSを入れれば、他の記事に影響を与えずにPDF化できます。
自分で作ったページなら改ページも調整できる
WebページをPDF化すると、ページの切れ目が不自然になることがあります。
たとえば、見出しだけが前のページに残ったり、画像と説明文が別ページに分かれたりすると、読みづらい資料になってしまいます。
自分で作成したページであれば、CSSやHTMLを使って改ページ位置を調整できます。
見出しごとに改ページすると読みやすい
機能説明書や操作説明書では、見出しごとにページを分けると読みやすくなります。
たとえば、
- システム概要
- 機能一覧
- 在庫一覧
- 入出庫管理
- 棚卸管理
- システム構成
のように、H2見出しごとに改ページすると、PDF資料として整理された印象になります。
CSSでH2ごとに改ページを指定できる
自分で作成したページであれば、印刷用CSSを使って、H2見出しの前で改ページするように指定できます。
たとえば、以下のような考え方です。
<style>
@media print {
.post_content h2 {
break-before: page;
page-break-before: always;
}
.post_content h2:first-of-type {
break-before: auto;
page-break-before: auto;
}
}
</style>この指定を入れると、印刷時にH2見出しの前で改ページされます。
最初のH2だけは改ページしないようにしておくと、1ページ目が空白になるのを防げます。
任意の場所に改ページ用HTMLを入れる方法もある
H2ごとに自動で改ページするのではなく、好きな場所で改ページしたい場合は、改ページ用のHTMLを入れる方法もあります。
たとえば、任意の場所に以下のようなHTMLを入れます。
<div class="page-break"></div>そして、CSSで印刷時に改ページするよう指定します。
<style>
@media print {
.page-break {
break-before: page;
page-break-before: always;
}
}
</style>この方法なら、ページの途中で「ここから次のページにしたい」という場所を自分で指定できます。
画像と説明文が別ページに分かれないようにする
画像と説明文が別ページに分かれると、読み手にとって分かりにくくなります。
その場合は、画像と説明文をひとつのブロックにまとめ、印刷時に途中で分断されにくいように指定します。
たとえば、画像と説明文を同じグループやボックスに入れておくと、PDF化した時に見やすくなります。
印刷用CSSでは、次のような指定を使うことがあります。
<style>
@media print {
figure,
img,
.wp-block-image,
.wp-block-group {
break-inside: avoid;
page-break-inside: avoid;
}
}
</style>これにより、画像やグループがページ途中で分断されにくくなります。
PDF保存前のチェックリスト
WebページをPDF化する前には、次の項目を確認しておくと安心です。
ページを最後までスクロールしたか
まず、ページの一番下までスクロールしたか確認します。
画像が遅れて読み込まれるページでは、スクロールしないと下の方の画像が読み込まれないことがあります。
画像がすべて表示されているか
ページ内の画像がすべて表示されているか確認します。
空白になっている画像がある場合は、再読み込みしてから再度確認します。
印刷プレビューで画像が出ているか
ブラウザ画面ではなく、印刷プレビュー上で画像が出ているか確認します。
印刷プレビューで出ていない画像は、PDFにも出ない可能性があります。
ページの途中で画像が切れていないか
画像がページの途中で切れていないか確認します。
特に、縦長の画像や大きな表は、ページをまたいで分割されることがあります。
必要に応じて、画像サイズや改ページ位置を調整しましょう。
改ページ位置が不自然ではないか
見出しだけが前のページに残っていないか、画像と説明文が別ページに分かれていないかを確認します。
読みやすいPDFにするには、改ページ位置も重要です。
PDF容量が大きすぎないか
画像が多いPDFは、ファイルサイズが大きくなりやすいです。
提出先やメール添付に容量制限がある場合は、PDFのサイズも確認しましょう。
画像をJPEGにする、画像サイズを小さくする、不要な画像を減らすなどの対策が有効です。
提出先の容量制限に収まっているか
申請資料などでは、PDFのアップロード容量に制限がある場合があります。
たとえば10MB以内などの制限がある場合、画像が多い資料では注意が必要です。
PDF化した後は、必ずファイルサイズを確認してから提出しましょう。
まとめ｜WebページのPDF化は保存前の確認が大切
Webページは、ChromeやEdgeの印刷機能を使えば簡単にPDF保存できます。
ただし、WebページをそのままPDF化すると、画像が出ない、改ページが不自然になる、ページが崩れるといったことがあります。
特に画像が出ない場合は、まずページを最後までスクロールして、すべての画像が表示されているか確認しましょう。
そのうえで、印刷プレビューでも画像が出ているか確認してからPDF保存することが大切です。
画像がうまく表示されない場合は、画像サイズを少し小さくしたり、PNGではなくJPEGにしたり、WordPressの画像ブロックの幅を通常幅・幅広・全幅で調整したりすると改善する場合があります。
また、自分で作成したページであれば、CSSやHTMLを使って改ページ位置を調整できます。
WebページのPDF化は、少しの確認と調整でかなり安定します。
申請資料、操作説明書、社内資料などをWebページからPDF化したい場合は、保存前に画像表示と改ページ位置を確認してからPDF保存するのがおすすめです。
コメント