カスタマイズ

PDFにページ番号・日付・タイトルを追加する方法

PDFにページ番号・日付・タイトルを追加する方法

料理のレシピを保存するだけなら、簡単なスクリーンショットで十分でしょう。

しかし、法的証拠、学術研究、あるいはビジネス記録としてウェブページを保存する場合、単なる画像では不十分です。「コンテキスト（背景情報）」が必要です。そのページが正確にいつ保存されたのか、どこから取得したのか、そして参照しやすいようにページ番号が必要です。

当社のツールには、プロ仕様の「ヘッダー＆フッター（Header & Footer）」エンジンが組み込まれています。これを使えば、PDFの全ページにこれらの情報を自動的に挿入できます。

以下にその使用方法と、今すぐ使えるコピー＆ペースト用のテンプレートを紹介します。

仕組みについて

当社のツールの "Advanced Settings"（詳細設定）セクションに、以下の2つのテキストボックスがあります：

  1. Header HTML（各ページの最上部に表示）
  2. Footer HTML（各ページの最下部に表示）

header & footer templates

ここに標準的なHTMLを書くこともできますが、真価を発揮するのは 特別なCSSクラス (Special CSS Classes) を使用した時です。これらの特定のクラス名を使用すると、コンバーターが自動的に正しいデータを代入します：

  • <span class='date'></span> → 現在の印刷（保存）日時を挿入します。
  • <span class='title'></span> → ウェブページのタイトルを挿入します。
  • <span class='url'></span> → ソースURLを挿入します。
  • <span class='pageNumber'></span> → 現在のページ番号を挿入します。
  • <span class='totalPages'></span> → 総ページ数を挿入します。

3つのコピー＆ペースト用テンプレート

これらは外部スタイルシートを必要とせず、PDFエンジンで完璧に動作するように、インラインCSS（style="..."）を使用して記述されています。

1. 「シンプルなページ番号」（フッター用）

これは定番のスタイルです。各ページの下部中央に小さくページ番号を表示します。

これを "Footer HTML" に貼り付けてください：

<div style="font-size: 10px; text-align: center; width: 100%; padding-top: 5px;">
  <span class="pageNumber"></span> / <span class="totalPages"></span> ページ
</div>

2. 「アーカイブ保存用」（フッター用）

証拠としての保存に最適です。左側にソースURL、右側に保存された日付を表示します。

これを "Footer HTML" に貼り付けてください：

<div style="font-size: 8px; width: 100%; border-top: 1px solid #ccc; padding-top: 5px; overflow: hidden;">
  <span style="float: left; max-width: 70%;">出典: <span class="url"></span></span>
  <span style="float: right;">保存日: <span class="date"></span></span>
</div>

3. 「レポート形式」（ヘッダー用）

ウェブキャプチャを公式文書のように見せることができます。左側にタイトルを太字で、右側に日付を表示します。

これを "Header HTML" に貼り付けてください：

<div style="font-size: 10px; width: 100%; margin-bottom: 10px; overflow: hidden;">
  <span style="float: left; font-weight: bold; max-width: 75%;" class="title"></span>
  <span style="float: right;" class="date"></span>
</div>

重要なヒント

  1. ⚠️ マージン（余白）の設定が必須です： ヘッダーとフッターはページの余白の内側に印字されます。もしマージンが「0」に設定されていると、ヘッダーは見えなくなってしまいます！これらのテンプレートを表示させるには、上下（TopとBottom）のマージンを少なくとも 0.4in（または 10mm）に設定してください。
  2. フォントサイズ： PDFエンジンは、画面とは異なった方法でフォントサイズを処理します。8px から 10px の使用をお勧めします。これより小さいと、文字が潰れたり読めなくなったりする可能性があります。

さらにレベルアップしたいですか？ ヘッダー活用は基本に過ぎません。プロフェッショナルな文書を作成するためのヒントについては、完璧なウェブページPDFを作成するための究極ガイドをご覧ください。