メインコンテンツへスキップ
PDF4me API統合AIとSDK知識ベース拡張機能APIテスターブログ

MakeでPDFにHTMLヘッダーとフッターを追加する方法とは？コード不要の3ステップガイド！

· 1分で読める
Sankalp Mishra
SEO and Content Writer

すでに使用している場合は 作る （旧Integromat）ワークフローを自動化し、プロフェッショナルな機能を追加する HTMLヘッダーとフッター PDF への変換は簡単です。3 つのモジュールだけで、コードは不要です。このガイドでは、Dropbox から PDF をダウンロードし、PDF4me を使用してカスタム ヘッダーまたはフッターを追加し、ブランド化されたファイルをアップロードする Make シナリオを設定する方法を正確に示します。 PDFにHTMLヘッダー/フッターを追加する アクションを実行して、HTMLをMakeに直接貼り付けてください。別途ヘッダーファイルは必要ありません。

あなたの制作フロー：3つのモジュール、1つの目標​

このシナリオは3つのステップで進行します。 Dropbox、ファイルのダウンロード → PDF4me、PDFにHTMLヘッダー/フッターを追加する → Dropbox、ファイルのアップロード各モジュールは次のモジュールに接続され、PDF4meモジュールではヘッダーまたはフッターのHTMLを定義します。

フローを作成する: Dropbox ファイルをダウンロード → PDF4me PDF に HTML ヘッダー/フッターを追加 → Dropbox ファイルをアップロード

あなたには Dropbox 接続（ファイルの読み書きのため）と PDF4me 接続（あなたの APIキー両方の設定が完了すると、フローは数秒でエンドツーエンドで実行されます。

入力ファイル

ヘッダーを追加する前の入力PDF：プレーンサンプル文書

出力ファイル

HTMLフッター付きのPDFを出力：会社の連絡先情報と住所

ステップ1：Dropbox：ファイルをダウンロードする​

まずは Dropbox モジュールを選択して選択する ファイルをダウンロードするこの手順では、ヘッダーまたはフッターを追加したいPDFファイルを取得します。

  1. 追加する Dropbox モジュール → 選択 ファイルをダウンロードする。
  2. 繋がり （必須）：Dropboxアカウントを選択するか、新しいアカウントを追加してください。
  3. ファイルを選択する方法: 設定 ファイルを選択してください。
  4. ファイル （必須）：PDF への完全なパスを入力してください。例： / Blog Data / sample_3_page.pdf必要に応じて、フォルダアイコンを使用してDropbox内を閲覧してください。
Dropboxでファイルをダウンロードする：接続、ファイルの選択方法、ファイルの選択、ファイルパス

クリック 保存このモジュールはファイルの内容を出力します。この出力は次のステップでPDF4meに渡します。

ステップ2：PDF4me：PDFにHTMLヘッダーとフッターを追加する​

追加する PDF4me モジュールを選択して選択する PDFにHTMLヘッダー/フッターを追加するここにHTMLを貼り付け、位置（ヘッダーまたはフッター）を設定し、余白を微調整します。

  1. 追加する PDF4me モジュール → 選択 PDFにHTMLヘッダー/フッターを追加する。
  2. ファイル （必須）：出力をマッピングします Dropbox: ファイルをダウンロードする （PDFバイナリファイル）
  3. HTMLコンテンツ （必須）：ヘッダーまたはフッターのHTMLを直接貼り付けてください。フッターの例：
<div class="footer-column footer-right" style="flex:1;text-align:right;">
 <h4 style="margin:0 0 0.2rem 0;font-weight:600;font-size:10px;">Address - Switzerland</h4>
 <p style="margin:0 0 0.1rem 0;font-size:9px;">Joweid Zentrum 1 8630 Rüti</p>
 <p style="margin:0 0 0.1rem 0;font-size:9px;">Switzerland Tel: +41 41 500 20 09</p>
 <p style="margin:0;font-size:9px;">Email: [email protected]</p>
</div>
  1. 位置 （必須）：選択 ヘッダ または フッター HTMLを表示したい場所によって異なります。
  2. 最初のページをスキップする: いいえ すべてのページに適用する。 はい 最初のページ（表紙など）をスキップしたい場合。
  3. ページ: 設定 全て すべてのページにヘッダー/フッターを追加する。
  4. 余白（mm）: 使用する ミリメートル （ピクセルではありません）。例の値： マージン下部 1、 左余白 2、 右余白 1. 去る 余白上部 ヘッダーを使用しない限り、空になります。
PDF4me HTMLヘッダーフッターの追加：Dropboxからのファイル、HTMLコンテンツ、フッターの位置、最初のページをスキップする番号、すべてのページ、余白（mm）

クリック 保存PDF4meはブランドロゴ入りのPDFを返します。このPDFはステップ3でアップロードします。

ステップ3：Dropbox：ファイルをアップロードする​

変更したPDFをDropboxに保存するには、 Dropbox、ファイルのアップロード。

  1. 追加する Dropbox モジュール → 選択 ファイルをアップロードする。
  2. 繋がり手順1と同じDropboxアカウントを使用してください。
  3. フォルダ （必須）：出力先となるパス、例： / Blog Data /。
  4. ファイル （必須）：出力をマッピングします PDF4me: PDFにHTMLヘッダー/フッターを追加するPDF4meモジュールからPDFを選択し、 ない ダウンロード手順で取得したファイルは元のファイルです。必要なのは、ヘッダーとフッターが適用された新しいファイルです。
Dropbox ファイルのアップロード: フォルダパス、PDF4me からのファイル PDF に HTML ヘッダー/フッターを追加

クリック 保存 そしてシナリオを実行します。PDFファイルにはブランドロゴが入り、選択したフォルダに保存されます。

サンプルHTMLスニペット：コピーしてMakeで使用​

これら PDF対応 Makeのスニペットは動作します HTMLコンテンツ フィールド。下のブロックを展開して、コピー＆ペースト、プレースホルダーを独自のテキストに置き換える、または変数を作成します。

ヘッダー​

2段組（著者、日付、改訂）Right column stays aligned; replace text with your own or Make variables.
<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 11px;">
 <tr>
 <td style="width: 50%; vertical-align: top;"></td>
 <td style="width: 50%; text-align: right; vertical-align: top;">
 Author: Per Nordqvist<br/>
 Date: 2025-11-12<br/>
 Revision: 4.24
 </td>
 </tr>
</table>
ページ番号付きヘッダーUse placeholders {{page}} and {{total}}; PDF4me replaces them per page.
<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 11px;">
 <tr>
 <td style="width: 50%; vertical-align: top;">Document title</td>
 <td style="width: 50%; text-align: right;">
 Author: Your Name | Date: 2025-11-12 | Page 1 of 5
 </td>
 </tr>
</table>
シンプルな中央揃えの1行
<div style="text-align: center; font-family: Arial, sans-serif; font-size: 12px; color: #333333;">Document Title - Confidential</div>

フッター​

法律／機密
<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 9px; color: #666666;">
 <tr>
 <td style="text-align: center; padding: 4px 0;">Confidential. For internal use only. All rights reserved.</td>
 </tr>
</table>
住所が記載されたフッター（Makeの例と同様）Right-aligned address block: adapt for your company.
<div class="footer-column footer-right" style="flex:1;text-align:right;">
 <h4 style="margin:0 0 0.2rem 0;font-weight:600;font-size:10px;">Your Company Name</h4>
 <p style="margin:0 0 0.1rem 0;font-size:9px;">Street Address City Postal</p>
 <p style="margin:0 0 0.1rem 0;font-size:9px;">Country Tel: +1 234 567 890</p>
 <p style="margin:0;font-size:9px;">Email: [email protected]</p>
</div>
ページ番号のみ
<div style="text-align: center; font-family: Arial, sans-serif; font-size: 10px;">Page 1 of 5</div>

HTMLを貼り付ける前に：簡単なチェックリスト​

Add HTML Header Footer API は、 プレーンなHTML で HTMLコンテンツ フィールド。Make で信頼性の高い PDF 出力を行うには:

  • インラインCSS： 使用 style="..." 要素に適用されます。外部スタイルシートはヘッダー/フッター領域には適用されません。
  • テーブルまたはシンプルなブロック: 使用する <table> または明示的なdiv要素 width そのため、PDF内で列が折り返されたり、再配置されたりすることはありません。
  • 単位: Makeのマージン設定は ミリメートル（mm）; HTML 内では、 px または % フォントサイズとレイアウトについて。
  • まずテストしてください: スニペットを貼り付けて PDFにHTMLヘッダー/フッターを追加する Makeに組み込む前に、サンプルPDFとAPIキーを使用してテストしてください。

:::ヒント APIテスターで試してみてください 上記のコードスニペットを貼り付けて htmlコンテンツ の分野 PDFにHTMLヘッダー/フッターを追加する テスター、API キーとサンプル PDF を追加して、 ヘッダ または フッター各コードブロックはコピー可能です。 :::

会社ロゴ、顧客固有のフッターなど​

追加できます 会社ロゴ ヘッダーでは、 顧客ごとに異なるフッター情報、および追加フィールド（請求書番号、プロジェクトコード、アカウントID）は、データからHTMLを構築して渡すことによって追加できます。 HTMLコンテンツ PDF4meモジュール内。

会社ロゴ入りのヘッダー​

使用する <img> タグ 公開URL または Base64データURI そのため、ロゴはヘッダーまたはフッターに表示されます。

例：ロゴと会社名が入ったヘッダーReplace the logo URL; use Location = Header in Make.
<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 11px;">
 <tr>
 <td style="width: 80px; vertical-align: middle; padding-right: 12px;">
 <img src="https://your-domain.com/logo.png" alt="Logo" style="max-width: 72px; max-height: 36px; display: block;" />
 </td>
 <td style="vertical-align: middle;">
 <strong>Your Company Name</strong><br/>
 <span style="font-size: 9px; color: #666666;">Tagline or document type</span>
 </td>
 </tr>
</table>

顧客ごとのフッター​

複数の顧客向けにPDFを生成する場合、顧客データ（名前、アカウントID、ドキュメント参照）からHTMLを構築し、それをPDF4meモジュールに渡します。Makeでは、以前のモジュールのデータやイテレータを使用して、HTMLを動的に構築できます。

例：顧客名とアカウント情報を含むフッターReplace placeholders with Make variables (e.g. from a previous module).
<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 9px; color: #666666;">
 <tr>
 <td style="text-align: center; padding: 4px 0;">
 Prepared for: Customer Name | Account: ACC-12345 | Doc ref: INV-2025-001
 </td>
 </tr>
</table>

使用場所：Make vs API​

ヘッダーとフッターを追加する方法は2つあります。

  1. 作る: 使用する HTMLヘッダー/フッターモジュールを追加PDF を ファイル （Dropboxまたは他のソースから）HTMLを貼り付けます HTMLコンテンツ、 選ぶ ヘッダ または フッター、 セット ページ （例えば。 all)、そして余白をmm単位で調整します。
  2. API： 電話 POST /api/v2/AddHtmlHeaderFooter と ドキュメントコンテンツ (Base64 PDF) ドキュメント名、 htmlコンテンツ （プレーンなHTML） 位置オプション: ページ、 skipFirstPage、およびマージンパラメータ（mm単位）。

どちらの環境でも、同じHTMLコードが使えます。この記事に掲載されているコードスニペットをどちらの場所でも使用してください。

次のステップ​

Get Your API KeyAdd HTML Header Footer in MakeTry Add HTML Header Footer APIFull API Documentation