PDF生成機能の更新に伴う各種書類テンプレートのHTMLタグの更新

PDF生成機能の更新に伴う各種書類テンプレートのHTMLタグの更新

対象者

この更新内容は、古いPDF生成機能を利用している組織のみが対象です。これらの組織でPDF生成機能を利用しようとすると、各種書類テンプレートのページにアプリ内通知が表示されます。 

該当する組織のユーザーは、各種書類テンプレートのHTMLタグを更新する必要があります。

更新内容

各種書類テンプレートのHTMLのヘッダー、フッター、ページ番号のタグを確認し、対応形式への更新をお願いします。テンプレートを更新して保存した後、新しいPDF生成器機能に切り替えて、PDFが正しく生成されるかどうかを確認してください。 

PDF生成機能のエラーを防ぐため、2026年3月25日までに対応をお願いします。 
メモ
メモ：更新後1か月間は、以前のPDF生成機能に戻すことができます。1か月が経過すると、以前のPDF生成機能は利用できなくなります。  
以下の動画は、ヘッダーのタグを更新する例です。以下で紹介する手順を実施することで、他のタグについても同様に更新できます。


更新方法

HTMLをもとに作成された各種書類テンプレートのHTMLタグを更新するには、以下の手順を実行します。
  1. ［設定］→［カスタマイズ］→［テンプレート］→［各種書類］の順に移動します。
  2. HTMLで作成されたテンプレートにカーソルを合わせて、編集アイコンをクリックします。
  3. HTMLの編集アイコンをクリックします。
  4. <table>タグ内を確認します。以前のテンプレートの例は、以下のとおりです。
    メモ
    <table>
    <thead> 
         <!-- ロゴ、組織名などのヘッダーの内容 --> 
       </thead> 
       <tbody> 
         <!-- 本文 --> 
       </tbody> 
       <tfoot> 
         <!-- ページ番号、利用規約などのフッターの内容 --> 
       </tfoot> 
    </table>

  5. 上記の<table>タグの内容を、以下の3つのHTMLのセクションのブロックに置き換えます。ヘッダー、ボディ、フッターの内容をコピーして、各ブロックに貼り付けます。
    メモ
    <!-- ヘッダーのブロック --> 
     <section id="header-container" class=""> 
       <div id="pdfgen-header"> 
         <!-- こちらに以前の<thead>の内容を貼り付けます --> 
       </div> 
     </section> 
       
     <!-- ボディ／本文のブロック --> 
     <section id="page-container" class=""> 
       <div id="pdfgen-content"> 
         <!-- こちらに以前の<tbody>の内容を貼り付けます --> 
       </div> 
     </section> 

       <!-- フッターのブロック --> 
     <section id="footer-container" class=""> 
       <div id="pdfgen-footer"> 
         <!-- こちらに以前の<tfoot>の内容を貼り付けます --> 
       </div> 
     </section> 

  6. 以前の機能では、CSSカウンターを使用してページ番号が生成されていました。新しい機能では、ページ番号が自動で挿入されます。このCSSは必要なくなったため、削除する必要があります。なお、削除する際は、「.pagenum」カウンターのルールのみ削除してください。<style>ブロック全体を削除しないでください。他のCSS（フォント、色、テーブルのスタイル、余白など）は保持する必要があります。
  7. 更新後、PDFの隅に余白が目立つ場合は、以下のCSSを追加して標準のブラウザーの予約にリセットしてください。
    メモ
     <style> 
       html { 
         margin: 0px; 
         padding: 0px; 
       } 
     </style> 
    このCSSは任意です。プレビューで余白が目立つ場合にのみ追加してください。
以下の表のとおり、ヘッダー、フッター、ページ番号のタグのHTMLコードを編集します。
要素
使用できないタグ
使用できるタグ
一般
<table>...</table>内のテンプレートのコンテンツ
  1. 新しいPDF機能では、ヘッダー、フッター、ボディのコンテンツはHTMLの部分単位で個別に設定されています。 
  2. PDF生成機能のエラーを防ぐには、すべてのHTMLのコンテンツにおいて幅（padding）と余白（margin）の値をCSS形式で「0」に指定する必要があります。
<style>
html {
margin: 0px;
padding: 0px;
}Header
</style>
ヘッダー
テーブルのボディ内の<thead>...</thead>で囲まれているコンテンツ
以下のようにコンテンツを囲む必要があります

<section id="header-container"class="">
<div id="pdfgen-header">
...
</div>
</section>

CSSでは、以下のようにヘッダーのコンテンツを指定する必要があります。

<style>
#pdfgen-header {
}
</style>
フッター
テーブルのボディ内の<tfoot>...</tfoot>で囲まれているコンテンツ
以下のようにコンテンツを囲む必要があります

<section id="footer-container" class="">
<div id="pdfgen-footer">
...
</div>
</section>

CSSでは、以下のようにフッターのコンテンツを指定する必要があります。

<style>
#pdfgen-footer {
}
</style>
ページ番号
以下のように囲まれているコンテンツ

<span
class="pagenum">..</span>
<style>
*.pagenum:after {
counter-increment: page;
content: "" counter(page);
}
</style>
以下のようにコンテンツを囲む必要があります

<span class="pageNumber">..</span>

総ページ数を取得するには、以下のように記述してください

<span class="totalPage">...</span>

保持される内容

  1. 上記の変更内容以外の既存のコードは保持されます。
  2. レイアウトテーブル：すべてを囲むHTMLタグの最上位のテーブルです。<thead>、<tbody>、<tfoot>が子の要素として含まれます。
  3. データテーブル：ボディの内容のテーブルです。商品、価格などの実際のデータの行／列が含まれます。
  4. レイアウトテーブルのみ変換する必要があります。データテーブルは保持されます。 
  5. なお、削除する際は、「.pagenum」カウンターのルールのみ削除してください。<style>ブロック全体を削除しないでください。他のCSS（フォント、色、テーブルのスタイル、余白など）は保持する必要があります。
タグの更新後、テンプレートを保存して、テンプレートのPDFを生成して内容を確認してください。内容を確認するには、下部の［こちらをクリックしてください］をクリックします。新しいPDF生成機能によって生成されるPDFのプレビューが表示されます。



メモ
問題が解決しない場合
  1. 同じテンプレート内に、複数のヘッダー／フッターの内容がないか確認してください。
  2. <table>の要素の外側に<tr>または<td>タグがないか確認してください。
  3. クラス名が「pagenum」ではなく、「pageNumber」であることを確認してください（Nは大文字にする必要があります）。
  4. 「.pagenum」のページのカウンターに関係ないCSSが誤って削除されていないことを確認してください。

ご質問やご不明な点については、support@zohocrm.comにお問い合わせください。確認後、担当者が対応いたします。