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化したときの見え方も確認しながら調整することが大切です。
コメント