WordPressページをPDF化する方法｜画像・幅・ページ区切りの調整まで初心者向けに解説　画像がPDFにでないときの対処法

WordPressで作成したページを、PDF資料として保存したいことがあります。

たとえば、以下のようなケースです。

• 申請資料をPDFで提出したい
• 機能説明書をPDF化したい
• 価格説明書をPDF化したい
• 操作マニュアルをPDFにしたい
• お客様へ送る資料を作りたい
• 社内共有用の資料を作りたい

WordPressにはPDF化用のプラグインもありますが、まず試したいのは、ブラウザの印刷機能でPDF保存する方法です。

ChromeやEdgeを使えば、WordPressで表示したページをそのままPDFとして保存できます。

ただし、実際にやってみると、次のような問題でつまずくことがあります。

• サイドバーまでPDFに入ってしまう
• 画像がPDFに表示されない
• 業務フロー図などの横長画像が小さくなる
• 表がページの途中で切れる
• 見出しだけがページ下に残る
• ページ区切りが変な位置になる
• 背景色や枠線が消える

この記事では、WordPressページをPDF化するときの基本手順と、初心者がつまずきやすいポイントをまとめて解説します。

---

WordPressページをPDF化する基本手順

まず、基本的なPDF化の流れです。

ChromeまたはEdgeで、PDF化したいWordPressページを開きます。

その後、以下の操作を行います。

Ctrl + P

または、

右クリック → 印刷

を選択します。

印刷画面が開いたら、送信先を以下にします。

PDFに保存

次に、印刷設定を確認します。

項目	おすすめ設定
送信先	PDFに保存
用紙サイズ	A4
レイアウト	縦または横
余白	既定またはカスタム
倍率	90〜100％
ヘッダーとフッター	オフ
背景のグラフィック	オン

特に重要なのは、ヘッダーとフッターをオフ、背景のグラフィックをオンにすることです。

ヘッダーとフッターをオンにしたままだと、PDFにURLや日付が入ることがあります。申請資料やマニュアルでは不要な場合が多いため、基本的にはオフにします。

また、背景のグラフィックをオフにしていると、表の背景色、枠線、装飾、画像の一部などがPDFに反映されないことがあります。

---

PDF化するページは投稿ページより固定ページがおすすめ

WordPressでPDF資料を作る場合、投稿ページよりも固定ページがおすすめです。

投稿ページはブログ記事用なので、以下のような情報が表示されやすくなります。

• 投稿日
• 投稿者名
• カテゴリー
• タグ
• 関連記事
• 前後の記事リンク
• コメント欄
• SNSシェアボタン
• サイドバー

これらは通常のブログ記事では便利ですが、PDF資料としては不要な場合があります。

申請資料、機能説明書、価格説明書、マニュアルなどを作る場合は、固定ページで作成し、余計な表示を減らすとPDF化しやすくなります。

すでに投稿ページで作っている場合は、投稿編集画面から「すべてのブロックをコピー」を使って、固定ページへ貼り付ける方法が簡単です。

投稿ページで「すべてのブロックをコピー」
↓
新規固定ページを作成
↓
本文エリアへ貼り付け
↓
固定ページ側でPDF用に調整

---

サイドバーを消してワンカラムにする

PDF資料にする場合、サイドバーがあると本文幅が狭くなります。

本文幅が狭いと、表や画像が小さくなり、PDFで見づらくなります。

そのため、PDF化するページでは、サイドバーを非表示にしてワンカラム表示にするのがおすすめです。

SWELLなどのWordPressテーマでは、固定ページごとにサイドバーを非表示にできる場合があります。

基本の流れは以下です。

固定ページを開く
↓
右側の固定ページ設定を確認
↓
SWELL設定またはページ設定を探す
↓
サイドバーを非表示にする
↓
1カラム表示にする
↓
プレビューで確認

サイドバーを消すだけで本文エリアが広くなり、PDF資料としてかなり見やすくなります。

---

画像がPDFに出ないときの確認ポイント

WordPressのページ上では画像が見えているのに、PDFにすると画像が表示されないことがあります。

この場合、画像がJPEGだからダメということは基本的にありません。

JPEGでもPNGでも、通常はPDFに表示されます。

画像が出ない場合は、以下を確認します。

---

ページを下までスクロールして画像を読み込む

WordPressでは、画像の遅延読み込みが行われることがあります。

これは、ページを開いた時点では下の方の画像を読み込まず、スクロールしたときに画像を読み込む仕組みです。

そのため、PDF印刷前にページ下部までスクロールしていないと、画像が未読み込みのままになり、PDFに表示されない場合があります。

PDF化する前に、次の流れで確認します。

ページを開く
↓
一番下までスクロール
↓
画像がすべて表示されたことを確認
↓
Ctrl + PでPDF保存

これだけで画像が表示されることがあります。

---

背景のグラフィックをオンにする

ChromeやEdgeの印刷画面で、詳細設定を開きます。

そこで、

背景のグラフィック

にチェックを入れます。

これをオンにしないと、背景色、装飾、背景画像などがPDFに反映されないことがあります。

特に、表の見出し背景や装飾付きのブロックを使っている場合は、オンにしておいた方がよいです。

---

画像ブロックで挿入する

画像が背景画像として設定されている場合、PDF印刷で消えることがあります。

たとえば、以下のようなブロックは注意が必要です。

• カバーブロック
• 背景画像付きグループ
• CSSで設定した背景画像

PDF資料に使う画像は、できるだけWordPressの画像ブロックで普通に挿入するのが安全です。

画像ブロック
↓
メディアライブラリから画像を選択
↓
ページ内に表示

この形なら、PDFにも反映されやすくなります。

---

横長の画像は幅を調整する

業務フロー図や画面キャプチャのような横長画像をPDFにすると、小さく表示されることがあります。

この場合は、画像ブロックの幅を調整します。

WordPressの編集画面で対象の画像をクリックすると、画像の上にツールバーが表示されます。

そこに以下のような配置設定があります。

左寄せ
中央寄せ
右寄せ
幅広
全幅

横長の図をPDFに載せる場合は、まず幅広を選びます。

さらに、右側の画像設定で、画像サイズを確認します。

画像サイズ：フルサイズ

または、

画像サイズ：大

を選びます。

おすすめは以下です。

画像ブロックを選択
↓
配置を「幅広」にする
↓
画像サイズを「フルサイズ」または「大」にする
↓
プレビューで確認
↓
PDF保存して確認

実際に、横長の業務フロー図などは、画像幅を調整するだけでPDFにきれいに表示されることがあります。

---

画像サイズは大きすぎても小さすぎてもよくない

PDFに使う画像は、サイズにも注意が必要です。

小さすぎる画像を大きく表示すると、文字がぼやけます。

一方で、大きすぎる画像をそのまま貼ると、PDFの容量が大きくなったり、印刷処理が重くなったりします。

目安としては、以下くらいで十分です。

画像の種類	推奨サイズ
業務フロー図	横幅1200〜1600px程度
画面キャプチャ	横幅1000〜1600px程度
説明用画像	横幅800〜1200px程度

申請資料やマニュアルでは、画像そのものの美しさよりも、画像内の文字が読めることが重要です。

---

PDF化ではページ区切りの調整が重要

WordPressページをブラウザ印刷でPDF化すると、ページの分割自体は自動で行われます。

本文がA4サイズに収まらない場合、ブラウザが自動的に2ページ目、3ページ目へ分けてくれます。

ただし、自動分割に任せると、次のような問題が起きることがあります。

見出しだけがページ下に残る
本文が次ページに送られる

表の途中でページが切れる

画像の途中でページが切れる

章の区切りが中途半端になる

業務フロー図がページをまたいでしまう

申請資料やマニュアルとしてPDF化する場合、このような崩れがあると読みにくくなります。

そのため、重要な章の前や大きな図の前後には、手動でページ区切りを入れるのがおすすめです。

---

ページ区切りを入れる場所の考え方

すべての見出しごとにページ区切りを入れる必要はありません。

入れすぎると、ページ数が増えすぎて読みにくくなります。

おすすめは、大きな章の切り替わりや大きな図・表の前後だけに入れることです。

たとえば、機能説明書なら以下のような場所です。

表紙の後
システム概要の前
主要機能概要の前
業務フロー図の前
システム構成の前
動作環境の前
代表画面イメージの前
別添資料についての前

特に、業務フロー図のような横長画像は、1ページを使って大きく見せた方が分かりやすくなります。

---

WordPressでページ区切りを入れる方法

WordPressのブロックエディタには「ページ区切り」ブロックがあります。

ただし、これはWeb上で記事を複数ページに分けるための機能で、ブラウザ印刷時のPDF改ページとしては安定しない場合があります。

PDF化を目的にする場合は、カスタムHTMLブロックで改ページ用のHTMLを入れる方法が安定します。

改ページしたい場所に、カスタムHTMLブロックを追加して、以下を入れます。

<div class="page-break"></div>

そして、ページ上部にカスタムHTMLブロックを追加し、以下のCSSを入れます。

<style>
@media print {
  .page-break {
    break-before: page;
    page-break-before: always;
  }
}
</style>

これで、PDF印刷時にその位置でページが切れます。

---

業務フロー図を1ページに収めたい場合

横長の業務フロー図は、本文中に流し込むと小さくなったり、前後の文章と一緒に中途半端な位置で表示されたりします。

その場合は、業務フロー図の前後にページ区切りを入れます。

<div class="page-break"></div>

<!-- ここに業務フロー図を配置 -->

<div class="page-break"></div>

こうすると、業務フロー図だけを独立したページとして扱いやすくなります。

申請資料やマニュアルでは、図を小さく詰め込むより、1ページを使って大きく見せた方が読みやすい場合があります。

---

見出しだけがページ下に残るのを防ぐ

PDF化でよくあるのが、見出しだけがページ下に残り、本文が次ページに送られるパターンです。

ページ下部
「4. 主要機能概要」
↓
次ページに本文

これだと、資料として少し読みづらくなります。

この問題を減らすには、印刷用CSSに以下を入れます。

<style>
@media print {
  h2, h3 {
    break-after: avoid;
    page-break-after: avoid;
  }
}
</style>

これにより、見出しの直後でページが切れにくくなります。

---

表や画像が途中で切れるのを防ぐ

表や画像がページの途中で分割されると、資料として見づらくなります。

以下のCSSを入れると、表や画像の途中でページが切れにくくなります。

<style>
@media print {
  table, figure, img {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}
</style>

完全に防げるわけではありませんが、かなり改善されます。

---

PDF化用CSSをまとめて入れる

ページ区切り、見出し、表、画像の制御をまとめるなら、ページ上部に以下を入れておくと便利です。

WordPressのカスタムHTMLブロックに貼り付けて使えます。

<style>
@media print {
  @page {
    size: A4 portrait;
    margin: 14mm 12mm;
  }

  .page-break {
    break-before: page;
    page-break-before: always;
  }

  h2, h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  table, figure, img {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  body {
    font-size: 11pt;
    line-height: 1.55;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #999;
    padding: 6px 8px;
  }

  th {
    background: #f2f2f2 !important;
  }

  a[href]::after {
    content: "";
  }
}
</style>

まずはこのCSSを使えば、PDF化時のレイアウト崩れをある程度防ぎやすくなります。

---

ページ区切りは入れすぎない

ページ区切りは便利ですが、入れすぎると逆に読みにくくなります。

たとえば、すべてのH2見出しの前に改ページを入れると、1ページに少ししか文章がないページが増えてしまいます。

おすすめは、以下の考え方です。

場所	改ページの必要性
表紙の後	入れた方がよい
大きな章の前	必要に応じて入れる
業務フロー図の前後	入れた方がよい
大きな表の前	必要に応じて入れる
小さな見出しの前	基本不要
短い説明文の前	基本不要

ページ区切りは「最初から完璧に入れるもの」ではなく、PDF出力後に見た目を確認し、崩れた場所を調整するものと考えると進めやすいです。

---

PDF化前のチェックリスト

PDF保存する前に、以下を確認します。

□ 固定ページで作成している
□ サイドバーを非表示にしている
□ 1カラム表示になっている
□ 画像は画像ブロックで挿入している
□ 横長画像は幅広またはフルサイズにしている
□ ページを一番下までスクロールして画像を読み込んだ
□ 表が横にはみ出していない
□ 必要な場所に改ページを入れた
□ 印刷時に背景のグラフィックをオンにした
□ ヘッダーとフッターをオフにした

このチェックを行うだけで、PDF化の失敗はかなり減らせます。

---

おすすめの作業手順

最後に、実際の作業手順をまとめます。

1. WordPress固定ページで本文を作る
2. サイドバーなし・ワンカラムにする
3. 画像は画像ブロックで挿入する
4. 横長画像は幅広・フルサイズにする
5. いったんPDF保存して確認する
6. 見出し・表・画像が変なところで切れていないか見る
7. 必要な場所だけ改ページを入れる
8. 再度PDF保存して確認する

最初から一度で完璧にしようとすると大変です。

まずPDFにしてみて、崩れた場所だけ調整する方が現実的です。

---

まとめ

WordPressで作成したWebページは、ChromeやEdgeの印刷機能を使ってPDF化できます。

ただし、そのままPDF化すると、サイドバーが入ったり、画像が出なかったり、横長の図が小さくなったり、ページ区切りが不自然になったりすることがあります。

きれいにPDF化するためには、以下の点が重要です。

固定ページで作成する
サイドバーを消してワンカラムにする
画像ブロックで画像を挿入する
横長画像は幅広・フルサイズにする
PDF化前に画像を読み込んでおく
背景のグラフィックをオンにする
必要な場所に改ページを入れる

特に重要なのは、画像幅の調整とページ区切りの調整です。

業務フロー図や大きな表は、ページ途中に小さく詰め込むより、改ページを入れて1ページに収めた方が読みやすくなります。

WordPressで申請資料やマニュアルを作る場合は、Webページとしての見た目だけでなく、PDF化したときの見え方も確認しながら調整することが大切です。