対象者

更新内容

メモ：更新後1か月間は、以前のPDF生成機能に戻すことができます。1か月が経過すると、以前のPDF生成機能は利用できなくなります。  

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>内のテンプレートのコンテンツ	新しいPDF機能では、ヘッダー、フッター、ボディのコンテンツはHTMLの部分単位で個別に設定されています。  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にお問い合わせください。確認後、担当者が対応いたします。