H2-1. WordPressで作ったページをPDF化すると改ページが崩れることがある
WordPressで作成したページを、そのままPDF化して申請資料やマニュアルとして使いたい場面があります。
たとえば、IT導入補助金の申請資料、業務マニュアル、操作説明書、提案資料、仕様書などをWordPress上で作成し、それをPDFにして提出・共有するようなケースです。
WordPressで原稿を作成すると、見出し、本文、表、画像をブロック単位で管理できるため、あとから修正しやすく、社内での確認もしやすくなります。
しかし、WordPressのページをPDF化するときに問題になりやすいのが、改ページの位置です。
Webページ上ではきれいに見えていても、PDFにしたときに、見出しだけがページの一番下に残ってしまったり、表の途中でページが分かれてしまったりすることがあります。
申請資料やマニュアルでは、内容そのものだけでなく、読みやすさも重要です。
そのため、WordPressで作ったページをPDF化する場合は、あらかじめ「どこでページを区切るか」を考えておくと、提出資料として見やすくなります。
H3-1. WebページはPDF資料のようにページ単位で作られていない
WordPressの記事や固定ページは、基本的にはWebページとして表示されることを前提に作られています。
Webページは、スマートフォン、タブレット、パソコンなど、見る端末によって表示幅や高さが変わります。
そのため、WordPressの編集画面ではきれいに見えていても、PDF化するとページの区切りが自動で決まり、意図しない場所で改ページされることがあります。
特に次のようなケースでは、PDF化したときに読みづらくなることがあります。
見出しだけが前ページの最後に残る。
表の途中でページが切れる。
画像と説明文が別ページに分かれる。
章の途中から新しいページが始まり、資料全体の区切りが分かりにくくなる。
Webページとして読む場合はスクロールすれば問題ありませんが、PDF資料として読む場合は、ページ単位での見やすさが重要になります。
H3-2. 申請資料・マニュアル・提案書ではページ区切りが重要になる
通常のブログ記事であれば、ページ区切りはそれほど気にしなくても問題ありません。
しかし、申請資料、マニュアル、提案書、仕様書のような資料では、ページの区切りが読みやすさに大きく影響します。
たとえば、次のような構成の資料があるとします。
- システム概要
- 基本情報
- 対応する業務プロセス
- 主要機能
- 基本機能一覧
- 業務フロー
このような資料では、H2見出しごとにページを分けると、読み手が内容を理解しやすくなります。
また、主要機能の説明が長い場合は、H3見出しごとにページを分けると、機能ごとの説明が整理されます。
WordPressで作ったページをPDF化する場合は、単にPDFに変換するだけでなく、見出しごとにページ区切りを調整することで、資料としての完成度を高めることができます。
H2-2. WordPressの記事をPDFにする基本手順
WordPressで作った記事や固定ページは、ブラウザの印刷機能を使うことでPDFとして保存できます。
特別なPDF作成ソフトを使わなくても、Google ChromeやMicrosoft EdgeなどのブラウザからPDF化できます。
基本的な流れは、次の通りです。
WordPressで記事を作成する。
プレビューまたは公開ページを表示する。
ブラウザの印刷画面を開く。
プリンターの選択で「PDFに保存」を選ぶ。
PDFとして保存する。
この方法を使えば、WordPressで作成した申請資料、マニュアル、提案書、仕様書などをPDFとして保存できます。
ただし、下書き状態の記事をPDF化したい場合と、公開後の記事をPDF化したい場合では、少し操作が異なります。
H3-1. 下書き状態の記事をPDFで確認する方法
記事をまだ公開していない段階でも、PDF化して見え方を確認することができます。
申請資料やマニュアルを作っている場合、いきなり公開するのではなく、まず下書きの状態でPDFの見え方を確認したいことが多いと思います。
その場合は、WordPressの編集画面から「プレビュー」を使います。
手順は次の通りです。
まず、WordPressの編集画面で記事を作成します。
記事を書いたら、画面右上にある「プレビュー」をクリックします。
「新しいタブでプレビュー」または「プレビュー」を選ぶと、現在の下書き内容に近い表示を確認できます。
プレビュー画面が開いたら、その画面上でブラウザの印刷機能を使います。
Google Chromeの場合は、画面右上のメニューから「印刷」を選ぶか、キーボードで Ctrl + P を押します。
印刷画面が開いたら、送信先またはプリンターの項目で「PDFに保存」を選びます。
そのまま保存すると、下書き状態の記事をPDFとして確認できます。
この方法を使うと、公開前でもPDF化したときのページ区切り、見出しの位置、表や画像の表示を確認できます。
申請資料の場合は、公開前にこのプレビューPDFを確認しながら、改ページ位置を調整すると安心です。
H3-2. 公開後の記事をPDFにする方法
記事を公開した後であれば、公開ページを開いてPDF化できます。
手順はとてもシンプルです。
まず、公開済みの記事ページをブラウザで開きます。
次に、ブラウザの印刷画面を開きます。
Google ChromeやMicrosoft Edgeの場合は、キーボードで Ctrl + P を押すと印刷画面が開きます。
印刷画面が開いたら、送信先またはプリンターの項目で「PDFに保存」を選びます。
ページの向き、余白、倍率などを確認し、問題がなければ保存します。
これで、公開後の記事をPDFとして保存できます。
公開ページをPDF化する場合は、実際に読者や提出先が見るページに近い状態で確認できるため、最終確認に向いています。
ただし、公開ページにはヘッダー、フッター、サイドバー、関連記事、広告、SNSボタンなどが表示されることがあります。
申請資料やマニュアルとしてPDF化する場合は、余計な要素が入っていないか確認しましょう。
必要であれば、固定ページで申請資料専用のページを作る、サイドバーのないテンプレートを使う、印刷用CSSで不要な要素を非表示にする、といった調整を行うと見やすくなります。
H3-3. PDF化はブラウザの「印刷」機能を使うと簡単
WordPressの記事をPDFにするというと、専用のPDF変換ツールが必要に感じるかもしれません。
しかし、まずはブラウザの印刷機能を使う方法で十分です。
Google ChromeやMicrosoft Edgeでは、印刷画面から「PDFに保存」を選ぶことで、表示しているページをPDFとして保存できます。
基本操作は次の通りです。
PDF化したいページを開く。
Ctrl + P を押して印刷画面を開く。
送信先で「PDFに保存」を選ぶ。
必要に応じて、用紙サイズ、余白、倍率を調整する。
保存をクリックする。
この方法なら、WordPressの下書きプレビューでも、公開後の記事ページでもPDF化できます。
まずはこの方法でPDFを作成し、見出しや表、画像の位置を確認します。
そのうえで、ページ区切りが見づらい場合に、H2やH3の前で改ページするCSSを設定していきます。
H2-3. PDF化するときの改ページは印刷用CSSで指定できる
WordPressのページをPDF化するときの改ページは、CSSで指定できます。
通常のWeb表示ではそのまま表示し、印刷時やPDF化するときだけ改ページを指定するには、印刷用CSSを使います。
印刷用CSSでは、次のような指定を使います。
@media print
この指定を使うと、画面表示用のCSSとは別に、印刷やPDF化のときだけ反映されるCSSを書くことができます。
つまり、通常のWebページでは今まで通り表示し、PDF化するときだけH2やH3の前で改ページさせることができます。
H3-1. 通常表示ではなくPDF出力時だけCSSを効かせる
WordPressの記事や固定ページに、常に改ページのような見た目を入れてしまうと、Webページとしては見づらくなることがあります。
そこで、PDF化するときだけ改ページさせるために、次のような考え方を使います。
通常の画面表示では改ページしない。
印刷プレビューやPDF化のときだけ改ページする。
そのために使うのが、印刷用CSSです。
たとえば、次のような指定を追加CSSに入れると、印刷時だけ特定の要素の前で改ページできます。
@media print {
.pdf-page-break {
break-before: page;
page-break-before: always;
}
}
この設定では、pdf-page-break というCSSクラスが付いた要素の前で改ページします。
WordPressの編集画面で、改ページしたいH2やH3のブロックに pdf-page-break というクラスを付ければ、その見出しの前でページが分かれます。
H3-2. break-before と page-break-before の違い
改ページを指定するときには、主に次の2つのCSSが使われます。
break-before: page;
page-break-before: always;
現在は break-before の方が新しい書き方です。
一方で、page-break-before は古い書き方ですが、PDF化や印刷時の互換性を考えると、実務では両方書いておくと安心です。
そのため、WordPressでPDF化用のCSSを書く場合は、次のように両方を入れておくのがおすすめです。
@media print {
.pdf-page-break {
break-before: page;
page-break-before: always;
}
}
これにより、ブラウザやPDF化環境による差を少なくできます。
H2-4. H2見出しの前で改ページするCSS設定
WordPressでPDF資料を作る場合、まず考えやすいのは、H2見出しの前で改ページする方法です。
H2は記事や資料の大きな章に使うことが多いため、H2ごとにページを分けると、PDF資料として読みやすくなります。
たとえば、次のような章立ての資料では、H2ごとに改ページすると見やすくなります。
- システム正式名称
- ITツール基本情報
- 対応する業務プロセス
- 主要機能概要
- 基本機能一覧
- 業務フロー概要
このような構成では、各章の始まりを新しいページにすると、読み手が資料の構成を把握しやすくなります。
H3-1. すべてのH2見出しで改ページする場合
すべてのH2見出しの前で改ページしたい場合は、印刷用CSSでH2に対して改ページを指定します。
たとえば、次のようなCSSを追加します。
@media print {
h2.wp-block-heading {
break-before: page;
page-break-before: always;
}
}
この設定を入れると、WordPressのH2見出しの前でページが区切られます。
ただし、すべてのH2で改ページされるため、章が多い記事ではページ数が増えすぎることがあります。
また、記事の先頭にある最初のH2の前でも改ページが入る場合があり、PDFの最初に空白ができることもあります。
そのため、この方法はシンプルですが、実務では少し注意が必要です。
H3-2. 最初のH2まで改ページされる場合の注意点
すべてのH2に改ページを指定すると、最初のH2の前にも改ページが入ってしまうことがあります。
PDFの1ページ目にタイトルやリード文があり、その直後のH2から本文が始まる場合、最初のH2の前で改ページされると、意図しない空白ページができることがあります。
これを避ける方法として、最初のH2だけ改ページしないように調整する方法もあります。
ただし、WordPressのテーマやブロック構造によっては、CSSの指定が思った通りに効かないこともあります。
そのため、実務では「すべてのH2を自動で改ページする方法」よりも、「改ページしたい見出しだけにCSSクラスを付ける方法」の方が安全です。
H2-5. 必要な見出しだけ改ページするならCSSクラス指定がおすすめ
実務でおすすめなのは、改ページしたい見出しだけに専用のCSSクラスを付ける方法です。
この方法なら、すべてのH2やH3で自動的に改ページされるのではなく、必要な場所だけページを区切ることができます。
申請資料やマニュアルでは、すべての見出しで改ページしたいとは限りません。
H2ごとに改ページしたい章もあれば、同じページ内に続けて表示した方がよい章もあります。
また、H3単位でページを分けたい場所もあります。
そのため、改ページ専用のCSSクラスを作り、WordPressの編集画面で必要な見出しにだけ設定する方法が使いやすいです。
H3-1. 改ページ専用のCSSクラスを作る
まず、PDF化するときに改ページさせるためのCSSを、WordPressに登録します。
CSSと聞くと少し難しく感じるかもしれませんが、今回は下記のコードをコピーして貼り付けるだけです。
WordPressの管理画面で、次の順番に進みます。
外観
↓
カスタマイズ
↓
追加CSS
「追加CSS」の入力欄が開いたら、下記のCSSをそのまま貼り付けます。
@media print {
.pdf-page-break {
break-before: page;
page-break-before: always;
}
}
貼り付けたら、画面上部の「公開」または「保存」をクリックします。
これで、WordPress側に「PDF化するときに改ページするための設定」が追加されます。
ここで作っている pdf-page-break は、改ページ専用の目印のようなものです。
この時点では、まだすべての見出しで改ページされるわけではありません。
次の手順で、改ページしたいH2やH3の見出しブロックに pdf-page-break という目印を付けることで、その見出しの前でページが区切られるようになります。
ポイントは、次の2つです。
@media print は、印刷やPDF化のときだけ効く指定です。
pdf-page-break は、改ページしたい場所に付けるためのクラス名です。
通常のWebページ表示には大きな影響を与えず、PDF化するときだけ改ページ位置を調整できるため、申請資料やマニュアルをWordPressで作るときに便利です。
H3-2. WordPressのブロック設定から追加CSSクラスを入れる
次に、WordPressの編集画面で、改ページしたい見出しブロックを選択します。
H2見出しでも、H3見出しでも構いません。
ブロックを選択したら、右側のブロック設定を開きます。
その中に「高度な設定」または「追加CSSクラス」という項目があります。
そこに、次のクラス名を入力します。
pdf-page-break
これで、その見出しの前で改ページされるようになります。
たとえば、次のような資料であれば、各H2見出しに pdf-page-break を付けます。
- ITツール基本情報
- 対応する業務プロセス
- 主要機能概要
- 基本機能一覧
- 業務フロー概要
一方で、最初のH2には付けないようにすれば、PDFの先頭に不要な空白が出にくくなります。
このように、必要な場所だけ改ページできるため、申請資料やマニュアルのPDF化では、CSSクラス指定の方法が特におすすめです。
H2-6. H3見出しの前でも改ページしたい場合
資料の内容によっては、H2だけでなく、H3見出しの前でも改ページしたい場合があります。
たとえば、主要機能概要の章が長くなる場合です。
- 主要機能概要
4-1. 顧客・取引先管理
4-2. 見積管理
4-3. 受注管理
4-4. 納品管理
4-5. 請求管理
4-6. 入金確認・未入金管理
4-7. 発注・仕入管理
このようにH3ごとに機能説明が続く場合、すべてを連続して表示すると、PDFではページの途中で説明が分かれてしまうことがあります。
その場合は、重要なH3見出しの前に改ページを入れると、機能ごとの説明が読みやすくなります。
H3-1. 長い章の途中でページを分けたいときに使う
H2ごとの改ページだけでは、長い章の中身が読みにくくなることがあります。
特に、機能説明や操作説明では、1つのH2の中に複数のH3が入り、それぞれの説明文も長くなりやすいです。
このような場合は、H3見出しにも pdf-page-break クラスを付けることで、必要な場所でページを分けることができます。
たとえば、次のような章では、H3ごとに改ページすることを検討できます。
請求管理
入金確認・未入金管理
発注・仕入管理
売上・仕入レポート
帳票出力・CSV出力
ただし、すべてのH3で改ページするとページ数が増えすぎることがあります。
そのため、H3で改ページする場合も、必要な見出しだけに指定するのがおすすめです。
H3-2. H2とH3で改ページルールを分ける考え方
H2とH3では、改ページの使い方を分けて考えるとよいです。
H2は大きな章の区切りです。
そのため、申請資料やマニュアルでは、H2の前で改ページすると資料全体の構成が分かりやすくなります。
一方、H3はH2の中の小見出しです。
H3ごとにすべて改ページしてしまうと、1ページあたりの情報量が少なくなり、かえって読みにくくなることがあります。
実務では、次のように使い分けるとよいです。
H2は基本的に改ページ候補にする。
H3は説明が長い場合や、機能単位でページを分けたい場合だけ改ページする。
表や画像の前後でページが分かれて読みにくい場合は、H3の改ページ位置を調整する。
このように、すべてを自動化するのではなく、資料として読みやすい位置に手動で改ページ指定を入れることが大切です。
H2-7. WordPressで申請資料やマニュアルをPDF化するときの実務ポイント
WordPressで作ったページをPDF化する場合、CSSを設定するだけでなく、PDFとして出力した後の見え方も確認する必要があります。
特に、申請資料や業務マニュアルでは、読み手が資料を確認しやすいかどうかが重要です。
見出し、本文、表、画像、業務フロー図などが、ページの中で自然に収まっているかを確認しましょう。
H3-1. 見出し・表・画像の直前でページが切れないように確認する
PDF化したときに特に注意したいのは、見出し、表、画像の位置です。
たとえば、見出しだけがページの一番下に残り、説明文が次のページに送られると、読み手は内容を追いにくくなります。
また、表の途中でページが切れると、項目名と内容が別ページに分かれてしまい、資料として見づらくなります。
画像や業務フロー図も同じです。
画像だけが前ページにあり、説明文が次ページにあると、見比べながら読むことが難しくなります。
PDF化したら、次の点を確認するとよいです。
見出しと本文が同じページにあるか。
表の途中で不自然にページが分かれていないか。
画像と説明文が離れすぎていないか。
章の始まりが分かりやすい位置にあるか。
この確認を行うことで、WordPressで作った資料を、提出用PDFとして見やすく整えることができます。
H3-2. PDF化前に印刷プレビューで確認する
CSSを設定したら、すぐにPDF化するのではなく、まず印刷プレビューで確認するのがおすすめです。
Google Chromeなどのブラウザでは、印刷画面を開くと、PDF化したときに近い表示を確認できます。
印刷プレビューで、改ページ位置や余白、見出しの位置、表や画像の表示を確認します。
問題がなければ、そのままPDFとして保存します。
もし改ページ位置が思った通りでなければ、WordPressの編集画面に戻り、pdf-page-break クラスを付ける場所を調整します。
このように、WordPress編集画面と印刷プレビューを行き来しながら調整すると、見やすいPDF資料を作りやすくなります。
H3-3. 申請資料ではページ区切りを明確にした方が読みやすい
申請資料では、内容の正確さだけでなく、審査する人が読みやすい構成になっていることも大切です。
たとえば、ITツールの機能説明書であれば、次のような章立てになります。
システム正式名称
ITツール基本情報
対応する業務プロセス
主要機能概要
基本機能一覧
業務フロー概要
このような章がページの途中から始まるよりも、新しいページから始まった方が資料として読みやすくなります。
また、主要機能概要の中で説明が長くなる場合は、機能ごとに改ページを入れると、各機能の説明が整理されます。
WordPressで申請資料を作る場合は、Webページとしての見た目だけでなく、PDF化した後の読みやすさまで考えておくとよいでしょう。
H2-8. 改ページCSSが効かないときの確認ポイント
追加CSSを設定しても、思った通りに改ページされないことがあります。
その場合は、いくつかの確認ポイントがあります。
CSSの指定が間違っている場合もあれば、WordPressテーマやPDF化ツールの影響を受けている場合もあります。
落ち着いて、1つずつ確認していきましょう。
H3-1. 追加CSSが反映されているか確認する
まず確認したいのは、追加CSSが正しく反映されているかどうかです。
WordPressでは、外観のカスタマイズから追加CSSを入れる方法が一般的です。
ただし、テーマやプラグインによっては、キャッシュが残っていて、CSSの変更がすぐに反映されないことがあります。
CSSを追加したのに改ページされない場合は、次の点を確認します。
追加CSSに入力ミスがないか。
クラス名が一致しているか。
見出しブロックに pdf-page-break が正しく設定されているか。
キャッシュをクリアしたか。
特に多いのは、CSS側では pdf-page-break と書いているのに、WordPressのブロック側で別のクラス名を入力しているケースです。
クラス名は完全に一致している必要があります。
H3-2. PDF化ツールやブラウザによって表示が変わる場合がある
PDF化の結果は、使用するブラウザやPDF化ツールによって変わることがあります。
たとえば、Chromeの印刷機能でPDF化した場合と、別のPDF変換ツールを使った場合では、改ページ位置や余白が変わることがあります。
そのため、申請資料や提出資料としてPDF化する場合は、実際に使う方法で出力結果を確認することが大切です。
ChromeでPDF保存するなら、Chromeの印刷プレビューで確認します。
プラグインや外部ツールでPDF化するなら、そのツールで出力したPDFを確認します。
同じCSSを使っていても、出力環境によって見え方が変わることがあるため、最終的なPDFを必ず確認しましょう。
H3-3. キャッシュやテーマ側CSSの影響を確認する
WordPressでは、テーマやプラグインのCSSが影響して、印刷用CSSが思った通りに効かないことがあります。
また、キャッシュ系プラグインを使っている場合は、追加CSSを変更しても、古いCSSが残っていることがあります。
改ページCSSが効かないときは、次の点も確認します。
ブラウザキャッシュを削除する。
WordPressのキャッシュ系プラグインをクリアする。
テーマの追加CSSが正しく保存されているか確認する。
PDF化するページで、対象の見出しにCSSクラスが付いているか確認する。
それでも効かない場合は、CSSの指定を少し具体的にする方法もあります。
ただし、最初はシンプルに pdf-page-break クラスで運用し、必要に応じて調整するのがよいです。
H2-9. まとめ：WordPressのPDF化は改ページCSSで見やすく整えられる
WordPressで作ったページをPDF化するときは、Web上での見た目だけでなく、PDFとしてのページ区切りも重要です。
特に、申請資料、マニュアル、提案書、仕様書などでは、見出しごとにページが整理されていると、読み手にとって分かりやすい資料になります。
WordPressでは、印刷用CSSを使うことで、PDF化するときだけ改ページを指定できます。
すべてのH2で改ページする方法もありますが、実務では、改ページしたいH2やH3にだけ専用クラスを付ける方法が安全です。
改ページ用のCSSクラスを使えば、必要な場所だけページを区切ることができます。
WordPressで申請資料やマニュアルを作成している場合は、PDF化する前に改ページ位置を確認し、読みやすい資料に整えてから提出・共有するとよいでしょう。
H3-1. H2・H3見出しでページ区切りを指定できる
WordPressの見出しブロックには、追加CSSクラスを設定できます。
その機能を使えば、H2やH3の前で改ページする指定を入れることができます。
大きな章はH2で改ページする。
長い説明はH3で改ページする。
表や画像の位置を見ながら改ページを調整する。
このように使い分けることで、WordPressで作ったページをPDF資料として整えることができます。
H3-2. 実務では必要な見出しだけ改ページする方法が使いやすい
実務でおすすめなのは、すべての見出しに自動で改ページを入れる方法ではありません。
必要な見出しだけに pdf-page-break クラスを付ける方法です。
この方法なら、PDFのページ数が増えすぎることを防ぎながら、読みやすい位置でページを区切ることができます。
WordPressで申請資料やマニュアルを作る場合は、本文を作るだけでなく、PDF化したときのページ区切りまで確認しておくと、資料としての完成度が上がります。
```
コメント